Как выявить слишком маленький интервал между кнопками при проверке удобства сайта для мобильных устройств?

Если на телефоне при нажатии «Отправить запрос» вы случайно попадаете по соседнему значку WhatsApp или при раскрытии меню нажимаете на соседний раздел, проверьте фактическую область нажатия, расстояние до соседних областей и компоновку страницы. Видимый зазор между кнопками не означает, что их сенсорные области не перекрываются; у небольшого на вид значка область нажатия может быть достаточно большой.

Ища способы проверки по запросу check for mobile friendly, не ограничивайтесь результатом «пройдено» или сообщением об ошибке в инструменте. Сначала определите, на какой странице, при какой ширине экрана и в каком состоянии интерфейса возникает случайное нажатие. Затем проверьте размеры элементов в браузере и протестируйте страницу на реальном устройстве. Только так можно понять, нужно ли увеличить внутренние отступы, увеличить расстояние между элементами или изменить расположение всей группы кнопок.

Сначала определите, где и при каких условиях возникают случайные нажатия

При проверке сайта для внешней торговли или посадочной страницы начните с действий, которые напрямую влияют на получение запросов и покупки: верхней навигации, фильтров товаров, отправки форм, изменения количества товаров в корзине, а также закреплённых внизу кнопок звонка, чата и отправки запроса. Особое внимание уделите ситуациям, когда одновременно отображаются плавающий виджет поддержки, уведомление о файлах cookie и нижняя панель действий: они могут перекрывать кнопки, которые в обычных условиях нажимаются правильно.

Не проверяйте только начальный экран главной страницы. Откройте страницу с описанием товара, раскройте меню, откройте панель фильтров и вызовите сообщение проверки формы. Интервал между кнопками в исходном состоянии может быть достаточным, но после раскрытия меню новые элементы способны сместить их вплотную друг к другу. На многоязычном сайте также проверьте версии с более длинными надписями, чтобы после перевода текст кнопок не переносился и ссылки не располагались слишком близко друг к другу.

При описании проблемы укажите как минимум адрес страницы, ширину экрана, последовательность действий и элемент, по которому происходит случайное нажатие. Например, «после открытия нижней панели запроса на странице товара при нажатии кнопки закрытия легко задеть кнопку чата» — это описание поможет разработчикам воспроизвести проблему лучше, чем «кнопки на мобильном экране расположены слишком тесно».

Определите границы области нажатия, а затем оцените её размер

В инструментах разработчика браузера переключитесь на режим эмуляции мобильного устройства, выберите нужную кнопку и проверьте её блочную модель, ширину, высоту и расположение относительно соседних элементов. Измеряйте элемент, который действительно принимает нажатие, — ссылку или кнопку. Не ориентируйтесь только на внутренний значок или текст и не принимайте размер внешнего декоративного контейнера за размер области нажатия.

Например, если значок находится в центре большой цветной области, но нажать можно только на сам значок, цветной фон не увеличивает сенсорную область. И наоборот: если увеличить внутренние отступы кнопки, попасть по ней пальцем станет легче, даже если сам значок останется прежнего размера. Также проверьте элементы с абсолютным позиционированием и прозрачные перекрытия, чтобы убедиться, что визуально пустое место не занято другими элементами управления.

При оценке размера можно ориентироваться на требование WCAG 2.2 «Размер цели (минимальный)»: цель для ввода указателем должна, как правило, иметь размер не менее 24×24 CSS-пикселей; при этом предусмотрены исключения для интервалов и встроенных ссылок. Соответствие небольшого элемента исключению для интервалов проверяется по круговой области, определённой стандартом. Это нельзя упрощённо трактовать как правило «достаточно оставить между двумя кнопками фиксированное число пикселей».

Для часто используемых действий, таких как отправка запроса и добавление товара в корзину, в качестве проектной цели можно выбрать размер около 44×44 CSS-пикселей или больше, чтобы оставить запас для нажатия пальцем. Соответствие требованиям к размеру не заменяет проверку работы интерфейса: чем легче перепутать действия соседних кнопок, тем важнее обеспечить между ними чёткий интервал и визуальное различие.

