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

Одним из таких методов, на который стоит обратить пристальное внимание, является волшебное правило "семь плюс минус два (7±2)". Этот принцип очень часто применяется для того, чтобы определить количество пунктов в меню навигации на веб-сайте. Правило это вошло в практику, чтобы ускорить процесс дизайна, ну и чтобы объективно объяснить принятое решение заказчику.

Откуда же пришло это правило?

В 1956 году психолог Георг Миллер (George Miller) опубликовал результаты своего исследования. С тех пор правило 7±2 стало сверхпопулярным среди дизайнеров интерфейсов. Более внимательное изучение работ Миллера показывает, что он не делал в ней никаких выводов, которые можно применить к дизайну веб-навигации.

Во-первых, Миллер занимался изучением пределов человеческой кратковременной памяти. Он пришел к выводу, что существует предельное количество предметов, которые мы способны удержать в нашей кратковременной памяти: 7±2. Он не занимался изучением вопроса, сколько предметов человек может воспринимать, предположив, что их может быть несколько тысяч. Навигация на веб-сайте в общем случае никак не связана с кратковременной памятью. За редким исключением посетителям никогда не приходится запоминать все пункты в меню. По сути, меню навигации присутствует на каждой странице сайта и всегда доступно для посетителя. Кратковременная память здесь не играет совершенно никакой роли.

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

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

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

Баланс широты и глубины

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

Исследования показывают, что в общем случае "широкие" структуры работают лучше, чем "глубокие". Как оказалось, пользователи лучше работают и быстрее находят информацию в "неглубоких" структурах. Естественно, что большинство самых популярных веб-сайтов в современном Web имеют широкую структуру: вполне обычно увидеть на известных порталах и новостных сайтах по 50-100 (а то и больше) ссылок на главной странице.

А теория такова: для постоянного выбора категорий и подкатегорий при работе с глубокой структурой требуется больше усилий, чем для просмотра большого количества ссылок при работе с широкой структурой.

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

Возьмем к примеру веб-сайт www.health.com. Мне нравится этот сайт - приятный дизайн с всегда свежими материалами. Однако главное меню сайта аккуратно ужато до семи пунктов (если не считать "home"). В результате у сайта получается глубокая структура. Найти нужный материал становится проблематично: я иногда отчаянно блуждаю по сайту, чтобы найти статьи по такой теме как "stretching" (растяжка). Возможно, если бы у сайта была бы более широкая структура, с ним легче было бы работать.

Представление информации

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

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

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

И наконец, не важно сколько у вас информации на сайте, главное - как она представлена. Как сказал Эдвард Тафт - знаменитый дизайнер и профессор Йельского университета - "Запутанность и сложность свидетельствуют лишь о плохом дизайне, а не о качестве самой информации" (Envisioning Information, Graphics Press 1990)

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

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

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

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

Сравните: главная страница Fleet Homebanking насчитывает 35 ссылок, не считая выпадающие меню и блок поиска. Мне данная страница показалась слишком сложной.

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

Пример: вертикальное меню на сайте All Recipes содержит более 25 ссылок, но все они сгруппированы. Вместо одного длиннююющего списка ссылок перед вами несколько групп ссылок, с которыми удобно работать. Обратите также внимание, как на сайте Etrade в группах используются заголовки.

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

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

Сравните: сайт MegaGo - перед вами море ссылок и никакого разъяснения, куда они ведут.

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

Внимание: этот метод может привести к проблемам с юзабилити. Старайтесь не получить в результате меню-загадки. Всегда четко обозначайте на странице такие меню.

Пример: все главные разделы сайта International Herald Tribune (www.iht.com) доступны с любой страницы по одному щелчку мышки. В результате, перед вами - чистая аккуратная страница, позволяющая сконцентрировать все внимание на чтении.

Сравните: сайт MSNBC к тому, что чересчур загроможден, имеет серьезные проблемы с юзабилити выпадающих меню.

Сделайте информацию наглядной. Наглядное представление информации - сравнительно новый метод, разрабатываемый такими специалистами по интерфейсам, как Бен Шнайдерман (Ben Schneiderman). Использование пространственных или визуальных методов дизайна позволяет облегчить представление сложных данных и их взаимосвязей. Однако такие методы не везде можно применить, а во многих случаях они даже противопоказаны.

Пример: на сайте BMW USA (идите по ссылке "Virtual Center" затем "Choose a Model") вы можете быстро получить данные о ценах на легковые автомобили. Несмотря на некоторые проблемы с юзабилити, здесь весьма уместно использован прием визуализации.

Разумеется, возможны и комбинации всех перечисленных приёмов не говоря уже о том, что мы еще не все упомянули. Обратите внимание на сайт Art and Culture как на пример приёмов визуализации и разделения навигации. Благодаря им, с сайтом легко работать, просто искать информацию, и это создает приятное впечатление у посетителя.

Так сколько же?

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

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

James Kalbach
Александр Качанов

Почитать другие уроки >>>

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

*****

Статья дня

Управление интернет-магазином: сложный выбор

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

Подробнее >>>

*****

Обзоры и пресс-релизы интернет-магазинов

Новости партнеров: Компания «АВИКО» (г. Волгоград) автоматизировала ресторан «АРИ100КРАТ» на основе технологий компании «1С-Рарус».

Компания «АВИКО» выполнила проект комплексной автоматизации нового в г. Волгограде ресторана - «АРИ100КРАТ». Проект автоматизации был выполнен за 1 месяц, автоматизировано 12 рабочих мест. В проекте использованы новые технологии автоматизации рабочих мест официантов с помощью мобильных терминалов, подключенных к программе «1С-Рарус:Ресторан+Бар+Кафе» на платформе «1С:Предприятие». По мнению бухгалтера ресторана Светланы Колосовой, внедренное решение позволило им избежать проблем, связанных с учетом продуктов, и повысить организацию работы предприятия...

Подробнее >>>