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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Форумы: SQL.ru
16

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

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

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

Блоги: Я.ру
20

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

СМИ: lenta.ru
22

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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