Юзабилити: как сделать сайт удобным

Элементы навигации

Представьте себе, что вы оказались одни в лесу без компаса в об­лачный день. Лес сухой, мха на деревьях нет, а ветки густо растут со всех сторон и торчат везде одинаково. Вы забрались далеко от шоссе, и шума машин вам не слышно. Жуткая картина. Все «бойскаутские» приемы не работают, и если вы не обладаете сильнейшей интуицией и вы не ясновидящий, то вам будет очень трудно выбраться. У вас отсутствуют средства навигации, вы не знаете, где вы и куда идти.

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

Что такое навигация Web-сайта? Навигация — это именно тот инструмент (щбор инструментов), с помощью которого пользо­ватель перемещается по Web-сайту. В простонародье «это все, на что можно нажать, чтобы куда-нибудь перейти». Однако это не совсем так: в интерфейсе различных программных систем суще­ствуют одни и те же элементы, которые служат для разных Це­лей. Например, изображения могут быть предназначены и для украшения сайта, и для перехода в какой-нибудь раздел, под­черкнутый текст («клинический случай» для таких элементов) может использоваться и для выделения важной части содержи­мого, и как обозначение гиперссылки. Рассматривая элементы навигации, мы будем говорить об их сути, а не о способе реали­зации с точки зрения HTML или JavaScript.

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

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

Одним из элементов навигации является ссылка на главную спц ницу сайта (рис. 6.6). Согласно некоторым исследованиям, эі элемент встречается практически на'100 % сайтов.

Веб Картинки ыстрый переход

Рис. 6.6. Переход на главную страницу на поисковом портале Google возможен с любой страницы

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

Факторы, которые определяют выбор того или иного вида мені

• верхнее меню занимает мало места на странице;

• боковое меню «откусывает» большой кусок страницы, a nj наличии длинных страниц на несколько экранов это драг ценное место вообще пустует;

• в верхнем меню ограничена длина наименований раздело иначе придется переносить их на следующую строку, а тут уэ никакой аккуратности не жди;

• в боковом меню можно поместить гораздо более распростр ненные наименования разделов.

Иногда Два способа расположения меню совмещают, однаї в таком случае могут возникнуть проблемы с удобством их и* пользования.

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

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

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

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

Нет четких сведений о том, какое именно меню пользователи считают основным. Если ваш посетитель уверен, что список ос­новных разделов всегда размещен сверху, а вы считаете, что это не так, то вы замедлите работу посетителя и он станет больше отвлекаться. «Так, посмотрим, какие услуги оказывает эта ком­пания... О компании... Поддержка... Карта сайта... Не понял, где?.. А... У них же все в левом меню...»

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

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

• Вторичная навигация

Не является основным способом перемещения внутри сайта, од­нако имеет достаточно большое значение с точки зрения марке­тинга (рис. 6.8). В конце концов, редко кто создает сайты без об­ратной связи. Люди, как правило, хотят найти единомышленни­ков, клиентов, партнеров, покупателей. Для того чтобы посетитель сайта мог получить необходимую информацию о вас, используется вторичная навигация — разделы 0 компании, Контакты, Наши коор­динаты, Служба поддержки. Вторичная навигация, если она пред - стайлена на сайте, должна бьггь доступна на каждой странице.

• «Подвал»

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

• Быстрый переход

Подобная функция часто применяется в технике, например, бы­страя запись в видеомагнитофоне или прямое воспроизведение в музыкальных центрах на несколько компакт-дисков.

About IBM Privacy Terms of use Contact

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

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

Проводимые конкурсы: ~т! І Проводимые конкурсы:

.•'Видимый utihVpi. Ы

арт-пак 022004, тур № 2 арт-пак 02'2004, тур № 1 арт-пак 01 '2004, тур № 2 арт-пак 01 '2004, тур № 1 WALLPAPERS[RUl-2003, финалисты Конкурс Prestigio, финалисты WALLPAPERS[RU]-2003, тур № 1 Конкурс Prestigio, тур № 1 Конкурс Prestigio, претенденты

Рис. 6.9. Быстрый переход к прошедшим конкурсам графики на сайте дизайнеров wallpapers. ru

• Главное меню {рис. 6.10)

Этот элемент предназначен для перехода к нужному разделу. Oi является достаточно экзотическим для интернета, хотя довольщ часто используется для интранет-приложений. По существу эт< представленные пользователям варианты дальнейших действий.

Регистрация категорий Архив отчетов и бланков Поиещеі ш Файлов-

