Размер кнопок на мобильном сайте

Давайте разберемся, как палец человека связан с размером кнопки на экране. Палец взрослого в среднем 8–10 миллиметров в ширину. Когда вы переводите это на пиксели мобильного устройства (плотность экрана обычно 326 ppi и выше), получается примерно 44–48 px. Это не произвольная цифра — это физиология пальца в контексте мобильного взаимодействия.

Размер кнопки на мобильной версии сайта должен соответствовать размеру пальца. Если кнопка меньше 44 px, пользователь вынужден прицеливаться точнее. Маленькие кнопки требуют высочайшей точности нажатия. На практике это означает: случайного нажатия на соседние элементы, промахи при попытке выполнить целевое действие, фрустрация от ошибок.

Размер кнопки и конверсия: реальные числа

Интернет-магазин обнаружил, что конверсию на мобильных устройствах упала на 30% по сравнению с десктопом. Разобрались в причине — размер основной кнопки "Купить" на мобильном сайте был 36 px. Вокруг неё не было достаточного расстояния до других элементов интерфейса. Пользователь должен был точно нажать на кнопку, но часто попадал на соседние ссылки или иконки.

После увеличения размера кнопки с 36 px до 48 px и добавления внутренних отступов конверсию выросла на 12%. Это произошло только потому, что пользователь может теперь выполнить целевое действие без ошибок нажатия.

SaaS приложения видят похожие результаты. Одна компания увеличила размер кнопки для отправки заявки с 36 px до 48 px — взаимодействие выросло на 15%. Люди могут теперь завершить действие быстрее и без фрустрации.

Исследования показывают: при размере от 44 px ошибки нажатия падают примерно на 50%. При размере 32–36 px ошибки растут экспоненциально, потому что кликабельная область слишком мала для среднего пальца.

Почему маленькие кнопки создают проблемы

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

Дизайнер часто размещает интерактивные элементы рядом друг с другом без достаточного расстояния. На десктопе курсор достаточно точен, чтобы попасть в нужную кнопку. На мобильном — палец занимает 44 px, и если расстояние между кнопками меньше 8 px, пользователь случайно нажимает на соседнюю.

Вот частые ошибки на мобильных сайтах: - Кнопка размером 32–36 px без полей - Интерактивные элементы размещены вплотную друг к другу - Маленький текст на кнопке (12 px или меньше) — пользователь не видит, что написано - Игнорирование требований WCAG о минимальном размере сенсорного целевого объекта (44×44 px) - Недостаточные внутренние отступы, так что кликабельная область выглядит "зажатой"

На веб сайте такие ошибки видны сразу при тестировании. На десктопе кнопка 30 px работает сносно — курсор точен. На мобильном это превращается в пытку для каждого пользователя.

Стандарты доступности: WCAG и рекомендации компаний

По стандарту WCAG 2.1 Level AAA, все интерактивные элементы должны иметь размер сенсорной цели не менее 44×44 px. Это требование доступности, которое многие страны рассматривают как обязательное.

Apple установила размер интерактивных элементов 44×44 px в своих Human Interface Guidelines ещё более десяти лет назад. Google следует этому же в Material Design. Это не маркетинг крупных компаний — это консенсус, основанный на биометрии и психологии взаимодействия.

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

Примеры: когда увеличение размера кнопки дало результат

Интернет-магазин одежды провел A/B тест. При размере основной кнопки 40 px конверсию была одна. При размере 52 px — выросла на 8%. Различие только в размере и пространстве вокруг кнопки.

Приложение для доставки пищи увеличило размер кнопки "Подтвердить адрес" с 36 px до 48 px. Результат: ошибки при оформлении заказа упали на 40%. Пользователи больше не переделывают одну операцию несколько раз из-за промахов.

Финтех сервис обнаружил проблему: при переводе денег люди случайно нажимали на маленькую кнопку "Отмена" рядом с основной кнопкой. После увеличения размера всех кнопок до 48 px и добавления расстояния между ними успешное завершение операций выросло на 13%.

Как размер работает в дизайне и поведении

Размер кнопки — не эстетический выбор. Это поведенческий инструмент. Большая кнопка говорит: "вот главное действие, которое нужно выполнить". Маленькая — "это вторичное".

На мобильном устройстве пользователь должен совершить целевое действие быстро, без раздумий. Если кнопка маленькая, внимание распределяется между нажатием и остальным интерфейсом. Это ментальное трение, которое может стоить вам продаж и лояльности.

Маленькие кнопки часто содержат маленький текст. На ярком солнце, на экране с плохим контрастом, пожилой пользователь не прочитает, что написано. Размер кнопки 48 px позволяет использовать читаемый шрифт (минимум 16 px), что улучшает удобство использования сайта в реальных условиях.

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

Итог: размер кнопки — инвестиция в результат

Размер кнопки на мобильном сайте — прямая связь между дизайном и доходами бизнеса. 44–48 px — это не творческий выбор, это минимум, который работает.

Компании, которые следуют этому стандарту, видят одновременно: снижение ошибок нажатия, рост конверсии, улучшение доступности. На практике даже небольшой магазин может получить 5–15% прирост продаж только за счет правильного размера главной кнопки. Для сайта с доходом 1 млн рублей это 50–150 тысяч рублей дополнительных продаж — без увеличения трафика, без новых маркетинговых затрат.