Попади в меня, если сможешь:
Гид по областям нажатия для начинающих дизайнеров

Область нажатия (она же touch target или tappable area) — это невидимая зона вокруг элемента интерфейса (кнопки, иконки, ссылки), которая реагирует на касание. И твоя святая обязанность как дизайнера — сделать эту зону достаточно большой, чтобы в нее было комфортно попадать.

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

Хорошая область нажатия — это как хороший официант: он делает свою работу незаметно, и ты чувствуешь только комфорт. Плохая — как комар, который жужжит над ухом всю ночь.

К счастью, тебе не нужно изобретать велосипед. Гиганты мобильной индустрии уже все посчитали за нас.

Рекомендуемый минимальный размер области нажатия — 44x44 поинта.

Рекомендуемый минимальный размер — 48x48 dp.

Если коротко, это не пиксели. Это специальные единицы измерения, которые не зависят от разрешения экрана. Телефон может быть стареньким с низким разрешением или новейшим флагманом с Retina-дисплеем — кнопка размером 44x44 поинта на обоих будет иметь примерно одинаковый физический размер, удобный для пальца. Просто запомни эти цифры как мантру: 44-48. Меньше — опасно для нервной системы пользователя.

В среднем, подушечка пальца взрослого человека имеет размер около 10-14 мм, а эти 44-48 pt/dp как раз примерно соответствуют 9-10 мм. Это тот минимум, который обеспечивает комфортное попадание.

Это и будет в пикселях! Хоть это не сопоставимые единицы измерения, но рисуем мы в пикселях и физический размер "тапельной" области тоже будет в размерах 44-48 пикселей.

Просто знать цифры — это полдела. Настоящая магия начинается, когда ты учишься применять их с умом.

Кнопка в невидимой шубе

Самый главный трюк! Визуальная часть элемента может быть маленькой, а вот область нажатия вокруг нее — большой. Представь себе иконку "сердечко" размером 24x24 dp. Если сделать тап-зону такого же размера, в нее будет сложно попасть.

Когда одной строки недостаточно, используется текстовая область. Она идеально подходит для комментариев, сообщений или написания отзыва, позволяя вводить несколько строк и абзацев текста.

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

Предназначено для ввода чисел. Часто оснащено стрелками для увеличения или уменьшения значения. На мобильных устройствах вызывает цифровую клавиатуру.

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

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

Позволяет выбрать один или несколько вариантов из списка. Классический пример — согласие с условиями использования или выбор нескольких интересов в профиле.

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

Предоставляет удобный календарный интерфейс для выбора даты, времени или их комбинации, избавляя пользователя от необходимости вводить данные вручную в правильном формате.

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

Состояние, когда курсор мыши находится над полем. Легкое изменение цвета рамки или фона сигнализирует пользователю, что элемент интерактивен.

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

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