Рис. 6.10. Элемент навигации «Главное меню»

Как правило, сам по себе этот навигационный элемент являете* несостоятельным. Его можно использовать только в совокупно­сти с другими способами навигации. Автономно он может бып использован только один раз на верхнем уровне сайта.

Если список разделов велик, а показывать его нежелательно, либо хочется вывести побольше новостей, но не загромождать место на странице, то можно использовать элемент Больше/Под­робнее (в зависимости от контекста) или, говоря научно, элемеш расширения информации. В некоторых источниках его называ­ют «завлекалочка». Звучит, согласитесь, не очень серьезно. Если сравнить этот элемент со зданием, этажами и офисами, то он бы выглядел, как дверь с надписью «А тут есть еще кабинеты».

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

Software

- Application & Integration Servers

- Operating Systems

- Application Development See All

Puc. 6.11. Вместо десятка ссылок на сайте корпорации Sun Microsystems в разделе Программное обеспечение приведено всего четыре, одна из которых

Посмотреть все

Другой вариант элемента расширения информации — вывод части текста, статьи или новости с гиперссылкой Подробнее или Читать все (рис. 6.12). Часто этот подход используется для увели­чения разнообразия информации, для устранения эффекта за­громожденное™ страницы и для облегчения восприятия.

«канских морских пехотинцев

е иракско-сирийской границы

►► ■

»ещание телеканала ^дробнее |

щание телеканала "Россия".

____ : ■ • ■ ______ :______ ;___ ;__ ьъ____ ;_______ ' ■■

Рис. 6.12. Элемент расширения информации в новостях на

gazeta. ru

Средства перехода к подразделам сайта можно организовать разными способами.

• Выпадающее меню

