05. web design
TRANSCRIPT
Веб Дизайн
Лекция 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/
Проверка названий категорий
• Проверить правильность названий категорий можно также с помощью карточек —предложить людям разложить карточки с содержанием по категориям с заданными именами.
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