Зона «толстых пальцев»: почему по кнопкам трудно попасть на телефоне

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

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

Почему палец — это не мышь

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

Отсюда три жалобы, о которых сообщают клиенты:

• нажимают рядом с кнопкой, и ничего не происходит;
• попадают не на ту кнопку (например, «Отмена» вместо «Отправить»);
• нажимают несколько раз, потому что первое касание «не сработало».

У всех трёх одна причина: цель слишком маленькая или слишком близко к другим целям. Это не вина пользователя — это проблема размера, которая решается в CSS.

Правильный размер кнопки: реальные цифры

Есть чёткие стандарты, опубликованные теми, кто создаёт операционные системы:

• Apple рекомендует область нажатия не менее 44 × 44 точек.
• Google (Material Design) рекомендует не менее 48 × 48 dp.
• WCAG, стандарт доступности, требует не менее 44 × 44 px на уровне AAA и 24 × 24 px как базовый порог (AA).

Важнее всего одно: речь идёт об области нажатия, а не обязательно о том, насколько крупно выглядит кнопка. Маленькая текстовая ссылка может иметь большую область нажатия, если добавить вокруг неё отступ. На практике даже иконка в 24 px может нести область нажатия в 44–48 px за счёт невидимого пространства вокруг. Простое правило, которое я даю клиентам: если взрослый не может удобно нажать большим пальцем — значит, слишком мелко.

Расстояние между кнопками важно не меньше размера

Можно иметь достаточно крупные кнопки и всё равно получать промахи, если они прилеплены друг к другу. Когда две цели соприкасаются, палец, чуть соскользнув, попадает на соседнюю.

Несколько практических правил:

• Оставляйте хотя бы 8 px между двумя нажимаемыми элементами, а между важными действиями (например, «Удалить» рядом с «Сохранить») — ещё больше.
• Не ставьте противоположные действия рядом. «Оформить заказ» и «Очистить корзину» не должны соприкасаться.
• В меню и списках делайте каждую строку достаточно высокой, чтобы нажать, не задев строку выше или ниже.

Пустое пространство — не потерянное место. На телефоне именно расстояние решает, будет ли нажатие чётким или обернётся раздражением.

Зона большого пальца: куда руке дотянуться трудно

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

Что это значит для вашего сайта:

• Разместите главные действия (позвонить, написать, забронировать, добавить в корзину) внизу и в пределах досягаемости, а не спрятанными в верхнем углу.
• Фиксированная нижняя панель с одной понятной кнопкой действия работает намного лучше, чем кнопка, затерянная в шапке.
• Не прячьте номер телефона или кнопку WhatsApp в меню, которое пользователю сначала нужно открыть.

Лучший тест — настоящий: возьмите телефон одной рукой, держите как обычно и попробуйте сделать то, что сделал бы клиент. Если приходится помогать второй рукой — что-то расположено плохо.

Как проверить самому за пять минут

Чтобы найти проблему, не нужны дорогие инструменты:

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

В MPO Web Studio, создавая сайт, мы тестируем его на настоящем телефоне до сдачи — именно чтобы вы никогда не получали подобных отзывов. Мы можем даже бесплатно подготовить демоверсию на основе вашего бизнеса, чтобы вы почувствовали, как это работает на телефоне, ещё до оплаты. Если хотите второе мнение о вашем текущем сайте, напишите нам в WhatsApp, и мы честно скажем, какие кнопки слишком мелкие — без навязывания того, что вам не нужно.