Библиотека Интернет Индустрии I2R.ru

Web Design Practices

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

• Глобальная навигация (Global Navigation)
• Глобальная ссылка "Начало" (Global "Home" Link)
• Цепочные ссылки (Breadcrumb Navigation)
• Использование многоаспектной классификации (Use of Faceted Classification)
• Ссылки на дочерний элемент (Down-to-Child Links)
• Ссылки на "внучатый" элемент (Down-to-Grandchild Links)
• Ссылки на элемент этого же уровня (Across-to-Sibling Links)
• Ссылки на "родительский" элемент (Up-to-Parent Links)
• Цвет ссылок, оформление и поведение ролл-оверов (Link Color, Treatment, and Rollover Behavior)

Глобальная навигация (Global Navigation)

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

Ниже представлены собранные в мае 2002 года статистические данные о 75 сайтах-лидерах, занимающихся электронной коммерцией. (список сайтов)

Частота применения

На страницах 97% сайтов имелись ссылки на главные категории.

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

Положение на странице

89% Вверху
(см. пример)

11% Слева
(см. пример)

Стиль представления

[ определение стилей ]

• 43% Навигационные закладки (50% из их числа располагают суб-навигацию в горизонтальную панель под закладками) [ примечание ]
• 39% Навигационная панель
• 7% Простой список
• 5% выпадающее меню
• 4% Навигационные кнопки

Использование каскадных или выпадающих меню (pop-up menus)

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

k coдepжaнию...»

Ниже представлены собранные в мае 2002 года статистические данные о 75 сайтах-лидерах, занимающихся электронной коммерцией. (список сайтов)

Вид представления ссылки

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

• 60% Ссылкой на главную страницу был логотип, плюс к тому явная ссылка "Home" в верхней части страницы
• 19% Только логотип ссылался на главную страницу (не было явной ссылки "Home")
• 13% Логотип являлся ссылкой на главную страницу, плюс к тому явная ссылка "Home" в нижней части страницы
• 8 % Логотип связан с главной верхнеуровневой страницей*

* На этих сайтах не было явно выделенной главной страницы; начальной страницей является страница верхнего уровня для данной категории, например, на сайте www.eddiebauer.com такой страницей была названа "Clothing and Gear"

[ примеры ссылок ]

Расположение логотипа как ссылки на главную страницу

Расположение на странице отмечено на диаграмме-сетке размером 800 х 600 пикселов. [ от сетке ]

Размещение логотипа в выборке сайтов было однородно: в верхнем левом угле страницы. Этот факт согласуется с результатами, полученными Майклом Бернардом (Michael Bernard) в его исследовании того, где пользователи ожидают видеть ссылку на главную страницу.

k coдepжaнию...»

Цепочка ссылок (далее "цепочка") показывает пользователю путь к его текущему местоположению на сайте.

Ниже представлены собранные в мае 2002 года статистические данные о 75 сайтах-лидерах, занимающихся электронной коммерцией. (список сайтов)

Частота применения сайтами

45 % сайтов имели цепочку ссылок.

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

Ориентация цепочек

	95% Горизонтальная
	5% Вертикальная

Разделитель между звеньями (для горизонтальных цепочек)

	65% Стрелка вправо
	9% Вертикальная черта
	8% Двоеточие
	4% наклонная черта
	3% Стрелка влево
	3% Маркер
	3% Видоизменённый текст

k coдepжaнию...»

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

Ниже представлены собранные в мае 2002 года статистические данные о 75 сайтах-лидерах, занимающихся электронной коммерцией. (список сайтов)

Частота применения сайтами

Многоаспектная классификация была использована в том или ином виде при создании 69 % сайтов.

В четырёх товарных категориях (Computers, Gifts, Kitchen Ware, Music/Video) все сайты (из числа этих 69 %) использовали многогранную классификацию. В товарной категории "Office Supplies" ни один из сайтов многогранную классификацию не применял.

Расширенный поиск против многогранной классификации

Многогранная классификация может быть использована в интерфейсе расширенного поиска и/или быть составной частью навигационного интерфейса всего сайта.

	77 % сайтов используют многогранную навигацию, не используя ее в расширенном поиске [пример]
	6 % сайтов используют многогранную классификацию для расширенного поиска (или поиска товаров), но не используют многогранную навигацию; [пример]
	17 % сайтов применяют многогранную классификацию в обоих случаях: и в многогранной навигации и в многогранном расширенном поиске. [пример]

Равнозначные грани против основных и второстепенных

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

Равнозначные грани

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

k coдepжaнию...»

Ссылки на дочерний элемент (Down-to-Child Links)

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

