📱 Кнопки на мобильном сайте: почему размер имеет значение
На компьютере пользователь управляет точным курсором. На смартфоне — пальцем, который закрывает часть экрана и не всегда попадает в нужную область.
Поэтому даже визуально аккуратная кнопка может оказаться неудобной. Особенно когда человек держит телефон одной рукой или использует сайт на ходу.
📏 Какой размер кнопки считать удобным?
В рекомендациях WCAG 2.2 минимальный размер области нажатия для большинства интерактивных элементов — 24×24 CSS-пикселя. При этом существуют исключения, связанные с расстоянием между элементами.
Но для комфортного мобильного интерфейса часто выбирают более крупные размеры:
• 44×44 px — распространённый ориентир для удобного нажатия.
• 48×48 dp — рекомендация Material Design для сенсорных областей.
• 8–12 px — практический ориентир для расстояния между соседними кнопками.
Важно: размер видимой кнопки и её кликабельная область могут отличаться.
🎨 Контраст тоже влияет на удобство
Представим страницу оформления заказа. Кнопка «Оплатить» имеет светло-серый фон и почти сливается с поверхностью страницы.
Даже если её размер достаточный, пользователю сложнее быстро определить, куда нажимать.
Для интерфейсных элементов WCAG рекомендует контраст не менее 3:1 относительно соседних цветов. Для обычного текста внутри кнопки — не менее 4,5:1.
Практический пример: вместо маленькой кнопки высотой 28 px можно использовать элемент высотой 48 px с достаточными внутренними отступами и контрастным фоном.
В мобильном интерфейсе удобство определяется не только внешним видом кнопки, но и тем, насколько легко человек может попасть в неё с первого касания.
6 ноября 2026 г. 3