Устраняйте причину, не увеличивая тесноту расположения

Если расстояние между кнопками слишком мало, не всегда достаточно увеличить внешние отступы. Сначала выясните, связана ли проблема с маленькой сенсорной областью, недостатком места в контейнере или перекрытием плавающим элементом, а затем выберите подходящий способ исправления.

• Нажать можно лишь на небольшую область значка или текста: в первую очередь увеличьте внутренние отступы ссылки или кнопки и задайте подходящие минимальные ширину и высоту. Свободное пространство вокруг значка должно входить в ту же область нажатия.
• Ряд кнопок уже занимает всю ширину экрана: расположите их в несколько строк или вертикально либо уберите с экрана второстепенные элементы. Дальнейшее увеличение кнопок может привести к горизонтальной прокрутке.
• Соседние элементы легко перепутать при нажатии: увеличьте расстояние между ними с помощью параметров компоновки или внешних отступов и проверьте, не перекрываются ли области нажатия после увеличения. Одного увеличения расстояния между надписями может быть недостаточно, чтобы улучшить границы областей нажатия.
• Плавающая кнопка перекрывает элементы страницы: измените её положение, резервируемое для неё пространство или условия отображения, чтобы кнопка поддержки, нижняя панель и системная безопасная область не мешали друг другу.

При проверке легко упустить меню навигации, номера страниц и небольшие ссылки рядом с формами. Для встроенных ссылок в тексте действуют особые условия оценки, поэтому не нужно обязательно превращать их в крупные кнопки. Однако следует отдельно проверить область нажатия каждого из расположенных рядом самостоятельных элементов, например «Назад», «Отправить» и «Очистить».

При внесении изменений также сохраняйте понятную иерархию действий. Если кнопки отправки и сброса формы запроса расположены вплотную друг к другу, увеличение обеих кнопок может повысить риск ошибки. Сначала решите, обязательно ли сохранять второстепенное действие, а затем измените компоновку. Не следует просто увеличивать все кнопки, чтобы пройти проверку, и считать работу завершённой.

Повторная проверка должна охватывать реальные действия, а не только просмотр снимка экрана

Эмуляция в браузере помогает выявить проблемы компоновки, но точность нажатия мышью отличается от точности нажатия пальцем. После внесения изменений выполните на реальном устройстве основные действия: откройте навигацию, переключите товар, заполните форму, закройте всплывающую панель и отправьте форму. Обратите внимание на положение закреплённой панели при прокрутке и на то, не перекрывает ли кнопка отправки экранная клавиатура.

Повторная проверка должна охватывать узкие экраны, смартфоны с более широким экраном и языковые версии с более длинным текстом. Проверьте горизонтальную прокрутку, перенос надписей на кнопках, масштабирование страницы и компоновку при повороте устройства. Если параметр viewport задан неправильно или весь интерфейс уменьшен, чтобы уместить больше содержимого, сначала устраните эти базовые проблемы. Иначе локальное увеличение интервалов всё равно не обеспечит удобство использования.

Автоматические отчёты помогают обнаружить некоторые проблемы с размерами и компоновкой, но не позволяют полностью оценить удобство нажатия пальцем и могут не обнаружить элементы управления, появляющиеся только после взаимодействия. Упоминавшийся в ранних руководствах инструмент Google для проверки удобства просмотра на мобильных устройствах больше не доступен. При проверке можно сочетать инструменты разработчика браузера, средства проверки доступности и тестирование на реальном устройстве.

При приёмке замените формулировку «расстояние между кнопками скорректировано» на результат проверки, который можно воспроизвести: на каких страницах, при какой ширине экрана и на каких языках были выполнены конкретные действия и исчезли ли прежние случайные нажатия. На страницах, привлекающих рекламный трафик или собирающих запросы, сначала устраните препятствия на пути отправки формы, связи и покупки, а затем займитесь второстепенными элементами. Такой порядок лучше учитывает возможные потери для бизнеса.