Зона большого пальца — почему важные кнопки должны быть внизу экрана

Стивен Хубер в 2013 году замерил, как люди держат телефоны: 49% — одной рукой, 36% — две руки, держат одной/печатают другой, 15% — двумя руками. Из тех, кто одной рукой, 67% — правши, 33% — левши. С тех пор экраны выросли с 4 до 6.7 дюймов, телефон в одной руке стал нормой. Эргономика только ухудшилась.

Карта досягаемости

Если разделить экран на три зоны:

• Зелёная (легко) — нижние 35-40% экрана, ближе к большому пальцу. Палец сюда дотягивается без перехвата, без напряжения, точные клики.
• Жёлтая (средне) — середина экрана. Можно достать, но менее точно, иногда с лёгким перехватом.
• Красная (трудно) — верхние 25% экрана. Большой палец сюда не достаёт без перехвата телефона. На iPhone 14 Pro Max / Galaxy S24 Ultra — практически невозможно одной рукой.

На последних флагманах 6.7-7 дюймов красная зона выросла. На iPad Mini и складных Samsung/Honor — концепт зоны вообще ломается, два больших пальца тянутся с краёв.

Где обычно сидят критичные элементы — и где должны

Главное меню сайта (hamburger) — традиционно вверху справа. Это красная зона на 7-дюймовом телефоне. Пользователь тянется, перехватывает, иногда роняет телефон. Что делать: либо переносить меню вниз (как в Twitter/X, Threads, Telegram), либо оставлять hamburger вверху, но критические действия дублировать снизу через bottom tab bar.

Кнопка "Назад" в браузере — наверху слева. Это компромисс самой ОС, но Safari в iOS уже дублирует жесты свайпа справа от края, Chrome на Android тоже. Веб-разработчику тут влиять нечем, но в SPA-навигации внутреннюю кнопку "Назад" имеет смысл ставить внизу.

Кнопка "Отправить форму" — снизу. Это уже стандарт. Но если форма короткая (3 поля) и помещается в верхней половине экрана — кнопка часто оказывается в середине, а не у низа. Нужно поднимать форму вверх и оставлять CTA в зелёной зоне.

Sticky-CTA "Заказать/Купить" — внизу с safe-area. Это правильно. Внизу зеленая зона + visible always. Но не надо перекрывать всё, кнопка 56-72 пикселя по высоте максимум.

Tab bar — снизу. Apple HIG и Material Design рекомендуют 4-5 главных разделов внизу. Это золото эргономики. Любой коммерческий сайт с несколькими большими разделами должен это копировать.

Поисковая строка — традиционно сверху. Альтернатива — снизу (как Safari iOS 15+). Spotify и многие финтех-приложения тоже опускают поиск вниз. На сайте можно делать sticky bottom-bar с поиском для каталогов.

Тестирование эргономики

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

В DevTools нет автоматического инструмента для зон, но есть набор скринов от Figma-сообщества — накладываются как слой поверх дизайна. Реально достаточно правила трёх зон без миллиметра.

Hotjar/Plerdy показывают heatmap кликов. Если на странице есть кнопка в красной зоне и она собирает на 30-50% меньше кликов, чем такая же по визуальной важности кнопка в зелёной — это эргономический симптом, не дизайнерский.

Частые антипаттерны

Закрывающий крестик модалки в верхнем правом углу. Стандарт десктопа, копированный на мобилу без редизайна. На 6.7-дюймовом телефоне крестик 24×24 пикселя в верхнем правом — это испытание. Решения: 1) закрывать свайпом вниз (drag-to-dismiss); 2) большая кнопка "Закрыть" снизу; 3) tap-to-dismiss по фону.

Большие модалки с кнопками внутри красной зоны. Модалка "Принять cookie", занимает 70% экрана, кнопки "Принять" и "Настроить" вверху по центру. Бесит. Кнопки CTA → вниз, по полной ширине.

Гамбургер-меню с шапкой 80-100 пикселей. Заняли красную зону + дёрнули экран вниз. Решение — компактная шапка, скрытие при скролле.

Карусели с навигационными стрелками по бокам сверху. Никто не пользуется — все свайпают. Стрелки в красной зоне в принципе бесполезны.

Длинные раскрывающиеся списки (select) с тапом по каждому пункту вверху. Лучше нативный <select> — он открывает системный picker внизу экрана.

Правила для коммерческого сайта в 2026

1. Главный CTA — внизу экрана, sticky, с safe-area-inset-bottom.
2. Если есть 3+ ключевых раздела, используйте bottom tab bar.
3. Кнопки "Купить", "Заказать", "Записаться" — всегда в зелёной зоне.
4. Модалки закрываются: свайпом вниз + кнопкой снизу, не крестиком вверху.
5. Длинная форма — последнее поле и submit максимально близко к зелёной зоне.
6. Шапка сайта не выше 56 пикселей, скрывается на скролле.
7. Hamburger-меню допустимо вверху, но критичные действия дублируются внизу.

Эффект для бизнеса

На клиентских проектах — переезд главного CTA из шапки в sticky-bottom давал +12-25% к конверсии лида на мобильных. Это десятки заявок в месяц на ровном месте. Цена доработки — 4-8 часов разработки и А/B-тест 2 недели. Подключите нас — посмотрим на ваши заявки на мобиле и куда перенести важные элементы, чтобы пользователю не приходилось напрягать руку или перехватывать телефон.