1. Принципы организации
навигации на веб-сайтах и в ПО
UX Russia
Денис Бесков

2. Обзор семинара
1. Задачи навигации
2. 5 принципов организации навигации
3. Анализ примеров на выбранные
принципы
4. Способы комбинирования
5. Выводы о сильных слабых сторонах
6. Рекомендации по применению
2

3. Задачи навигации
1. Обзор — Что здесь есть?
2. Обучение — Что здесь можно делать и
как?
3. Ориентирование — Где я и куда надо
пойти?
4. Быстрый доступ — Как мне попасть в?
3

4. Принципы навигации
Принцип навигации в контексте данного
семинара — это выбор способа
именования навигационных меток и узлов
(Labeling, Naming)
4

5. 1. Тематический принцип
• Тема
– наиболее классический и широкомасштабный
принцип
• Узлы и навигационные метки:
– Области деятельности
• Пример:
– История, Журналистика, Авто, Образование
5

6. 2. Категориальный принцип
• Категория
– второй по частоте встречаемости принцип
• Узлы и навигационные метки:
– Категории, классы объектов
• Примеры:
– Статьи, Дискуссии, Фотографии, Мотоциклы,
Кинотеатры
6

7. 3. Операционный принцип
• Операция
– описание действия
• Узлы и навигационные метки:
– простые операции и наборы операций
• Примеры:
– Отправить письмо, Разместить файл, Оформить
заказ
7

8. 4. Ролевой принцип
• Роль
– организация навигации по принципу
разделения ролей
• Пример:
– Для сайта вуза: Абитуриент, Родитель, Студент,
Преподаватель, Сотрудник.
8

9. 5. Проблемный принцип
• Проблема (Ситуация)
– организация навигации с опорой на какую-
либо проблему или жизненную ситуацию
пользователя
• Узлы и навигационные метки:
– формулировки ситуаций
• Примеры:
– Поход в кино, Ужин с друзьями, Развод
9

10. 5 принципов
1. Тематический
2. Категориальный
3. Операционный
4. Ролевой
5. Проблемный
10

11. Примеры использования принципов
• Библиотеки
• Интернет-магазины
• Форумы
• Почта
• Блоги
• СМИ
• Тематические порталы
• Социальные сети
• Медиархив
11

12. Библиотеки: Lib.ru
12

13. Lib.ru
Используются:
• Тема + Категория
Не используются:
• Операции (1 и очевидная)
• Роли (1 основная)
• Проблемы (сложность выделения?)
13

14. Интернет-магазины: Amazon.com
•b
14

15. Amazon.com
Активно используются:
• Категория + Тема + Операции
Неактивно:
• Роли (Партнёры, Разработчики, Бизнесы,
Рекламодатели)
• Проблемы (Подарки)
15

16. Форумы: SQL.ru
16

17. SQL.ru
Активно используются:
• Тема + Проблемы
Слабо:
• Категории, Операции
Не используются:
• Роли
17

18. Почта: mail.rambler.ru
18

19. mail.rambler.ru
Активно используются:
• Категории (Входящие) + Операции (Написать)
Слабо:
• Проблемы (Поздр с др)
Не используются:
• Темы (Сервис)
• Роли (Неявно через Входящие/Исходящие)
19

20. Блоги: Я.ру
20

21. Я.ру
Активно используются:
• Категории (фотки, поздравления) + Операции
(поссориться)
Слабо:
• Проблемы (Найти новых друзей)
Не используются:
• Темы (Сервис)
• Роли (Неявно через Написание, Комментирование)
21

22. СМИ: lenta.ru
22

23. Lenta.ru
Активно используются:
• Темы (Политика, Экономика)
• Категории (Комментарии, Сюжеты)
Не используются:
• Роли, Проблемы, Операции
23

24. Тематический портал: ЮАО Москвы
24

25. UAO.mos.ru
Активно используются:
• Темы (Жильё, Экономика) — перегрузка!
• Категории (Организации, Телефоны)
Слабо:
• Проблемы (Переселение)
Не используются:
• Роли (зря, сильно сокращает пространство поиска)
• Операции (web 1.0, юридический клинч)
25

26. Возможные роли
• Родитель
• Домохозяйка/Домовладелец
• Школьник/Студент
• Пенсионер
• Автовладелец
26

27. Тематический портал: afisha.ru
27

28. afisha.ru
Активно используются:
• Категории (Рестораны, Концерты, Блоги)
Слабо:
• Темы (Дети, Театр)
• Проблемы (бизнес-ланч)
Не используются:
• Роли
• Операции
28

