Клиент листает сайт одной рукой: почему «Позвонить» должна быть внизу экрана, а не в шапке

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

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

Как человек держит телефон и что из этого следует

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

Второе обстоятельство — размер аппарата. Диагонали выросли, пропорции стали вытянутыми, и верхняя треть экрана у большинства моделей вне зоны уверенного касания при хвате одной рукой. Поэтому производители сами переносят важные элементы вниз: адресная строка и панель вкладок в мобильных браузерах, вкладки приложений, кнопки действий.

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

Зона большого пальца: карта экрана по стоимости касания

Разделите экран на три горизонтальные полосы. Нижняя треть — зона свободного достижения: сюда палец приходит без перехвата и без напряжения кисти. Средняя — достижимая с лёгким смещением. Верхняя треть, и особенно верхние углы, — зона перехвата: чтобы нажать там, человек должен изменить хват, а это осознанное усилие.

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

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

Почему шапка — худшее место для кнопки звонка

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

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

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

Размер и расстояние: что записано в руководствах

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

Источник	Требование	Что это значит на практике
Human Interface Guidelines, Apple	Минимальная область касания 44×44 пункта	Кнопка ниже сорока четырёх пунктов по высоте на устройствах Apple считается слишком мелкой
Material Design, Google	Цель касания не меньше 48×48 dp, отступ между целями от 8 dp	Иконка размером в свою картинку почти всегда мала: увеличивают именно область нажатия
WCAG 2.2, критерий 2.5.8, уровень AA	Размер цели не меньше 24×24 CSS-пикселя либо достаточный зазор вокруг	Формальный порог доступности; стандарт получил статус рекомендации W3C в октябре 2023 года
WCAG 2.1, критерий 2.5.5, уровень AAA	Размер цели не меньше 44×44 CSS-пикселя	Повышенный уровень, совпадает по смыслу с требованием Apple
Практика приёмки	Высота основной кнопки действия от 48 CSS-пикселей, зазор от 8	Значение, при котором промахи по соседним элементам практически исчезают

Важная тонкость: размер картинки внутри кнопки и размер области нажатия — разные вещи. Иконку трубки в двадцать четыре пикселя можно оставить, но обрамить её отступами так, чтобы кликабельная зона была не меньше сорока восьми. Проверяется это в инструментах разработчика браузера: у выбранного элемента видны итоговые размеры блока вместе с отступами.

Что кладут в нижнюю панель и в каком порядке

Закреплённая панель внизу — не место для всего меню. Это две-три цели, не больше, иначе они мелкие и человек снова промахивается. Порядок целей задаётся не вкусом, а тем, как в вашей нише принимают решение.

Тип бизнеса	Первая цель	Вторая цель	Почему так
Срочные услуги: аварийный выезд, вскрытие, ремонт техники	Позвонить	Написать в мессенджер	Решение принимается в минуты, писать некогда
Услуги с расчётом: строительство, монтаж, проектирование	Оставить заявку	Позвонить	Человеку нужно приложить фото и размеры, звонок вторичен
Медицина, салоны, сервисы по записи	Записаться	Позвонить	Запись закрывает вопрос без разговора, часть людей звонить не любит
Магазин	В корзину на карточке товара	Позвонить или чат	Основное действие — покупка, звонок нужен при вопросах по товару
Оптовые и проектные продажи	Запросить расчёт	Написать на почту	Разговор начинается после получения условий, телефон мало решает

Технически панель делают закреплённой у нижней границы окна и оставляют видимой при прокрутке. Три требования к ней: не перекрывать содержимое (нижнему блоку страницы дают внутренний отступ на высоту панели), не появляться рывком после загрузки (иначе страница дёргается и это ухудшает показатель сдвига вёрстки), не занимать больше одной пятой высоты экрана.

И один нюанс: панель должна быть видна с первого экрана, а не только после прокрутки. Человек, который зашёл на страницу и сразу понял, что попал по адресу, должен иметь возможность позвонить не читая. Что писать выше панели, чтобы он это понял, я разбирал в материале Сайт есть — заявок нет.

Безопасная зона и прыгающая высота экрана

Две технические причины, из-за которых правильно задуманная панель ломается на реальных телефонах.

Первая — безопасная зона. У аппаратов со скруглёнными углами и жестовой навигацией нижняя часть экрана занята системным индикатором, и содержимое, прижатое к границе, наполовину под ним. Решается переменными окружения: странице задают режим отображения на весь экран и добавляют нижний внутренний отступ из системной переменной безопасной зоны. Без этого кнопка визуально проваливается, а часть её площади перестаёт нажиматься.

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

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

Кто ещё занял низ экрана

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

Правило простое: в один момент времени внизу экрана живёт один элемент. Согласие показывают до всего остального и убирают сразу после нажатия. Чат сдвигают выше панели действий или прячут в саму панель отдельной целью. Предложения подписаться на мобильном лучше не показывать вообще или выносить в конец статьи как обычный блок.

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

