Навигация в 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

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

У 12 STOREEZ привычная навигация в таб баре, которая не отвлекает от коллекций на главной — они в приложении главное.
У 12 STOREEZ привычная навигация в таб баре, которая не отвлекает от коллекций на главной — они в приложении главное.

Когда использовать:

  • Когда можно выделить от 3 до 5 верхнеуровневых раздела навигации, которые одинаково значимы для продукта.
  • Таб бар в iOS — главный рекомендуемый способ для верхнеуровневой навигации.

Плюсы:

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

Минусы:

  • Возможности навигации ограничены, так как свободно разместить в таб баре можно до пяти разделов.

  • В смартфонах на Android от навигации может отвлекать встроенная нижняя панель управления.
В приложении «Читай-город» дополнительные разделы навигации скрыли в последней иконке.

Как использовать:

  • В iOS таб бар может содержать любое количество вкладок, но их видимость зависит от размера и ориентации устройства. Если вкладки не влезают, последняя видимая трансформируется в раздел «Дополнительно», который содержит остальные вкладки в виде списка на отдельном экране.
  • Последнюю иконку можно использовать для дополнительных параметров навигации: профиля пользователя, программы лояльности, настроек приложения.
  • В гайдлайнах Android не рекомендуют использовать bottom navigation bar для быстрых настроек и одиночных задач, например, просмотра одного электронного письма.
  • iOS рекомендуют использовать таб бар строго для навигации и не выводить туда действия.
  • Пользователи привыкли к определенному порядку кнопок на таб баре. Первый элемент ведет на домашний экран, а их последующий порядок должен отражать логику использования.
  • Вкладка, в которой находится пользователь, должна быть активна и визуально выделена.
  • Иконки должны очевидно показывать предназначение вкладки. Проверьте считываемость иконок правилом пяти секунд: если требуется больше, чтобы понять значение иконки, она малоэффективна.
  • Можно использовать подписи под иконками.

Sidebar и Navigation Drawer

Такая навигация располагается в левом верхнем углу и традиционно скрыта за иконкой-гамбургером, но может быть обозначена любой другой иконкой и даже словом «Меню». Еще одна версия — когда вообще нет иконки и меню раскрывается с помощью горизонтального свайпа.

Amazon убрали каталог в боковое меню и мы долго не могли найти его.

Когда использовать:

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

Плюсы:

  • Позволяет разместить большое количество элементов навигации.

  • Позволяет освободить место на главном экране, чтобы пользователь полностью сосредоточился на контенте.

Минусы:

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

  • Для перехода к целевой странице требуется минимум два касания.

  • Пользователь не видит, в каком разделе он находится.

  • Является стандартом навигации только для смартфонов на Android.
В приложениях Asos все по гайдлайнам: в iOS — основная навигация через таб бар, в Android — через Navigation Drawer и табы.
В приложениях Asos все по гайдлайнам: в iOS — основная навигация через таб бар, в Android — через Navigation Drawer и табы.

Как использовать:

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

Navigation Bar и Top App Bar

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

В приложении «<span>Эконика</span>» <span>корзину разместили в навбаре — такая «хитрость» позволила оставить больше элементов навигации на виду.</span>
В приложении «Эконика» корзину разместили в навбаре — такая «хитрость» позволила оставить больше элементов навигации на виду.

Когда использовать:

  • Когда есть 1-2 элемента навигации, которые хочется оставить на виду, но они не помещаются в таб бар.

Плюсы:

  • Элемент навигации на виду.

Минусы:

  • Невозможно дотянуться большим пальцем.

Как использовать:

  • Для дополнительной навигации. Например, комбинировать с таб баром, полноэкранной.

  • Не забывать, что в iOS заголовок располагается посередине, а в Android — слева.

Полноэкранная навигация

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

Полноэкранную навигацию часто используют на странице каталога, мы сделали такую в приложении Scentbird.

Когда использовать:

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

У Glovo все главные категории заказа расположены на главной в виде ромашки. Внутренние подразделы повторяют формат. 
У Glovo все главные категории заказа расположены на главной в виде ромашки. Внутренние подразделы повторяют формат. 

Плюсы:

  • Полноэкранная навигация самая простая и последовательная.

  • Можно отображать большое количество разделов.

Минусы:

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

Жесты

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

У «Кухни на районе» большая часть навигации построена на горизонтальных свайпах.

Когда использовать:

  • Мало разделов и категорий товаров.
  • Хотите привлечь внимание к контенту.

Плюсы:

  • Жесты позволяют создавать минималистичные интерфейсы и оставить больше места на экране для контента.