Ниже представлены собранные в мае 2002 года статистические данные о 75 сайтах-лидерах, занимающихся электронной коммерцией. (список сайтов)

Частота применения сайтами

Все исследованные сайты имели этот тип ссылок. Это число получено путем подсчета всех страниц, где ссылки на дочерние элементы могли бы быть. [подробности]

Положение на странице

Собранные ниже данные полезны лишь отчасти, так как они не учитывают два основных типа страниц, содержащих этот вид ссылок - "Категории товаров/Product Category" и "Перечень товаров/Product List". [Подробнее…]

	60% В области основного содержимого [см.пример]
	27% Слева [см.пример]
	7% Справа [см.пример]
	3% Сверху [см.пример]

Стиль исполнения

[определение стилей]

• 75% Простой список
• 24% Навигационная панель
• 1% Выпадающее меню

k coдepжaнию...»

Ссылки на "внучатый" элемент (Down-to-Grandchild Links)

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

Ниже представлены собранные в мае 2002 года статистические данные о 75 сайтах-лидерах, занимающихся электронной коммерцией. (список сайтов)

Частота применения сайтами

15 % сайтов имели этот вид ссылок. Эта частота вычислена по количеству страниц, где ссылки на "внучатые" элементы могли встречаться. [подробности]

Положение на странице

	44% Слева [см.пример]
	40% В области основного содержимого [см.пример]
	16% Справа [см.пример]

Стиль исполнения

[определение стилей]

• 44% Простой список
• 24% Навигационная панель
• 20% Всплывающее меню
• 12 % Выпадающее меню

k coдepжaнию...»

Ссылки на элемент этого же уровня (Across-to-Sibling Links)

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

Ниже представлены собранные в мае 2002 года статистические данные о 75 сайтах-лидерах, занимающихся электронной коммерцией. (список сайтов)

Частота применения сайтами

27% исследованных страниц имели этот тип ссылок. Эта частота вычислена по количеству страниц, где ссылки на соседние элементы могли встречаться. [подробности]

Осуждение результатов.

Положение на странице

	68% Слева [см.пример]
	18% Сверху [см.пример]
	11% Справа [см.пример]
	2% В области основного содержимого [см.пример]

Стиль исполнения

[определение стилей]

• 54% Навигационная панель
• 28% Простой список
• 1% Выпадающее меню
• 3% Всплывающее меню

k coдepжaнию...»

Ссылки предоставляющие пользователям доступ к менее подробной информации; позволяют переместиться на уровень выше.

Ниже представлены собранные в мае 2002 года статистические данные о 75 сайтах-лидерах, занимающихся электронной коммерцией. (список сайтов)

Частота применения сайтами

28 % сайтов имеют такие ссылки. Эта частота вычислена по количеству страниц, где ссылки на "родительские" элементы могли встречаться. [подробности]

Частотные показатели этого вида ссылок схожи с теми, что показали "Ссылки на элемент этого же уровня", однако наблюдалась следующая тенденция: ссылки этих двух видов почти не соседствовали друг с другом (только 6 % сайтов имели на своих страницах такое соседство) [Подробнее…]

Положение на странице

	70% Слева [см.пример]
	22% Сверху [см.пример]
	3% Справа [см.пример]
	1% Снизу [см.пример]

Стиль исполнения

[определение стилей]

• 72% Навигационная панель
• 20% Простой список
• 9% Выпадающее меню

k coдepжaнию...»

Представленные ниже данные основаны на 376 примерах ссылок местной навигации, собранных с 315 веб-страниц (список сайтов). Каждый пример был определён как единая группа ссылок одной страницы; некоторые страницы располагали более чем одним набором ссылок местной навигации (например, имелись в наличии и ссылки вида "Ссылки на дочерний элемент" и ссылки вида "Ссылки на элемент этого же уровня")

Первичный цвет ссылок

50% Синий 13% Красный 12% Чёрный 12% Серый 6% Зелёный 5% Коричневый 2% Пурпурный

Обозначение посещённых ссылок

В 37 % страниц для обозначения посещённых ссылок были использованы цвета отличные от стандартного.

Визуальное выделение

	54% Текст ссылок подчёркнут
	34% Ссылки без подчёркивания
	12 % Текст выполнен графически

Поведение ролл-овера

• 68% Отсутствует
• 15% Изменение цвета текста ссылки
• 10% Подчёркивание при наведении мыши на ссылку (в неактивном состоянии подчёркивание отсутствует)
• 4% Изменение фонового цвета ссылки (для HTML-текста)
• 4% Изменение графического изображения (для текста, выполненного графикой)

k coдepжaнию...»

• Эта статья на английском языке