Ссылка для звонка и что с ней делают устройства

Кнопка звонка — это обычная ссылка со схемой tel, описанной в RFC 3966. Номер в ней пишут в международном формате без пробелов, скобок и дефисов: они допустимы, но часть приложений обрабатывает их непредсказуемо. Видимая подпись при этом остаётся человеческой, с разделителями — читаемость и формат в атрибуте не связаны.

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

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

Как измерить, теряете ли вы звонки

Ощущения тут не работают, нужны цифры. Минимальный набор измерений собирается в системе аналитики за один вечер и дальше живёт сам.

Что настроить	Что покажет	Как читать результат
Цель на клик по номеру телефона	Число нажатий на кнопку и ссылку звонка	Сравнить долю от посетителей на телефонах и на компьютерах
Отдельные цели для панели и для шапки	Откуда именно нажимают	Если панель даёт кратно больше, шапка как точка входа не работает
Карта кликов и карта прокрутки	До какой части страницы доходят и куда тычут	Скопление касаний рядом с кнопкой означает промахи по размеру
Записи визитов	Реальное поведение: перехваты, возвраты наверх, промахи	Двадцати записей с телефонов хватает, чтобы увидеть повторяющийся сценарий
Разбивка по типу устройства и по ширине экрана	Где картина хуже	Узкие экраны обычно показывают самые низкие показатели
Сверка с журналом звонков	Сколько нажатий дошло до разговора	Большой разрыв означает проблему уже не в кнопке, а в приёме звонков

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

Проверка руками за двадцать минут

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

Проверка	Как делать	Признак проблемы
Достижимость	Открыть страницу услуги и нажать «Позвонить» одной рукой	Понадобился перехват аппарата или вторая рука
Наличие при прокрутке	Пролистать до конца страницы	Кнопка исчезла вместе с шапкой
Размер и зазоры	Нажать пять раз подряд быстро	Хотя бы одно нажатие ушло на соседний элемент
Безопасная зона	Посмотреть на низ экрана на аппарате с жестовой навигацией	Кнопка частично под системным индикатором
Соседи внизу	Открыть страницу как новый посетитель	Панель перекрыта чатом, баннером согласия или всплывающим окном
Клавиатура	Поставить курсор в поле формы	Панель накрыла поле ввода или поле ушло под клавиатуру
Номер в ссылке	Долгим нажатием посмотреть адрес ссылки	Номер в ссылке не совпадает с видимым
Поворот экрана	Повернуть аппарат горизонтально	Панель заняла треть экрана или улетела за границу
Медленное соединение	Включить ограничение скорости в инструментах разработчика	Панель появляется рывком через несколько секунд, страница дёргается
Инструмент проверки мобильных страниц	Прогнать адрес через проверку в панели вебмастера	Замечания к размеру элементов и к области просмотра

Когда закреплённую панель ставить не надо

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

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

Третий случай — сайт, где основная проблема не в кнопке. Если страницы не дают понять, чем вы занимаетесь, сколько стоит и почему вам можно верить, панель звонка не спасёт: человек не звонит не потому, что не дотянулся, а потому что не решил. Разбор этого уровня причин у меня есть в статье Почему нет продаж, и обычно именно с него я начинаю SEO-продвижение сайта под звонки с мобильных: сначала смысл и доверие на странице, потом удобство нажатия.

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

Коротко

• При хвате одной рукой большой палец описывает дугу, радиус которой меньше высоты современного экрана. Верхняя треть и верхний угол по стороне ведущей руки — зона перехвата, а не касания.
• Шапка проигрывает по трём причинам сразу: недостижима, уезжает при прокрутке, забита мелкими соседними целями. Телефон внутри гамбургер-меню добавляет ещё два действия.
• Опубликованные нормы размеров: 44×44 пункта у Apple, 48×48 dp и зазор от 8 dp у Google, 24×24 CSS-пикселя по критерию 2.5.8 стандарта WCAG 2.2 и 44×44 по критерию 2.5.5 уровня AAA.
• В закреплённой панели держат две-три цели, а не меню. Порядок задаётся тем, как принимают решение в нише: срочная услуга — звонок первым, расчёт — заявка первой.
• Панель ломают две технические вещи: отсутствие отступа под безопасную зону на аппаратах с жестовой навигацией и расчёт от старой единицы высоты видимой области вместо динамической.
• Внизу экрана в один момент должен жить один элемент. Чат, баннер согласия и всплывающие предложения разводят по времени, а при открытой клавиатуре панель прячут.
• Номер в ссылке со схемой tel пишут в международном формате и обязательно сверяют с видимым номером, особенно если работает подмена номеров для отслеживания источников.
• Измеряют это целями на клик по телефону отдельно для панели и для шапки, картой кликов, записями визитов и сверкой с журналом звонков — последняя показывает потери уже после нажатия.
• Панель не нужна на коротких страницах, на длинных справочных текстах и там, где клиенты пишут, а не звонят. И она не заменяет внятного предложения на странице.