UX-исследователь — практический курс
UX-исследователь — практический курс
Начните карьеру в области UX или структурируйте свои знания с помощью уникального на рынке курса по UX-исследованию
Узнать подробнее

Советы по проектированию идеальной панели навигации

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

Но, если вы будете использовать ее неправильно, это перевернет весь интерфейс с ног на голову.

Поэтому в этой статье я дам вам несколько советов по UI / UX для проектирования более функциональной панели навигации вашего интерфейса.

Итак, без промедления приступим.

Управление пользовательским опытом
Управление пользовательским опытом
Вы научитесь анализировать и улучшать клиентский опыт, создавать продукты и предоставлять сервисы, нужные клиентам, внедрять сервисные инновации
Забронировать место

1. Всегда выделяйте текущую вкладку

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

Для лучшей индикации текущей вкладки вы можете использовать цвета и микровзаимодействия.

Советы по проектированию идеальной панели навигации

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

Советы по проектированию идеальной панели навигации

Вы можете указать текущую вкладку, используя разные стили, как в примере от Zsolt hutvagner на изображении выше.

Советы по проектированию идеальной панели навигации

Для веб-приложений также необходимо указать активную вкладку для лучшего понимания пользователем.

2. Добавьте немного анимации

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

Советы по проектированию идеальной панели навигации

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

Советы по проектированию идеальной панели навигации

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

3. Не используйте слишком много анимации

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

Советы по проектированию идеальной панели навигации

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

Советы по проектированию идеальной панели навигации

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

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

4. Осторожно используйте текст с иконками

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

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

Я всегда рекомендую пробовать более короткий текст и всегда выбирать иконки, которые намного легче распознать. Для улучшения доступности попробуйте использовать текст с иконками.

Советы по проектированию идеальной панели навигации

Вы можете использовать текст и иконку с таким стилем, поскольку он позволяет пользователю видеть текст и значок одновременно.

Советы по проектированию идеальной панели навигации

Давайте рассмотрим реальный пример текста с иконками из приложения Spotify. Spotify использует простые иконки с коротким текстом под ними, это помогает пользователю легко понять навигацию.

5. Чем меньше, тем лучше

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

Остальные параметры можно скрыть в меню навигации или настройках профиля.

Советы по проектированию идеальной панели навигации

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

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

Старайтесь использовать, как можно меньше иконок и вариантов. Рекомендуется использовать максимум 5 вариантов.

Советы по проектированию идеальной панели навигации

Ряд дизайнеров любит концепцию, которую вы можете видеть на картинке выше. Она называется вложенные параметры (nested options), но следует учитывать, что такой подход может излишне усложнить панель навигации.

Сохраняйте простоту и используйте меньше иконок и текста, потому что чем меньше, тем лучше.

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

Отдельное спасибо Junio Serroni и Gav Grayston за советы.

Спасибо за прочтение.

guest
0 Комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
Похожие статьи
Total
5
Share