Веб-дизайн - Навигация

 Навигация

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

• Где я нахожусь?
• Где я уже побывал?
• Куда я могу пойти?

Где я?

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

Текущее местонахождение пользователя должно быть показано на двух уровнях:

• относительно всего Интернета в целом
• относительно структуры сайта

Вы должны идентифицировать ваш сайт на каждой его странице, потому что все они входят в сообщество Интернет. С точки зрения пользователя, все сайты одинаковы; они используют технологию интерактивности, они загружаются (медленно) из Интернета и имеют приблизительно одинаковое строение. Эти сходства на самом деле хороши тем, что они позволяют людям переносить свои знания с одного сайта на другой. Мои исследования показали, что пользователи часто жалуются на сайты, в которых задействованы навигационные интерфейсы, отличные от представленных на большинстве веб-узлов.
Интернет в целом доминирует в опыте, потому что пользователи имеют тенденцию просматривать не больше 4-5 страниц на сайте за один раз. И проблема состоит в том, что пользователи не узнают, на каком сайте они находятся, до тех пор пока вы не скажете им об этом. Таким образом, правило номер один — это помещать логотип (или другой идентификатор сайта) на каждой странице. Логотип должен иметь постоянное местоположение (желательно в левом верхнем углу, если язык сайта предполагает чтение слева направо) и должен быть организован как ссылка на первую страницу.

Местоположение посетителя на сайте обычно указывается следующим образом: изображается структура сайта и выделяется тот сектор, в котором расположена текущая страница. Также очень важно иметь понятный заголовок страницы, представляющий ее имя или основное содержание. Наконец, название страницы в HTML-заголовке должно быть значимым и индивидуальным для каждой страницы, чтобы пользователи без труда могли обнаружить их в своем списке закладок.

Где я был?

В силу обезличенности стандартной веб-технологии сайту довольно сложно ответить на вопрос; «Где я уже побывал?», потому что сайт не знает этого, если не использует механизм записи в cookie или другие способы слежения за пользователем. К счастью, навигационные механизмы современных браузеров предоставляют некоторую помощь в этом вопросе. Кнопка Назад (Back) отправляет на предыдущую страницу, список History показывает страницы, которые вы посетили последними, а ссылки, по которым вы уже ходили, отмечаются другим цветом.
Я бы рекомендовал не изменять стандартные цвета ссылок, потому что пользователи поймут только те цвета, к которым они привыкли. Я протестировал множество сайтов с нестандартными цветами ссылок, и там пользователи никак не могли разобраться с тем, какие ссылки они уже использовали.

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

Куда я могу пойти?

На этот вопрос нетрудно ответить, используя представленные возможности навигации и ссылки. Кроме того, если пользователь поймет структуру сайта, у него появится общее представление о страницах, которые он не видит в настоящий момент и куда может попасть. Так как нельзя показать все возможные места назначения на каждой странице, то очевидно, что хорошая структура сайта - это главное преимущество для как можно более полного ответа на вопрос: «Куда я могу пойти?»

Существует три вида которые могут быть использованы на странице:

• Встроенные ссылки - это традиционный подчеркнутый текст, указывающий, что по вопросу, обсуждаемому в данном месте, есть дополнительная информация.
• Структурные ссылки - это ссылки, которые указывают на другие уровни структуры сайта, а также на «братьев-сестер» или «детей» в иерархии. Важно, чтобы одни и те же структурные ссылки присутствовали на всех страницах, в этом случае пользователь понимает, чего ждать от структурной навигации. Естественно, конкретный пункт назначения каждой из структурных ссылок будет меняться от страницы к странице. Поэтому часто бывает лучше использовать ссылки, которые указывают имя конкретного места в дополнение к представлению структурного отношения между текущей страницей и страницей назначения. Проще говоря, лучше иметь ссылку «Вверх к Widget Product Family», чем просто ссылку «Переход на один уровеньвверх».
• Ассоциативные ссылки используются, чтобы дать пользователю совет типа «смотри также», относительно страниц, которые могут быть ему интересны, так как они похожи или связаны с текущей страницей.

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

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

Предыдущая статья:
Веб-дизайн - Главная страница в сравнении с внутренними

Следующая статья:
Веб-дизайн - Подсайты