О мифе "семь плюс минус два"

Быстрое развитие 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

Статьи по теме

Чат-бот – что это такое

Чат-боты уже давно являются неотъемлемой частью нашей жизни. Они помогают получить ответы на самые часто задаваемые вопросы, решить воз�...

2022-04-25

Основные UX-тренды 2022 года

Традиционно новый год приносит с собой ряд изменений в сфере e-commerce. Чтобы успешно конкурировать на рынке с другими компаниями, представ�...

2022-01-18

Особенности оформления подвала сайта

Подвал сайта (футер) относится к элементам навигации. Он расположен в самом низу страницы, из-за чего некоторые владельцы веб-ресурсов пр...

2021-08-02

Обратный звонок: полезный инструмент или раздражитель?

Несмотря на то, что в последние годы переписка между компанией и клиентами является основным методом коммуникации, некоторые люди по-пр�...

2021-03-29

Фирменный стиль: секреты успешной разработки

Число брендов на мировом рынке постоянно увеличивается. Чтобы выделиться среди конкурентов, вам необходимо разработать фирменный стил�...

2021-03-19

ТОП-10 онлайн-консультантов для сайта

Онлайн-консультанты − помощники, которые встречают гостей сайта практически сразу после визита на интернет-площадку. Эти виджеты позво...

2021-02-24

Вопросы юзабилити: на что обратить внимание в 2021 году?

Вопросы юзабилити: на что обратить внимание в 2021 году? Начало года − время для подготовки плана работы над сайтом. В зоне внимания в�...

2021-01-19

Подключение платформы Яндекс.Диалоги на веб-сайт

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

2020-09-15

Текст для карточки товара: как сделать идеальное описание?

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

2020-08-21

Онбординг: получаем признание клиентов за несколько секунд

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

2020-07-30

Главная страница: идеальное юзабилити

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

2019-06-26

Поведенческие факторы: суть и специфика их влияния на продвижение сайта

Поведенческие факторы (ПФ) − это всевозможные действия, которые совершают на интернет-сайте посетители. Их набор меняется с течением вр�...

2019-06-18

Оформление электронной корзины: как не помешать пользователям сделать покупку?

Онлайн-коммерция − высококонкурентная сфера. Чтобы побудить пользователей к приобретению, мало просто добавить активную кнопку «Купит...

2019-05-15

Оформление текстов на сайтах: 10 полезных советов

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

2019-01-09

3 конкретных шага, чтобы сделать ЛЮБОЙ сайт продающим! Или как минимум улучшить его.

ЗДРАВСТВУЙТЕ! Нам все чаще за последнее время стали поступать заявки с вопросами: как привлечь клиентов, какие рекламные каналы работ...

2017-03-01