Веб Дизайн

Лекция 5, Заголовки, Категории, Схемы

организации и Навигация

Vladimir Tomberg, PhD

Эстонский Университет Прикладных Наук

по Предпринимательству Майнор

Январь 2015

Pic

ture

sourc

e:

htt

p:/

/userc

ente

redconte

nt.

com

ПРЕЗЕНТАЦИЯ ДОМАШНИХ РАБОТ

2

Заголовки

• Хорошие заголовки (названия) помогают людям быстрее найти то, что они ищут.

• Как назвать по-русски следующие страницы?

Home;

About us

• Информационные архитекторы часто тратят много времени для того, чтобы найти лучшее название для того или иного понятия

3

Пример из реальной жизни:Городская навигация

4

Разговор на языке пользователя

• Первое правило — использовать именно те названия, которые использует целевая аудитория. Если не говорить на языке пользователя, то как он вас поймет?

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

• Неверные заголовки могут привести к падению продаж

5

Пример из реальной жизни:Городская навигация

6

Пример из реальной жизни:Городская навигация

7

Пример из реальной жизни:Навигация по карте

8

Навигация снаружи и внутри

9

Навигация в аэропорту Домодедово

10Source: http://tema.livejournal.com/1767363.html

Некоторые правила

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

• Стараясь сделать заголовки короче, что лучше для визуального дизайна, нельзя усекать их до бессмысленности. Главное, это не длина заголовков, а их понятность;

• Желательно избегать заголовков, которые могут быть неверно интерпретированы. Например, не “Контакт”, а “Контактные данные”, если речь идет о сайте предприятия

11

Реальная жизнь• В реальной жизни мы

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

12

Категории

• Категории — это элементы организационной схемы. Как только будет выбрана организационная схема, необходимо начать работу над категориями в ней;

• Например, для новостного сайта, построенного по тематической схеме организации, категориями могут быть: Спорт, Технология, Финансы и т. д.;

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

13

14

Категории: примеры

15

• Проанализируйте деление на категории онлайн магазинов• http://www.barnesandnoble.com• http://www.amazon.com/• Какие схемы организации на них используются?• В чем разница? В чем сходство?

Упражнение

Названия категорий

• Чтобы правильно определить категории, необходимо сгруппировать содержание вокруг представлений пользователя о содержании и функциональности;

• Нет необходимости сразу придумывать категории названия — можно пока называть ее “Все что надо сделать со старым клиентом”, а позже переименовать в “Постоянные покупатели”. Категория остается той же, просто имя меняется на более удачное

16

Категории и пользователи:Технология сортирования карточек

• Один из способов точнее определить категории, использовать карточки с написанными на них содержанием;

• Например, пользователю дается 50 карточек, с кратким содержанием будущих страниц и предлагается рассортировать их на несколько смысловых групп. Также им предлагается назвать эти группы;

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

17

18

Source: http://redesign.cnm.edu/category/research/

Иерархии• Категории часто организуют иерархии, то есть, в древовидные

структуры.

• Примеры:

– Countries > USA > NY > New York City > Manhattan;

– Technology > Biotechnology.

19

20Источник: http://redesign.cnm.edu/category/research/

Пример деления на категории:www.bestcellars.com — деление по вкусам

21

Проверка названий категорий

• Проверить правильность названий категорий можно также с помощью карточек —предложить людям разложить карточки с содержанием по категориям с заданными именами.

22

Copyright http://www.gogamestorm.com/?p=346

Проверка названий категорий

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

23Copyright http://sixrevisions.com/usabilityaccessibility/card-sorting/

Задание 12: Создание карточек с заголовками и категориями

• Пользуясь сценариями придумайте заголовки и категории необходимые вашим персонажам;

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

• Подпишите названия карточек и краткую функциональность;

• Сфотографируйте результат вашей работы и выложите в блог;

• Принесите карточки с собой на следующее занятие;• На всякий случай имейте несколько пустых

карточек, которые можно будет заполнить от руки

24

Схемы организации

25

Схемы организации

• Выбор практичной схемы организации —базовая задача информационной архитектуры;

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

• Хотя схемы организации являются фундаментом строительства сайта, им часто не уделяется достаточно внимания

26

Сравните навигациюa) Сайт Apple

27

Сравните навигациюb) Сайт Microsoft

28

29

В чем разница в навигации на этих сайтах?

30

В чем разница в навигации на этих сайтах?

Примеры некоторых возможностей организации информации:

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

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

3. Тематическая — большое количество содержания предполагает деление информации по тематикам;

4. Повременная — сайты с чувствительной ко времени информацией, например, новостные порталы, получат выгоду от схемы основанной на времени;

5. Многогранная — позволяет пользователю самому комбинироватьсхемы организаций

31

Пример: Hewlett-Packard, HP.COM —Какие схемы организации здесь используются?

32

Пример: Hewlett-Packard, HP.COM

33

Пример: Hewlett-Packard, HP.COM

34

Сепарация схем организации

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

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

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

35

36

Единообразие

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

37

Пример визуальной интерпретации

Домашняя страница для частных клиентов

Домашняя страница для бизнес-клиентов

38

Многогранная схемаклассификаций (multifaceted search)• Многогранная схема классификаций означает, что

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

• Иногда обычная иерархия не может удовлетворить пользователя. Например, покупка иллюстрации для сайта. Как лучше организовать поиск — по типу лицензии (свободный от выплат, лицензированный), по типу иллюстрации (фото, рисунок), по типу изображения (цветное, черно-белое)?

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

39

indexstock.com — пример поиска с настраиваемыми пользователем критериями

40

Другой пример многогранной классификации — auto24.ee

41

Пример: — Редизайн ibm.com в 2001 году с учетом целей пользователей

42

2000

2001

Пример: — Редизайн ibm.com в 2001 году с учетом целей пользователей

43

2000

2001

Пользователя мало интересует

состояние индустрии

Пользователь не

воспринимает Продукцию и

Консультации, как разные

вещи

Кнопка Новости удалена, новости

вынесены в главное содержание

страницы

Пример: — Редизайн ibm.com в 2001 году с учетом целей пользователей

44

2000

2001

Пользователя не беспокоит

компания, его беспокоят свои

личные задачи

Упростился поиск по сайту

После падения ИТ рынка в 2000

году, потребовалось больше

внимания уделять имеющимся

пользователям, чтобы их не

потерять. В связи с этим

появляется кнопка My Account.

Упражнение

45

Какие недостатки

можно выявить в

данном примере

навигации?

Запутывающие

названия действий.

Продублирована

функция поиска

Кнопка помощи весьма непривычна,

на веб сайтах лучше использовать

контекстно-зависимую помощь.

Грамматически не

выдержанные заголовки

— Продажа и

Просматривать

46

Пример редизайна, в котором учитываются

указанные недостатки, однако не уделяется

внимание целям бизнеса и пользователей.

47

Пример редизайна, в котором учитываются

цели бизнеса и пользователей. Выбрана схема

организации, основанная на аудитории.

Просто добавьте дополнительную функцию

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

• Примерами могут быть: Рекламный раздел на первой странице;

Баннер-прокрутка, указывающий на новые возможности сайта;

Ссылки к критически важным страницам сайта

48

Дополнительные функции на ebay

49

Задание 13:Выбор схем организации

• Используя сценарии, потребности пользователя и созданные категории, выберите для каждого персонажа одну-две схемы организации;

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

50