В Интернете можно найти любую информацию: узнать длительность фильма, почитать подсказки для работы в Photoshop, проверить свежие новости. Наиболее важная часть сайта, которая помогает нам находить то что мы ищем — навигация.

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

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

1. Ясно и понятно

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

Хороший пример такой концепции — сайт Abercrombie & Fitch. Их навигация проста в понимании, ясна с первого взгляда, и пользователь легко ориентируется в ней, как только заходит на сайт.

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

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

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

2. Последовательно

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

Хороший пример последовательной навигации — сайт Bouguessa.

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

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

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

3. Кратко

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

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

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

Хороший пример краткости в навигации — сайт The Olson Kundig.

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

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

4. Плоская архитектура

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

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

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

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

Автор статьи Samella Garcia

Перевод — Дежурка

Смотрите также: