Смартфон – маленький экран и палец вместо курсора. Человек листает сайт на ходу и легко промахивается мимо мелких кнопок. Собрали правила для удобной навигации.
Шапка сайта в мобильной версии
Разместите здесь:
- Кликабельный логотип со ссылкой на главную.
- Меню – при малом числе разделов сразу, иначе гамбургер.
- Поиск, хотя бы в виде иконки.
- Телефон или кнопку связи.
- Корзину, если есть каталог.
Хватит 4-5 элементов. Закрепите шапку при прокрутке. Зона касания элемента – от 44×44 пикселей, отступы – от 8 пикселей.
Мобильное меню: гамбургер, таббар, FAB
Классическое меню подходит, если разделов немного – 5-7 ссылок. Можно добавить иконки.
Гамбургер-меню прячет разделы и освобождает место в шапке. Иконку ставьте слева, ссылки внутри располагайте вертикально и группируйте по смыслу.
Таббар – панель внизу экрана с 3-5 главными разделами. Палец руки тянется вниз, поэтому это удобное решение.
Отдельно – кнопка быстрого действия (FAB). Круглая кнопка поверх контента, обычно справа внизу, для одного действия, например чата с поддержкой. Диаметр от 40 пикселей, при открытой клавиатуре скрывается. Если есть таббар, отдельная FAB не нужна.
Хлебные крошки и фильтры для мобильных
Хлебные крошки показывают путь от главной до текущего раздела. На телефоне цепочка растягивается на несколько строк, поэтому ограничьте её тремя уровнями. Если больше — показывайте два последних и ссылку «Назад». Для небольшого сайта крошки не нужны.
Фильтры и сортировка важны в каталоге – на маленьком экране видно мало товаров. Разместите кнопки над списком товаров, используйте выдвижные панели или отдельный экран. Выбранные фильтры показывайте компактно.
Подвал сайта и адаптация контента
В подвале – контакты, ссылки на разделы, юридические данные, соцсети. Если шапка закреплена при прокрутке, дублировать меню в подвале необязательно.
Адаптируйте контент под маленький экран: короткие абзацы, читаемый шрифт, простые таблицы. Не показывайте баннеры сразу после загрузки. Следите за скоростью – если сайт грузится дольше 3 секунд, половина посетителей уйдёт.
Как улучшить навигацию сайта
Понятная навигация помогает быстро найти нужный раздел и завершить покупку. Начните с проверки текущей навигации и постепенно внедряйте изменения.
Если хотите сделать всё правильно – обращайтесь в VADSTUDIO. Проведём аудит, продумаем структуру сайта и оформим удобную мобильную версию. Напишите нам – возьмём всё на себя.