Отправляет email-рассылки с помощью сервиса Sendsay

Юзабилити в Интернет: принципы успешного веб-дизайна

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Левитас: Почему Ваш бизнес-сайт не работает?" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Октябрь 2004   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
Александр Левитас

Статистика

6.650 подписчиков
-3 за неделю
←   Все выпуски   →

Юзабилити в Интернет: принципы успешного веб-дизайна


Информационный Канал Subscribe.Ru

Юзабилити в Интернет: принципы успешного веб-дизайна

Количество подписчиков: 4420

Автор: Максим Корниенко
Maximaster.ru - экспертиза юзабилити

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

Упрощаем навигацию по сайту

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

Хорошо это или плохо? С одной стороны, это уменьшает количество действий (щелчков мыши), которые нужно совершить посетителю, чтобы найти нужную информацию. Но, с другой стороны, забывается один из постулатов юзабилити – «количество шагов, которые нужно сделать пользователю, не имеет значения до тех пор, пока каждый шаг очевиден». Поэтому я голосую за хорошо структурированные навигационные панели разумного размера.

Ниже предлагается 3 простых способа, которые позволят сделать навигацию дружелюбной, а именно: 1) увеличение уровней иерерхии, 2) разбивка на несколько навигационных панелей, 3) персональная навигация.

1. Увеличение уровней иерархии

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

Предположим, что после изучения деятельности этой компании была предложена следующая структура сайта:

1. Главная страница
2. Бетонные трубы
3. Пластиковые трубы
4. Керамические трубы
5. Монтаж трубопроводов
6. Ремонт трубопроводов
7. Доставка труб
8. Контактная информация
9. Новости
10. Клиенты

Заметим, что здесь приведена навигация только первого уровня. На самом деле, конечно, есть подуровни. К примеру, компания производит несколько типов труб каждого вида.

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

1. Главная страница
2. Трубы
2.1 Бетонные трубы
2.2 Пластиковые трубы
2.3 Керамические трубы
3. Услуги
3.1 Монтаж трубопроводов
3.2 Ремонт трубопроводов
3.3 Доставка труб
4. О компании
4.1 Новости
4.2 Клиенты
5. Контактная информация

Посмотрите, какое компактное и наглядное меню получилось в итоге:

1. Главная страница
2. Трубы
3. Услуги
4. О компании
5. Контактная информация

Пример. Этот прием в действии можно увидеть на сайте компании «Строй Оптим». Компания эта молодая, быстрорастущая, поэтому для навигации очень важна масшабируемость. Присмотритесь – в разделы «Продукция» и «Услуги» новые подразделы можно добавлять до бесконечности!

2. Разбивка на несколько навигационных панелей

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

В этом случае более удобной будет более «плоская навигация». Хорошим решением будет разбить ее на 2 панели:

Первая панель:
1. Бетонные трубы
2. Пластиковые трубы
3. Керамические трубы
4. Монтаж трубопроводов
5. Ремонт турбопроводов
6. Доставка труб

Вторая панель:
1. Главная страница
2. О компании
3. Новости
4. Клиенты
5. Контакты

Логика разбивки здесь очень проста: в одну панель относим все, что касается продукции, в другую – все остальное.

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

Пример. Примером, иллюстрирующим принцип разделения навигационной панели, может являться сайт компании IT Expert . Ссылки на наиболее важные страницы и разделы (О компании, Обучение и т.д.) вынесены в главную навигационную панель, а ссылки на менее важные страницы (Карта сайта, Вакансии, Условия использования и т.д.) находятся в дополнительной панели навигации в нижней части сайта.

3. Персональная навигация

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

Персональная навигация представляет из себя дополнительную навигационную панель, которую посетитель сайта может редактировать (добавлять/удалять разделы) самостоятельно. Если есть несколько страниц, на которые он постоянно заходит, то, чтобы ускорить к ним доступ, пользователь добавляет их в свою личную навигацию.

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

Пример. Персональная навигация – достаточно нечастое явление в Интернете, но ряд неплохих примеров ее использования вспомнить можно. Вот один из них – сайт МДМ-банка.

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


 

Всего доброго,
Максим Корниенко
Maximaster.ru - экспертиза юзабилити

[ архив выпусков ]

[ задать вопрос* ]

* Письма и присланные материалы могут быть опубликованы. Если вы не хотите гласности, то укажите это в теле или заголовке письма

РЕКЛАМА В РАССЫЛКЕ

У Вас есть продукция или услуги, интересные на рынке информационных технологий? Вы хотите, чтобы о Вас узнали более 4,000 веб-дизайнеров, специалистов по Интернет-маркетингу и руководителей веб-студий? Если да, то разместите рекламу в этой рассылке, и Вы будете приятно удивлены эффектом, который получите! Цены символические, возможен бартер.

По вопросам размещения рекламы обращайтесь сюда

ВЛАДЕЛЬЦАМ РАССЫЛОК

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

  1. Название и краткое описание Вашей рассылки
  2. Способы подписки
  3. Периодичность выхода рассылки
  4. URL Вашего сайта (если есть)
  5. Количество подписчиков

УСЛОВИЯ РЕПУБЛИКАЦИИ

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

  1. Для доступа к материалу не требуется оплата, регистрация, заполнение анкет, и т. д.
  2. Сохраняется целостность текста и работоспособность контекстных ссылок
  3. Дается прямая (не через скрипт) ссылка на сайт www.maximaster.ru

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

ЧТОБЫ ПОДПИСАТЬСЯ

Если кто-то переслал Вам это письмо и Вы хотите подписаться на рассылку, воспользуйтесь формой подписки.

© 2002-2004 Maximaster.ru, Максим Корниенко

http://subscribe.ru/
http://subscribe.ru/feedback/		 Подписан адрес:
Код этой рассылки: inet.webbuild.usability		 Отписаться
В избранное