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

Почему нижняя навигация так важна?

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

Область однопальцевого взаимодействия с экраном сматфона

Область однопальцевого взаимодействия с экраном сматфона. Источник: uxmatters

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

Панель вкладок

Многие приложения следуют этому правилу и используют навигацию снизу (например, панель вкладок) для размещения самых важных опций приложения. Ключевой функционал в Facebook доступен в одно касание пальцем, причем можно быстро переключаться между функциями.

Нижняя панель вкладок Facebook для iOS.
Нижняя панель вкладок Facebook для iOS.

3 критически важных момента для дизайна нижней навигации

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

Хороший дизайн нижней навигации всегда следует трем правилам.

1. Показывть только самые важные пункты

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

Показывает только самые важные пункты

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

нижняя навигация

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

Избегайте прокручиваемого контента

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

Избегайте прокручиваемого контента

«С глаз долой — из сердца вон» — проблема в приложении Rookie Cam под iOS.

2. Показывать текущее положение

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

Пользователи должны знать, как из точки, А перейти в точку Б, просто взглянув на экран, без каких-либо усилий. Вы должны использовать визуальные подсказки (иконки, надписи, цвета), чтобы навигация не требовала пояснений.

Иконки

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

Bloom.fm для Android
Предыдущая версия приложения Bloom. fm для Android. Очень сложно понять текущее местоположение пользователя.

Цвет

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

Иконки в разных цветах делают из вашего приложения новогоднюю елку
Слева: Иконки в разных цветах делают из вашего приложения новогоднюю елку. Справа: используйте вместо радуги только один цвет для выделения активного пункта.

Следуйте простому правилу — оттеняйте текущее действие в нижней навигации (включая иконку и любой текст) главным цветом приложения.

Нижнее меню в Twitter под iOS
Нижнее меню в Twitter под iOS. Активен экран сообщений.

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

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

Текстовые метки

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

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

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

Размер области касания

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

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

Фиксированная панель нижней навигации на мобильном устройстве
Фиксированная панель нижней навигации на мобильном устройстве. Измеряется в независимых от плотности пикселях (dp).Источник: Material Design.

Бейджи на вкладке

Можно отображать бейдж на иконке панели вкладок для индикации новой информации, связанной с текущим экраном или режимом.

Бейджи на вкладке
Избегайте навязчивости при использовании бейджей в нижней навигации.

3. Навигация должна быть очевидной

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

Поведение

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

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

1-HTJII_nZOV_9TzbpvIm0Gg
Панель инструментов для iOS.

Стремитесь к постоянству

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

Не удаляйте иконку, когда ее функция недоступна. Если вы удалите иконку в одних случаях, и оставите для других, интерфейс приложения станет нестабильным и непредсказуемым. Лучше всего убедиться в том, что все иконки активны, но пояснить, почему контент конкретной вкладки недоступен. Например, если у пользователя нет файлов оффлайн, вкладка Offline в приложении Dropbox отображает экран, который поясняет, как их завести. Эта опция называется пустым состоянием.
Экран пустого состояния в Dropbox.
Экран пустого состояния в Dropbox.

Прячьте ее

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

Нижняя панель навигации может появляться и исчезать динамически во время скролла
Нижняя панель навигации может появляться и исчезать динамически во время скролла.

Визуальные аспекты

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

Анимация плавного затухания

Анимация плавного затухания. Источник: Material Design.

Выводы

Нижняя навигация должна быть:

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

Заключение

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

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