Этот способ широко используется в интерфейсах обычных при­ложений — графических и текстовых редакторов, браузеров, операционных систем. Список подразделов появляется из на­именования основного раздела при наведении на него курсо] или щелчке мыши и исчезает по такому же принципу (рис. 6.1: Меню имеет ограниченную ширину, поэтому названия пункті должны быть краткими и понятными.

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

• Дерево

Это визуально отображенная иерархическая структура, т. е. струк­тура с одним или несколькими корневыми элементами, каждый

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

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

Практически все современные операционные системы поддер­живают эту абстракцию для отображения файловой структуры (рис. 6.14).

В ff My Computer S 3£Flojipy(A:)

□ вівшая

Ш {Цц Apache ® S) crypto

S Qj Documents and Settings Ш Inetpub ffl OpenSource Ш Q Program Files m Projects

Puc. 6.14. Древовидная организация материала

Узлы могут быть в закрытом И в раскрытом состоянии, что пока­зывается различными способами (например, открытая и закры­тая книга, знаки «+» и «—», стрелки вправо (влево) либо вниз). У листьев же таких состояний нет вообще.

Частным случаем древовидной структуры можно считать много­уровневый список (рис. 6.15).

• First list item

• Second list item

о First list item о Second list item о Third list item

• Third list item

Puc. 6.15. Многоуровневый список — стандартный элемент языка разметки HTML

Как выпадающее меню, так и дерево являются нетипичными для Web-интерфейса, потому что их реализация не всегда тривиальна. Во-первых, в силу различий в отображении одной и той же страницы разными браузерами (динамическая древовидная структура, пре­красно отображаемая в MS Internet Explorer, может совершенно «рассыпаться» в Netscape Navigator или Opera). Во-вторых, в силу от­носительной сложности в реализации. В-третьих, как правило, по­добные элементы, а в особенности древовидные структуры, очень медленно перечитываются, и приходится подолгу ждать раскрытия узла дерева.

• Навигационная строка

Это набор ссылок, отражающий все пройденные пользователем уровни сайта (рис. 6.16). Гиперссылки ведут на ключевые в ие­рархий страницы сайта и разделяются символами <<:», « | », «/», «» и т. п.

: developers. sub. com

Developers Home > Developer Forums > Java Technology Forums >

Puc. 6.16. Навигационная строка на сайте Sun Microsystems

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

Кстати говоря, существует известная, но часто остающаяся незаме­ченной аналогия со структурой подкаталогов сайта, которая ото­бражается в адресной строке браузера. Опытные пользователи давно научились перемещаться по содержимому, удаляя часть адреса из адресной строки. Например, адрес некоторой страницы может вы­глядеть так: http://mysite. net/category/interfoce/usabilify/errors/index. php. Пользователь, видя структуру сайта и зная, что ему необходима ин­формация об элементах интерфейса, может убрать из адреса опре­деленную часть и по адресу http://mysite. net/category/interTdce/cpa3y перейти в раздел Интерфейс.

• Каталог

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

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

Hbme

Consumers. Homeowners. Family....

Business

Industries. Finance. Jobs.

Kids and Teens

Computers. Entertainment. School....

Computers

Hardware. Internet. Software.... Іуідфа, Newspapers, Qurrq. nt. Events,..

Puc. 6.17. Второй и третий уровень иерархии каталога на google. com

Метод последовательного уточнения. Существует в самых разных вариантах. Отличйё его от предыдущих методов в том, что он предназначен не для улучщенйя удобства отображения инфор­мации, а для ведения пользователя к цели сквозь структуру сай­та. Он может бьггь применен как к уточнению внешнего вида и «начинки» Web-сайта, к поисковым операциям пользователя, так и к способу навигации по сайту. Этот метод напоминает игру «горячо — холодно», в которую часто играют в детстве. Подоб­ная игра с пользователем при поиске или просто навигации по сайту позволяет, во-первых, достаточно уверенно передвигаться по информации, а во-вторых, пользователи непроизвольно зна­комятся с тем, как организована структура вашего сайта, и с ка­ждым разом работают быстрее и качественнее (рйс. 6.18).

Каталог / Компьютеры и связь / Интернет

• У слуги яо ступа и связи (225Ъ,

■ Электр онная почта (5Ш

■ Отправка сообщенийҐ60)

■ Каталоги ҐЗЗУі

• Поисковые системы (57)

• Сайты адаптированные для КПК (34)

■ Универсальное Г4СГ)

См. также:Софт для интернета. Вирусы и антивирусы Постепенное приближение к цели поиска с уведомлением

"'''TTTJUer'TRf» rvarvrv">''

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

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

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

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

Карта и индекс сайта особо важны для работы индексирующих роботов, поскольку охватывают все наполнение сайта. При их наличии весь сайт будет качественно проиндексирован.

• Карта сайта

Как правило, она представляет собой развернутый список всех разделов и вложенных подразделов с необходимой глубиной (рис. 6.19). Вложенность может быть два, три, четыре уровня. Количествгэтих уровней определяется тем[4] .насколько примени­ма данная карта. Представьте себе величину и глубину карты для каталогов любого поискового портала или для интернет-магази­на с тысячей товаров и услуг. Это немыслимый объем информа­ции. Никто не будет делать карту для таких крупных систем — слишком велик, объем информации. В другом случае, если на сайте всего три раздела, а сам он состоит из пяти—семи страниц, тоже нецелесообразно создавать карту, поскольку она будет ана­логична основному меню. Карта, как правило, исііользуется на сайтах средней сложности. Она может быть создана и как обыч­ные текстовые ссылки, и как сложный графический объект. Лично мне кажется предпочтительным использование обычных текстовых гиперссылок.

Карта сайта Регистрация

• Выбор программы

• WM Keeper Classic

о Рекомендации по подключению WM Keeper Classic через Proxy - сервер

о Подробное описание интерфейса WM Keeper Classic о История WM Keeper Classic о Описание WM Keeper Phone Plugin о Downloads

• WM Keeper Light

о демонстрация экспорта сертификата о демонстрация импорта сертификата о о цифровых подписях и цифровых сертификатах о пример настроек браузера для использования SSL

• Вопросы и ответы

О системе

• Описание

• Технология

• О сервйсах

• Соглашения

о Соглашение о трансферте имущественных прав о Соглашение о бооьбе с незаконной тооговлей

Рис. 6.19. Карта сайта в виде развернутой структуры из текстовых гиперссылок на webmoney. ru

ABCDEFGHIJMN. PRSTUW

A Arrays & Intelligent Storage Server Options BacktoTop

В Blade Servers Boards

Board Platforms Boot Disk Solutions

BacktoTop

• С Chip Sets & Logic

Puc. 6.20. Индекс сайта на sun. com

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

[наверк] ird | Бизнес | Детский Мир |

Рис. 6.21. Ссылка Наверх на ozon. ru оформлена как текст

Альтернативой ссылке Наверх может быть дублирование навига­ции (рис. 6.22). Этот вариант подобен подвалу, однако дублиру­ются не ссылки на основные разделы, а элементы навигации — кнопки, исполняемые гиперссылки (Отправить форму, Удалить за­каз и т. п.).