29. Возможные проблемные ситуации
• Кино:
– Сходить в кино с девушкой
– Сходить в кино с друзьями
– Сходить в кино с семьёй
– Сходить в ближайший кинотеатр
• Рестораны:
– Встреча друзей
– Деловой обед
– Романтический ужин
– Семейное празднество
– Поесть поблизости
29

30. Социальная сеть: МойКруг
30

31. Мой Круг
Активно используются:
• Категории (Вакансии, Услуги, Люди, Дневники,
Одноклассники)
• Операции (добавить вакансию, добавить услугу)
Слабо:
• Темы (круги по интересам, категории услуг, метки)
• Роли
Не используются:
• Проблемы (подобрать исполнителя, заработать денег)
31

32. Медиархив: Flickr.com
32

33. Flickr.com
Активно используются:
• Категории (наборы, архивы, теги, контакты)
• Операции (залить, организовать)
Слабо:
• Темы (теги), Проблемы (напечатать на бумаге)
Не используются:
• Роли
33

34. Типичные сочетания
Темы Категории Операции Роли Проблемы
Библиотеки
Интернет- ?
магазины
Форумы ? ?
Почта ?
Блоги ?
СМИ
Тематические ?
порталы
Социальные ? ?
сети
Медиархив ?
34

35. Виды комбинирования принципов
1. Последовательно
2. Параллельно
35

36. Устойчивые схемы
последовательного комбинирования
Веб-сайты:
• Темы > Категории > Операции
• Категории > Операции
ПО:
• Роли > Операции
Редкие случаи:
• Роли > Темы
• Роли > Проблемы
36

37. Темы: Сильные и слабые стороны
Тематический принцип
++
• Привычность
• Простота создания
--
• Высокая неоднозначность при больших
объёмах
• Неприменим для сервисов
37

38. Категории: Сильные и слабые стороны
Категориальный принцип
++
• Однозначность
• Простота создания
• Универсальность
--
• Слабая связь с задачей пользователя (Реестр
объектов), нужны дополнительные фильтры
38

39. Операции: Сильные и слабые стороны
Операционный принцип
++
• Прозрачность для пользователя
• Привычность (операции в десктоп ПО)
--
• Трудно наращивать (длинные метки)
• Большое количество нужно организовывать
• На информационных сайтах число операций
крайне мало — плохо подходят
39

40. Роли: Сильные и слабые стороны
Ролевой принцип
++
• Эффективно сокращают пространство выбора
• Относительная простота выбора пользователем
--
• Трудно выделить эффективные роли
• Нетривиально соотносить функционал/контент с
ролью
• Ко многим классам веб-продуктов мало применимо
— 1-2 роли
40

41. Проблемы: Сильные и слабые стороны
Проблемный принцип
++
• Очень эффективно сокращают пространство
выбора
• Соответствуют ментальной модели
пользователя
--
• Трудно выделить проблемы — нужно изучать
паттерны поведения и сегментацию спроса
41

42. Рекомендации по применению
Веб-сервис
(узкая группа функциональных задач, автоматизация деятельности):
1. Выделите Роли
(Менеджер проекта, Заказчик, Исполнитель)
2. Выделите Проблемы (Ситуации)
(Инициация проекта, Контроль хода проекта, Приёмка работа)
3. Добавьте Операции
(Создать проект, Назначить ответственного)
4. При необходимости — сгруппируйте в Категории
(Задачи, Заявки, Письма, Оповещения)
5. Темы (теги) как дополнение
42

43. Рекомендации по применению
Тематический портал:
1. Выделите Роли
(Эксперт, Поставщик услуг, Получатель услуг, Посредник)
2. Выделите Темы
(Работа, Быт, Помощь, Здоровье)
3. Выделите Проблемы (Ситуации)
(Выбрать заведение, Получить инструкцию, Избавиться от
ненужной вещи)
Совместите проблемы с темами
4. Добавьте Операции по вкусу (веб2.0?)
43

44. Рекомендации по применению
Социальная сеть:
1. Выделите социальные контексты в формате Категорий-Ролей
(Семья, Друзья, Родственники, Коллеги, Знакомые)
2. Выделите Проблемы (Ситуации). Определите применимость к
Категориям
(Организовать тусу, Съездить за продуктами, Отдохнуть
на природе, Проконсультироваться, Найти квартиру)
3. Добавьте Операции в рамках Проблем
(Планирование события, Оповещение, Поиск и т.д.)
44

45. Спасибо!
Заходите, читайте, пишите:
http://beskov.ru
http://beskov.livejournal.com
Gtalk/Skype: denis.beskov
45