Ловушка тач-интерфейсов: почему адаптивная верстка не гарантирует продажи
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 с соблюдением безопасных отступов. Если ссылка на согласие с офертой находится вплотную к чекбоксу, пользователь вместо выбора чекбокса случайно открывает чужую страницу и сбрасывает введенные данные.
Зона большого пальца (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 эмулирует поведение пользователей вашего сегмента (ICP), находит скрытые баги верстки, трение в чекауте и формирует список селекторов для исправления.
1 бесплатный срез на аккаунт
Читайте также по теме
Все статьиОшибки вайбкодинга: 7 слепых зон интерфейса, созданного нейросетями
Вайбкодинг ускорил прототипирование в 10 раз, но породил невидимый UX-долг. Исследования Addy Osmani и Nielsen Norman Group: где нейросети ломают логику пользователей и как это исправить.
Почему 70% клиентов бросают корзину: 9 критических ошибок чекаута
Средний Cart Abandonment Rate в e-commerce превышает 70%. Разбираем многолетние исследования Baymard Institute: как устранить скрытые барьеры в оформлении заказа и поднять конверсию без изменения цен.
Кнопка на $300 000 000: легендарный кейс Джареда Спула и реальный ROI юзабилити
История хрестоматийного кейса Джареда Спула. Разбираем экономику юзабилити: почему каждый вложенный в UX рубль приносит в разы больше, чем закупка дополнительного рекламного трафика.