Содержание · 7
Палец — не курсор. Разбираем реальную точность касания, минимальные размеры целей, зазоры и то, почему промахи возникают даже при формально достаточных размерах.
Точность пальца
Площадь контакта подушечки пальца с экраном — около 8–10 миллиметров, что при обычной плотности пикселей соответствует примерно 45–55 пикселям. При этом центр касания смещён относительно того, куда человек «целится».
Отсюда минимальный размер цели 44 × 44 пикселя — не рекомендация, а следствие анатомии.
Зазоры
Размер цели сам по себе не спасает, если соседние элементы вплотную. Минимальный зазор между целями — 8 пикселей, комфортный — 12–16.
Особенно страдают счётчики количества, элементы «плюс/минус» и группы иконок в шапке.
Где промахиваются чаще всего
Практика тестирования показывает несколько устойчивых мест повышенной частоты промахов.
- Крестик закрытия в углу экрана — маленький и у самой границы.
- Ссылки внутри абзаца текста — расположены вплотную к строкам.
- Соседние иконки в шапке без зазоров.
- Элементы у самого низа экрана — перекрываются системными жестами.
Системные зоны
Нижняя полоса жеста «домой», верхняя область с датчиками, боковые зоны свайпа назад — всё это принадлежит системе. Собственные интерактивные элементы там работают ненадёжно.
Учитывать это нужно не только отступами, но и проверкой на устройствах разных форм-факторов.
Палец не курсор: он толще цели и закрывает её собой. Всё остальное в проектировании касаний — следствие этих двух фактов.
Почему промахи растут к краям экрана
Точность касания неодинакова по площади экрана. В центре, куда палец приходит естественным движением, разброс минимален; к верхним углам он вырастает вдвое — рука вытягивается, кисть поворачивается, и контакт происходит не подушечкой, а её краем. Поэтому одинаковые по размеру кнопки в разных частях экрана промахиваются с разной частотой.
Практический вывод простой: чем дальше элемент от зоны большого пальца, тем крупнее он должен быть. Кнопка 44 пикселя в нижней трети экрана работает надёжно, та же кнопка в верхнем углу требует запаса.
Что делать с плотными списками
Таблицы и списки с действиями на каждой строке — место, где требование к размеру зоны сталкивается с требованием к плотности информации. Увеличивать каждую строку до 44 пикселей означает показывать вчетверо меньше данных.
- Сделать зоной нажатия всю строку, а не иконку в её конце.
- Действия вынести в контекстное меню по долгому нажатию или свайпу, оставив на строке одно основное.
- Разнести разрушительные действия от частых: удаление рядом с открытием даёт дорогие промахи.
- Увеличить не саму цель, а её невидимую область — так строка остаётся плотной, а промахов меньше.
Что в итоге
Проектирование под касание сводится к трём числам: цель не меньше 44 пикселей, зазор от 8 и отступ от системных зон.
Увеличивайте область нажатия за пределы видимого элемента — это самый дешёвый способ снизить количество промахов.
Коротко
- Почему жест нельзя делать единственным способом действия?
- Он невидим: его нельзя увидеть на экране и нельзя случайно обнаружить. Жест хорош как ускорение для того, кто уже умеет, и не годится как единственная дверь.
- Каким должен быть минимальный размер цели касания?
- Около 44 точек по каждой стороне — это примерная площадь подушечки пальца. Визуально элемент может быть меньше, но зона нажатия расширяется до этого размера.
Онбординг в приложении
Три слайда с иллюстрациями почти не работают. Разбираем подходы к первому знакомству, которые действительно доводят до первого полезного действия.ДальшеЧитайте также
Посмотреть примеры
Нашли ошибку или неточность в атрибуции? Напишите нам
Обсуждение
Загружаем…