Как сделать правильную навигацию по сайту?

О навигации, юзабилити и чуть-чуть о seo.
5 минут7290

Достаточно часто приходится отвечать на вопрос «Почему сайт не приносит ожидаемого результата?» Внешние признаки: плохо продвигается в поиске, пользователь очень быстро уходит, есть просмотры, но нет покупок и т.д. (нужное добавить).

Самый простой ответ пользователя никто не хочет признавать: сайт неудобный. Причин тому может быть много. Дизайн, бизнес-логика, размещение, продвижение достойны рассмотрения в отдельном материале. Сегодня немного поговорим об обеспечении удобства для потенциального пользователя с точки зрения именно пользователя. Рассмотрим узкую тему «навигация по сайту».

Панель навигации

Или более привычное на слух меню должно быть на каждом ресурсе. Оно может быть любым в дизайнерском исполнении, но главное требование – оно должно быть понятно пользователю и предоставлять информацию по категориям. Избыточность здесь будет вредить. Меня, например, всегда ставила в тупик логика меню в ранних телефонах Нокиа. В итоге так я их полностью и не полюбила. Так же дело обстоит с сайтами и продуктами. Логика меню должна быть понятна пользователю. Именно это требование важно в первую очередь. Есть правило: нужная страница должна быть достигнута в 3 клика. И логичное меню этому способствует. Следует избегать большого количества вложенных пунктов. Меню более чем в 3 уровня уже затрудняет навигацию сайта.

«Хлебные крошки»

В больших сайтах, особенно с большим количеством наименований товара или контента breadcrumbs необходим. Почему: пользователь любит понимать, где он находится, особенно когда он впервые попал на ресурс. Если человек заблудился в трёх соснах, ему становится некомфортно и непонятно, и сайт подсознательно регистрируется как неудобный или сознательно покидается.

Хорошо зарекомендовало себя выделение отдельным цветом текущего пункта меню или каталога. Это даёт понимание, как в это место можно попасть снова. Кстати, Хлебные крошки дают возможность частично заменить функционал меню, (возвращаться от продукта в категорию, например) и не использовать в меню кнопку «главная». В отличие от меню с крупными кнопками «крошки» могут быть мелкими и в длинную строку – это, как правило, воспринимается благожелательно – понимание, где находишься – важнее.

Логотип

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

Заголовки страниц

Не стоит забывать про понятные и краткие заголовки страниц, взглянув на которые должно быть понятно, что здесь такое или о чём пойдёт речь. Обратите внимание на сочетание заголовка страницы и алиаса. В большинстве систем алиас создаётся автоматически из заголовка и может стать слишком длинным. Контролируем или правим вручную – это себя оправдает. Некоторым нравятся алиасы на кириллице. На данном этапе  это – зло. Даже если посетители ресурса все русскоязычные. Поисковики, браузеры и прочее ПО не очень дружат с кириллицей. Кроме того нужно внимательно следить за корректной кодировкой.

Форма входа

Если используется регистрация на сайте, то навигация на сайте в виде формы входа в личный кабинет должна быть понятной и удобно расположенной. Должно быть четко видно, выполнен ли вход на сайт в текущий момент (отображение аватара, логина, ника и т.п.) В некоторых случаях форму регистрации нужно именно «прятать». На небольших проектах роботы и пользователи, которые наивно думают, что регистрация обязательна,  могут доставить массу проблем. Отметим, что порядок регистрации относится к бизнес-логике и рассматривается отдельно.

Favicon

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

Поиск

Наличие функции поиска. Весьма необходимая навигация на сайтах интернет-магазинов или ресурсов с большим количеством контента. Желательно иметь удобное окно для поиска на каждой странице. В большинстве случаев следует ограничиться поиском по сайту и отключить функцию поиска во всем интернете – не подталкивайте посетителя уйти…

Поиск разумно дополнить функциями фильтрации и поиска по архиву (если архив используется на сайте). Конкретное решение зависит от бизнес-логики. К этой же части можно отнести разные «вкусняшки» вроде поиска по календарю, выборки товаров по ценам или поиск по метатегам. На больших проектах оправдывает себя расширенный поиск (фильтрация) по многим параметрам. Только не тегами! Пользователю нужны простые галочки (радиокнопки). И крупная кнопка «ИСКАТЬ»!

Навигация в физическом мире

Если организация или магазин находятся и в реальном физическом мире или имеют в нём какое-то подразделение (например, склад выдачи продукции), то:

  • Должен присутствовать функционал по выбору города/региона, если представительства есть в разных населенных пунктах,
  • Время работы организации или время доступности заказа товаров и услуг.
  • Перечень способов связи: телефон, e-mail, форма обратной связи, skype, заказ обратного звонка и т.п. Не стоит ограничиваться только телефоном, поскольку тарифы на звонки совершенно разные, и кто-то не захочет тратить деньги на звонок. Набирают популярность формы «Он-лайн-консультант» и «Заказать обратный звонок». Но если эти формы не слишком навязчивы.
  • Карта проезда с указанием точного адреса, маршрута на авто, на общественном транспорте и пешеходным маршрутом. Признаком хорошего тона является активная встроенная карта от одного из сервисов, отметка места на «народной карте», координаты для навигатора, релевантный адрес или гео-координаты (чтобы не искать), возможность проложить и распечатать маршрут.

И как обещано, совсем чуть-чуть о seo.  Сделать правильную навигацию на сайте позволит грамотный выбор домена для ресурса. Название samieluchshieyuristivgorode.ru может и отражает смысл сайта о хороших юристах, но попробуйте это продиктовать по телефону голосом или ввести вручную с визитки. К тому же такое название заставит икнуть (и не раз) не только seo-шника.

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

Ресурс или продукт должен быть в первую очередь удобен конечному пользователю, а не демонстрировать возможности разработчика: для этого есть портфолио и работы «на показ».

 

Веб-сайты для людей: профессия «Веб-разработчик».

дизайнuxui-designнавигация на сайтекак сделать навигациюосновные элементы навигации
Нашли ошибку в тексте? Напишите нам.
Спасибо,
что читаете наш блог!