Ловушка тач-интерфейсов: почему адаптивная верстка не гарантирует продажи
Thumb Zone, стандарты WCAG 2.2 и скрытые конфликты мобильных клавиатур
Алексей Смирнов
Lead Product Architect, UXCheck
Сегодня на мобильные устройства приходится от 70 до 85% трафика большинства интернет-магазинов и сервисов. При этом конверсия со смартфонов стабильно отстает от десктопной в 2–3 раза.
Большинство команд считают задачу решенной, если сайт «адаптивный»: верстка масштабируется без полосы прокрутки. Но реальный человек взаимодействует с экраном телефона на бегу, одной рукой, подушечкой пальца. Интерфейсы, собранные нейросетями, страдают этим особенно часто, см. пять слепых зон вайбкодинга.
Синдром «толстого пальца» и стандарт WCAG 2.2
Курсор мыши на компьютере имеет субпиксельную точность. Подушечка пальца человека при нажатии на стекло покрывает пятно контакта диаметром 8–12 мм (около 40–50 пикселей).
По нормативу WCAG 2.2 кликабельный элемент должен быть не менее 24×24px, с безопасными отступами. Если ссылка на согласие с офертой находится вплотную к чекбоксу, пользователь вместо выбора чекбокса случайно открывает чужую страницу и сбрасывает введенные данные. Критерий 2.5.8 — это один из пяти пунктов WCAG, напрямую связанных с деньгами: подробнее в статье о доступности как конверсии.
Зона большого пальца (The Thumb Zone)
Масштабное исследование Стивена Хубера (Steven Hoober) на 1 333 пользователях показало, что почти половина людей (49%) управляют телефоном одной рукой.
Верхняя треть современных смартфонов с экраном 6.5+ дюймов это «мертвая зона». Главное действие вверху экрана заставляет пользователя рискованно перехватывать телефон. Все целевые действия должны находиться в нижней трети экрана (Bottom Bar или Sticky Footer).
Конфликт нативной клавиатуры и фиксированных блоков
При тапе в поле ввода снизу экрана выезжает системная клавиатура iOS или Android, забирая до 50% полезной площади экрана.
Если на сайте кнопка «Купить» закреплена стилем fixed bottom-0, браузер часто поднимает ее поверх поля ввода, в котором человек печатает. Пользователь не видит текст, автозаполнение ломается, и оформление срывается. Сколько полей вообще должно быть в мобильной форме, разобрано в статье о длине форм, а полная карта барьеров оформления собрана в разборе ошибок чекаута.
Специализированные типы ввода (HTML Input Types)
Заставлять человека вручную переключать буквы на цифры ради ввода номера карты или телефона — это грубейшая ошибка интерфейса. Тег <input type="tel"> или inputmode="numeric" должен быть стандартом по умолчанию для всех числовых данных.
Источники, исследования и стандарты
- [1]Steven Hoober: How Do Users Really Hold Mobile Devices? (Empirical field study of 1,333 mobile users)
- [2]Luke Wroblewski: Mobile First: Form design and one-handed thumb interaction patterns
- [3]W3C WCAG 2.2 Recommendation: Success Criterion 2.5.8: Target Size (Minimum 24x24 CSS pixels)
Хотите узнать, есть ли эти ошибки на вашем сайте?
UXCheck проходит сайт в живом браузере глазами вашей аудитории, находит скрытые баги верстки, трение в формах и чекауте и формирует список селекторов для исправления.
Проверка главной бесплатно, без карты
Читайте также по теме
Все статьиДоступность как конверсия: что из WCAG 2.2 реально влияет на продажи
Доступность в РФ воспринимают как соцответственность, а не как деньги. Разбираем, какие критерии WCAG 2.2 совпадают с потерей конверсии у всех пользователей: подписи полей, имена кнопок, фокус, размер целей, и как проверять их автоматически.
Ошибки вайбкодинга: 5 слепых зон интерфейса, созданного нейросетями
Вайбкодинг ускорил прототипирование в 10 раз, но породил невидимый UX-долг. Исследования Addy Osmani и Nielsen Norman Group: где нейросети ломают логику пользователей и как это исправить.
Почему 70% клиентов бросают корзину: 5 критических ошибок чекаута
Средний Cart Abandonment Rate в e-commerce превышает 70%. Разбираем многолетние исследования Baymard Institute: как устранить скрытые барьеры в оформлении заказа и поднять конверсию, не меняя цены.