Дизайн навигации в веб-интерфейсах

Основные принципы

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

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

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

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

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

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

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

Нажатие на лого должно вести на домашнюю страницу. Это всем привычный паттерн и не стоит его нарушать. Но что делать, если пользователь и так находится на домашней странице? Вы можете ничего не делать, и это будет правильно. (Хотя Студия Артемия Лебедева по клику на логотип на главной показывает видео-ролик.)

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

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

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

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

Публикация Telegram-канала The Design Times.

--

--

--

Cамый большой коллективный блог про дизайн на русском языке

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Илья Сидоренко

Илья Сидоренко

Развиваю продукт Tranzet. Автор книги «Дизайнер интерфейсов». Обучающие материалы: iskros.com.

More from Medium

Escapism or Innovation: an analysis of the 2022 Apple Design Awards

The Importance of UX and Design Thinking: Why Good User Experience and Design are Crucial for Your…

5 Reasons Designing Gets Harder

Frustrated designer in front of a laptop computer with a mouse, phone, and glasses on a desk.

Design Inspiration #1: war-life balance