Минусы:

  • Навигация остается невидимой, а значит пользователям сложнее обнаружить ее.
  • Не всем пользователям привычны жесты.

  • Если в навигации используется несколько жестов — их придется запоминать, что усложняет использование.
  • В Android при горизонтальном свайпе влево можно случайно задеть системную боковую панель навигации.
В приложении «О Молоко» мы сделали навигацию по категориям товаров с помощью горизонтального свайпа.

Как использовать:

  • Используйте визуальные подсказки, например, показывайте часть следующего экрана, контента или туториал при первом использовании.

Табы

Вид навигации, который располагается прямо под навбаром. Можно использовать в качестве дополнительной навигации на главном экране и в каталоге.

Nike сочетают полноэкранную навигацию по категориям товаров с табами для разной аудитории.
Nike сочетают полноэкранную навигацию по категориям товаров с табами для разной аудитории.

Когда использовать:

  • Чтобы сделать основные категории максимально видимыми.
  • Когда можно отделаться малым количеством категорий на главном экране.

Плюсы:

  • Табы могут использоваться со скроллом, что позволяет разместить большое количество категорий.
  • Сокращают количество касаний в навигации.

Минусы:

  • Сложно дотянуться при использовании смартфона одной рукой.

  • В Android можно использовать не больше 4 фиксированных табов.
  • Если используется скролл, часть навигации скрыта. Пользователи могут не дойти до последних категорий.
В приложении «Эконика» переход от верхнеуровневых категорий к дочерним сделали через табы и так сократили количество уровней в навигации по каталогу.  

Плавающая кнопка действия (FAB)

Плавающая кнопка действия или fab-кнопка выглядит как круглая иконка, которая парит над интерфейсом. Больше знакома пользователям Android. За Fab-кнопкой скрывается наиболее частое действие, которое выполняют пользователи. Практически не встречается в mcommerce.

Кухня на районе спрятали в Fab-кнопку главные разделы каталога

Когда использовать:

  • Fab-кнопка мотивирует на выполнение целевых действий, так считают в Google. Такая навигация предполагает ключевую функцию, которую будут использовать постоянно.

Плюсы:

  • Занимает мало места на экране.

  • Исследование Стива Джонса показало, что fab-кнопка неудобна при первом взаимодействии. Однако после успешного выполнения задачи, ее используют чаще, чем другие элементы интерфейса.
  • Хороший способ направить к целевому действию.

Минусы:

  • Может отвлекать от основного контента.

  • Может загораживать контент.

  • В fab-кнопке не используется текст, поэтому смысл иконки может быть непонятен.
  • Компонент не характерен для iOS.

Советы по использованию:

  • Используйте только одну fab-кнопку на экране, только на тех экранах, где нужно выполнить главное целевое действие.

  • При нажатии на fab-кнопку можно раскрыть список.

Asos в приложении для Android разместили в FAB-кнопке корзину — она появляется только после того, как туда добавят первый товар.
Asos в приложении для Android разместили в FAB-кнопке корзину — она появляется только после того, как туда добавят первый товар.

Поднавигация

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

Рассмотрим, какие шаблоны поднавигации позволяют быстрее попасть к нужным товарам.

Аккордеон

Так называют организацию каталога с выпадающим меню: когда подразделы раскрывают вниз. Работает, когда внутри раздела немного пунктов — обычно менее 6. В противном случае занимает слишком много места — пользователю придется долго скроллить страницу.

В приложении Sephora насчитали максимум 7 подразделов в аккордеоне

Плюсы:

  • Для доступа к подкатегориям пользователь совершает минимум действий и не ждет загрузку экрана.

Минусы:

  • Если внутри главной категории много разделов — они займут весь экран и их будет неудобно прокручивать вниз.

Особенности использования:

  • Категории и подкатегории должны быть разными по стилю, чтобы пользователи различали их.
  • Можно использовать стрелку вниз-вверх, чтобы пользователи точно понимали, как работает элемент.

Последовательная

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

Lamoda используют последовательную навигацию при переходе между разделами каталога

Плюсы:

  • Позволяет разместить большое количество подразделов.

  • При нажатии кнопки «Назад» пользователь переходит к родительской категории, а не выходит из меню как происходит с аккордеонами.

Минусы:

  • Пользователь дольше добирается до нужной категории товара.

  • Нужно ждать, когда подгрузится экран.

Особенности использования:

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

Вывод

Мы перечислили шаблоны навигации, характерные только для mcommerce. В действительности их гораздо больше. Но для любой навигации главное — соблюсти несколько правил:

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

  • Чем меньше пользователь совершит касаний до нужного раздела, тем лучше.

А что главное в навигации для вас?

1616
1 комментарий

Полезная инфа для начинающих мобильных разработчиков! Благодарю😊 

Ответить