Меню внизу мобильного сайта: в каких сценариях оно помогает посетителю

Поможет ли нижняя панель купить быстрее?

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

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

Раздел или главное действие

Кнопка покупки и ссылка на корзину выполняют разные задачи. Первая меняет состав заказа, вторая открывает уже выбранные товары. Если обе выглядят одинаково и стоят рядом без пояснения, посетитель может перейти в корзину, ожидая, что текущий товар уже добавлен.

Для магазина я бы оставил нижнюю панель средством перемещения, а добавление товара разместил рядом с его ценой и количеством. Так человек видит, что именно покупает, до нажатия. После добавления понятный ответ показывает изменение корзины. Если действие закрепляют отдельно при прокрутке, его не стоит маскировать под очередной раздел меню.

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

Как сравнить два варианта

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

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

Панель выдерживает только понятные разделы

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

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

Что включать в рабочий список

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

Критерий 3.2.3 WCAG посвящён постоянству относительного порядка повторяющейся навигации. Для магазина это означает полезный принцип: не переставлять знакомые пункты произвольно при переходе от каталога к карточке, чтобы клиент заново не искал корзину.

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

Значок дополняет слово

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

Что панель закрывает на маленьком экране?

Постоянный блок уменьшает доступную высоту страницы. Если он перекрывает цену, отправку формы или пояснение ошибки, удобный переход оборачивается потерей основного действия.

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

Касание и свободное место

В критерии 2.5.8 WCAG минимальная область цели указателя составляет 24 × 24 CSS-пикселя с описанными исключениями. Это нижняя граница критерия, а не универсальный размер хорошей панели. Для основных действий полезно больше пространства. Небольшой рисунок может находиться внутри просторной кнопки, поэтому специалист измеряет всю активную область и показывает её границы, чтобы заказчик понимал, какое место действительно реагирует на касание пальцем на выбранном экране телефона.

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

Для узкой страницы ориентир даёт критерий 1.4.10 WCAG: перестроение содержания оценивают на ширине, эквивалентной 320 CSS-пикселям, с исключениями для отдельных видов материалов. Панель навигации тоже участвует в перестроении. Она не может требовать бокового движения всей страницы ради скрытого пункта.

Клавиатура меняет доступную высоту

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

Отдельный ориентир — критерий 2.4.11 WCAG о фокусе, который не скрыт целиком содержимым автора. Закреплённая панель попадает в этот круг вопросов, когда закрывает выбранное с клавиатуры поле или ссылку. Поэтому мобильный вид стоит испытать и последовательным движением по элементам.

Фокус показывает место действия. Критерий 2.4.7 в WCAG требует его видимости, а для панели это повод сохранить различимую отметку при переходе между пунктами и не прятать её за выбранным цветом текущего раздела.

Опишите поведение панели в состоянии заказа

Решение для первой страницы ещё не описывает магазин. В задании нужны состояния, в которых навигация встречается с корзиной, поиском и вводом данных.

Начать можно с такой формулировки: «Панель ведёт к основным разделам мобильного магазина. Названия видны рядом со значками. Текущий раздел отмечается. На экране заказа панель не закрывает поля и итоговое действие». Это образец для согласования. Дальше к нему добавляют список пунктов и содержание счётчика.

Приёмка через одну покупку

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

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

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

Что останется в согласованном решении

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

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