Юзабилити сайта: работа с навигацией

  • Дата:31.05.2013
  • Автор: Юлия Солнцева

Друзья, и снова здравствуйте! Рады сообщить, что в нашем TurboBlog'е появился еще один гостевой пост. В этот раз своими знаниями и наблюдениями в области веб-дизайна делится уже известная нам по посту Минимализм в веб-дизайне, или «Doing more with less» — Юлия Солнцева. Читайте с удовольствием, задавайте вопросы с неподдельным любопытством и просто черпайте полезную для себя информацию из данного материала :).

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

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

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

Где я могу прочитать твою статью?
На турбосео.... точка...
Уже нашел!


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


2.


3.


Линейная структура хорошо подходит для сайтов с небольшим количеством страниц и последовательной информацией. Сайты-визитки — основные представители линейной логики. Эта схема отлично подходит для просмотра однотипной информации, например, фотографий. Здесь нет информационной иерархии, а все разделы структурно независимы.

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

Такую навигационную структуру часто можно встретить в интернет-магазинах.

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

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

Советы
Создайте понятную визуальную иерархию. Как этого достигнуть?
1. Выделяйте структурные элементы по мере их значимости.
2. Логически связанные элементы должны быть связаны визуально.
3. Элементы, которые являются частями друг друга, представляются в виде вкладок.

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

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

Чем же хороши условности? Они помогают пользователю ориентироваться в информации, даже если она очень специфическая.

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

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


Правило двух кликов мышкой
В интернете борьба идет за каждый клик мышкой, если пользователь недоволен — он уходит к конкурентам. Все важное должно находиться не дальше двух кликов мышкой. Как этого достигнуть?

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

Оставляйте «хлебные крошки». Этот простой инструмент указания пути будет держать пользователя в курсе его маршрута передвижения по вашему сайту. Особенно если у сайта сложная иерархическая структура.

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

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

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

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

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

Удалите все лишние слова из названий меню, разделов, категорий. Достоверное известно, что пользователи не читают, а лишь просматривают интернет-страницы. Постоянная спешка, в которой находится современный человек, не дает ему времени ознакомиться со всем контентом вашего сайта, к тому же посетителя не интересует вся предложенная информация. Зачем писать то, что никто не будет читать? Постоянно обновляющийся уникальный контент на страницах вашего сайта будет помогать поисковым роботам лучше ранжировать сайт и чаще его индексировать. А значит, пользователи смогут чаще вас находить.

Совет
Напишите текст и дайте его прочитать «независимому человеку», а потом попросите его пересказать прочитанное. Этот простой прием даст возможность понять, как оптимизировать текст сообщения.

Ниже приведены примеры сайтов с простой, очевидной и приятной навигацией:






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