06. web design

Введение в Пользовательский Опыт

Лекция 6, Информационная архитектура

Vladimir Tomberg, PhD

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

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

Октябрь 2014

Pic

ture

sou

rce:

htt

p://

user

cent

ered

cont

ent.

com

Информационная архитектура

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

• Критичными концептами для организации веб сайтов являются:1. Схемы организации;2. Категории;3. Заголовки

2

Информационная архитектура

3

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

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

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

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

4

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

5

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

6

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

7

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

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

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

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

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

8

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

9

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

10

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

11

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

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

12

Категории

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

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

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

13

14

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

15

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

Упражнение

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

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

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

16

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

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

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

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

17

18

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

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

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

20

Проверка названий категорий • Конечной целью

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

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

Проверка названий категорий • Проверить правильность

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

22

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

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

структуры.• Примеры:

– Countries > USA > NY > New York City > Manhattan;– Technology > Biotechnology.

23

Заголовки

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

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

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

24

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

25

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

26

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

27

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

28

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

29

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

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

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

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

30

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

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

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

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

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

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

32

От IA к дизайну

33

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

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

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

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

34

35

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

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

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

36

37

htt

p:/

/ww

w.b

arn

esa

nd

noble

.com

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

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

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

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

38

Упражнение

39

Какие недостатки можно выявить в данном примере навигации?

Запутывающие названия действий.

Продублирована функция поиска

Кнопка помощи весьма непривычна, на веб сайтах лучше использовать контекстно-зависимую помощь.

Грамматически не выдержанные заголовки — Продажа и Просматривать

40

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

41

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

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

42

2000

2001

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

43

2000

2001

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

Пользователь не воспринимает Продукцию и Консультации, как разные вещи

Кнопка Новости удалена, новости вынесены в главное содержание страницы

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

44

2000

2001

Пользователя не беспокоит компания, его беспокоят свои личные задачи

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

После падения ИТ рынка в 2000 году, потребовалось больше внимания уделять имеющимся пользователям, чтобы их не потерять. В связи с этим появляется кнопка My Account.

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

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

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

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

45

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

46

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

47

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

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

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

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

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

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

48

49

Карты сайта

Несколько мыслей о картах сайта

• Карты сайта для IA — это не карты сайта для пользователей, которые он может найти на веб сайте (визуальные или XML);

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

• Работа IA заключается не столько в рисовании карт для иллюстрации структуры (это простое дело), сколько в поиске правильной структуры.

50

Пример: карта сайта для пользователей

51

Карты сайта и взаимодействие

• Карты сайта предназначены для коммуникации, а не для украшения офиса;

• Нет стандартных карт сайтов, они зависят от типа проекта и структуры команды;

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

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

52

Концептуальная карта сайта (высокоуровневая)

• Концептуальные карты сайта не отображают все страницы сайта, а показывают общую структуру. Они полезны на первоначальной стадии проекта.

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

взаимодействуют с сайтом53

Пример концептуальной карты сайта

Домашняястраница

Зашел в систему?

Только подписчики

Регистрация / вход

Последние статьи

Новости

Архив статей

Документация

54

Классическая карта сайта

• Классическая карта сайта показывает все страницы сайта;

• Если имеется множество страниц одного типа (новости, статьи), то показывают только одну;

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

55

Пример:Карта сайта со всеми гиперссылками

56

Пример: Карта сайта только с иерархическими связями

57

Глубина сайта• Карта сайта обычно показывает глубину сайта —

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

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

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

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

58

При

мер

сай

та с

пло

ской

нав

игац

ией

59

Пример карты сайта с плоской навигацией (малой глубиной)

60

Пример карты сайта с большой глубиной

Home

All articles All pictures

Articles at price First picture Second pictureFree articles

First eight Second eight

9

10

11

12

13

14

15

16

1

2

3

4

5

6

7

861

Правило двух щелчков• Часто встречается мнение, что должна иметься

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

Общее количество страниц для меню разного размера и уровней вложения.

Количество пунктов в меню

Количество уровней вложения

5 7 8 10

1 5 7 8 10

2 25 49 64 100

3 125 343 512 1000

62

Требования к картам сайта

• Каждая страница сайта должна иметь собственный идентификатор — номер или название страницы;

• В зависимости от использования сайта можно добавлять разную информацию, в частности: Страницы, имеющие особое значение для

программиста; Уровень доступа — какие страницы доступны только

подписчикам; Не HTML страницы, например, Flash, PDF; Тип содержания страницы — статья, обзор, форма; Какой тип навигации используется на странице.

63

Инструментарий

• Для построения карт сайтов можно использовать разные инструменты. Подойдут векторные редакторы: Corel Draw, Illustrator, Freehand. Также можно воспользоваться встроенными средствами MS Office;

• Существуют и специальные инструменты — ConceptDraw, Inspiration, но самым популярным у информационных архитекторов стал MS Visio;

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

64

Встроенные в Visio наборы символов (stencils) для проектирования сайта

• Концептуальные символы • Символы для карты сайта65

Наборы символов от третьих разработчиков

66

Изометрические карты• Изометрические

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

• Этот подход прочно базируется на нуждах пользователя и дает отличное представление о сайте и его использовании

67

Пример набора изометрических символов

68

Изометрическая концептуальная карта сайта

69

Таблицы со списками содержания• Таблицы со списками содержания являются

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

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

70

Автоматическая конвертация таблиц содержания в карту сайта

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

• Описание нескольких методик на английском языке можно получить по адресу:

71http://boxesandarrows.com/the-lazy-ias-guide-to-making-sitemaps/

Задание на дом: Создание таблицы содержания и карт сайта

• Создать две карты сайта — концептуальную и классическую;

• Создать таблицу содержания;• При создании использовать следующую

последовательность:1. Основываясь на имеющихся сценариях строим концептуальную

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

строим классическую карту сайта. Используйте любой удобный инструмент описанный в лекции

72