Навигация в mcommerce-приложениях: шаблоны и подводные камни
Мы в Heads and Hands работали с 10 из топ-50 ecommerce-компаний в России, поэтому знаем, как распутать даже самую неочевидную навигацию и создать идеальный опыт для мобильных пользователей. В статье рассказываем, какие шаблоны навигации и для каких задач используем.
Вы заходите в приложение и не можете ничего найти. Каталог спрятан в боковую панель, а чтобы добраться до нужной категории, придется побывать на 5 экранах. Часто ли вы будете пользоваться таким приложением?
Norman Nielsen Group утверждают, что мобильные пользователи чаще используют навигацию, а пользователи компьютеров — поиск. Навигация в приложении важна по следующим причинам:
- пользователи не всегда могут сформировать хороший запрос;
- они точно не знают, что нужно искать;
- создание и ввод запроса требуют больших усилий, чем нажатие на элемент навигации.
Сделать удобную навигацию в приложении сложнее, чем на сайте: из-за меньшего размера экрана она должна быть компактнее, чтобы не отвлекать от основного контента.
Но не нужно придумывать с нуля, как сделать навигацию понятной для пользователя. Дизайнеры, специализирующиеся на мобильных интерфейсах, используют шаблоны навигации. Они предсказуемы, что означает максимальное удобство использования.
Разберем, какие задачи решает каждый шаблон навигации в mcommerce-приложениях на примерах своих работ и не только.
Мы также писали про другие элементы в mcommerce-приложениях — карточку товара, чекаут и фичи, которые выделят среди конкурентов.
В статье мы приводим два названия элементов интерфейса: первое по Human Interface Guidelines (iOS), второе по Material Design (Android).
Tab Bar и Bottom Navigation Bar
Нижняя панель с иконками, при нажатии на которые пользователь переходит в соответствующий верхнеуровневых раздел приложения.
Когда использовать:
- Когда можно выделить от 3 до 5 верхнеуровневых раздела навигации, которые одинаково значимы для продукта.
- Таб бар в iOS — главный рекомендуемый способ для верхнеуровневой навигации.
Плюсы:
- Сообщает пользователю, в каком разделе он находится.
- Элементы навигации доступны из любого раздела и всегда на виду.
- Такую навигацию легко использовать одной рукой.
Минусы:
Возможности навигации ограничены, так как свободно разместить в таб баре можно до пяти разделов.
- В смартфонах на Android от навигации может отвлекать встроенная нижняя панель управления.
Как использовать:
- В iOS таб бар может содержать любое количество вкладок, но их видимость зависит от размера и ориентации устройства. Если вкладки не влезают, последняя видимая трансформируется в раздел «Дополнительно», который содержит остальные вкладки в виде списка на отдельном экране.
- Последнюю иконку можно использовать для дополнительных параметров навигации: профиля пользователя, программы лояльности, настроек приложения.
- В гайдлайнах Android не рекомендуют использовать bottom navigation bar для быстрых настроек и одиночных задач, например, просмотра одного электронного письма.
- iOS рекомендуют использовать таб бар строго для навигации и не выводить туда действия.
- Пользователи привыкли к определенному порядку кнопок на таб баре. Первый элемент ведет на домашний экран, а их последующий порядок должен отражать логику использования.
- Вкладка, в которой находится пользователь, должна быть активна и визуально выделена.
- Иконки должны очевидно показывать предназначение вкладки. Проверьте считываемость иконок правилом пяти секунд: если требуется больше, чтобы понять значение иконки, она малоэффективна.
- Можно использовать подписи под иконками.
Sidebar и Navigation Drawer
Такая навигация располагается в левом верхнем углу и традиционно скрыта за иконкой-гамбургером, но может быть обозначена любой другой иконкой и даже словом «Меню». Еще одна версия — когда вообще нет иконки и меню раскрывается с помощью горизонтального свайпа.
Когда использовать:
Когда нужно спрятать большое количество дополнительных разделов меню, которые используются редко.
Плюсы:
Позволяет разместить большое количество элементов навигации.
Позволяет освободить место на главном экране, чтобы пользователь полностью сосредоточился на контенте.
Минусы:
Скрытая навигация предоставляет худший пользовательский опыт, чем видимая — пользователи больше времени тратят на поиск разделов.
Для перехода к целевой странице требуется минимум два касания.
Пользователь не видит, в каком разделе он находится.
- Является стандартом навигации только для смартфонов на Android.
Как использовать:
- Аналитики из Norman Nielsen Group не рекомендуют использовать боковое меню, а распутать навигацию, выделить главные пункты меню и сделать их видимыми.
Боковое меню допустимо, если основной контент расположен на главном экране, а в гамбургер можно спрятать разделы, которые используются очень редко, например, настройки приложения и обращения в поддержку.
Navigation Bar и Top App Bar
На верхней панели приложения располагается иконка-гамбургер, но там же могут разместиться и другие элементы навигации, которым не нашлось места в таб баре.
Когда использовать:
- Когда есть 1-2 элемента навигации, которые хочется оставить на виду, но они не помещаются в таб бар.
Плюсы:
- Элемент навигации на виду.
Минусы:
- Невозможно дотянуться большим пальцем.
Как использовать:
Для дополнительной навигации. Например, комбинировать с таб баром, полноэкранной.
- Не забывать, что в iOS заголовок располагается посередине, а в Android — слева.
Полноэкранная навигация
Такой шаблон предполагает, что пространство экрана отводится под навигацию. Используется как на главном экране, так и на внутренних страницах.
Когда использовать:
Шаблон хорошо работает, когда за сессию пользователь использует одно направление навигации: перемещается с обзорной страницы на конкретный раздел.
Плюсы:
Полноэкранная навигация самая простая и последовательная.
Можно отображать большое количество разделов.
Минусы:
- Кроме навигации нежелательно показывать другой контент, так как пользователи могут путаться.
Жесты
Мы уже упомянули один способ использования жестовой навигации — когда боковое меню открывается по горизонтальному свайпу. Но есть и другие.
Когда использовать:
- Мало разделов и категорий товаров.
- Хотите привлечь внимание к контенту.
Плюсы:
Жесты позволяют создавать минималистичные интерфейсы и оставить больше места на экране для контента.
Минусы:
- Навигация остается невидимой, а значит пользователям сложнее обнаружить ее.
Не всем пользователям привычны жесты.
- Если в навигации используется несколько жестов — их придется запоминать, что усложняет использование.
- В Android при горизонтальном свайпе влево можно случайно задеть системную боковую панель навигации.
Как использовать:
- Используйте визуальные подсказки, например, показывайте часть следующего экрана, контента или туториал при первом использовании.
Табы
Вид навигации, который располагается прямо под навбаром. Можно использовать в качестве дополнительной навигации на главном экране и в каталоге.
Когда использовать:
- Чтобы сделать основные категории максимально видимыми.
- Когда можно отделаться малым количеством категорий на главном экране.
Плюсы:
- Табы могут использоваться со скроллом, что позволяет разместить большое количество категорий.
- Сокращают количество касаний в навигации.
Минусы:
Сложно дотянуться при использовании смартфона одной рукой.
- В Android можно использовать не больше 4 фиксированных табов.
- Если используется скролл, часть навигации скрыта. Пользователи могут не дойти до последних категорий.
Плавающая кнопка действия (FAB)
Плавающая кнопка действия или fab-кнопка выглядит как круглая иконка, которая парит над интерфейсом. Больше знакома пользователям Android. За Fab-кнопкой скрывается наиболее частое действие, которое выполняют пользователи. Практически не встречается в mcommerce.
Когда использовать:
Fab-кнопка мотивирует на выполнение целевых действий, так считают в Google. Такая навигация предполагает ключевую функцию, которую будут использовать постоянно.
Плюсы:
Занимает мало места на экране.
- Исследование Стива Джонса показало, что fab-кнопка неудобна при первом взаимодействии. Однако после успешного выполнения задачи, ее используют чаще, чем другие элементы интерфейса.
- Хороший способ направить к целевому действию.
Минусы:
Может отвлекать от основного контента.
Может загораживать контент.
- В fab-кнопке не используется текст, поэтому смысл иконки может быть непонятен.
- Компонент не характерен для iOS.
Советы по использованию:
Используйте только одну fab-кнопку на экране, только на тех экранах, где нужно выполнить главное целевое действие.
При нажатии на fab-кнопку можно раскрыть список.
Поднавигация
Поднавигация позволяет перейти к категориям нижнего уровня. Главная сложность с ней в приложениях — небольшой размер экрана, который не позволяет легко разместить множество подкатегорий.
Рассмотрим, какие шаблоны поднавигации позволяют быстрее попасть к нужным товарам.
Аккордеон
Так называют организацию каталога с выпадающим меню: когда подразделы раскрывают вниз. Работает, когда внутри раздела немного пунктов — обычно менее 6. В противном случае занимает слишком много места — пользователю придется долго скроллить страницу.
Плюсы:
- Для доступа к подкатегориям пользователь совершает минимум действий и не ждет загрузку экрана.
Минусы:
Если внутри главной категории много разделов — они займут весь экран и их будет неудобно прокручивать вниз.
Особенности использования:
- Категории и подкатегории должны быть разными по стилю, чтобы пользователи различали их.
- Можно использовать стрелку вниз-вверх, чтобы пользователи точно понимали, как работает элемент.
Последовательная
Последовательный переход из верхнеуровневых разделов к последующим происходит на новой странице и с возвратом через стрелку назад.
Плюсы:
Позволяет разместить большое количество подразделов.
При нажатии кнопки «Назад» пользователь переходит к родительской категории, а не выходит из меню как происходит с аккордеонами.
Минусы:
Пользователь дольше добирается до нужной категории товара.
Нужно ждать, когда подгрузится экран.
Особенности использования:
- Подходит для меню с небольшой вложенностью.
- Можно использовать стрелку вправо для пунктов меню, чтобы пользователь понимал, куда он отправится дальше.
Вывод
Мы перечислили шаблоны навигации, характерные только для mcommerce. В действительности их гораздо больше. Но для любой навигации главное — соблюсти несколько правил:
- Навигация должна быть видимой — не прячьте основное.
До главных разделов можно дотянуться большим пальцем одной руки.
- Чем меньше пользователь совершит касаний до нужного раздела, тем лучше.
А что главное в навигации для вас?
Полезная инфа для начинающих мобильных разработчиков! Благодарю😊