Принципы организации

навигации на веб-сайтах и в ПОнавигации на веб-сайтах и в ПО

UX Russia

Денис Бесков

Обзор семинара

1. Задачи навигации

2. 5 принципов организации навигации

3. Анализ примеров на выбранные

принципыпринципы

4. Способы комбинирования

5. Выводы о сильных слабых сторонах

6. Рекомендации по применению

2

Задачи навигации

1. Обзор — Что здесь есть?

2. Обучение — Что здесь можно делать и

как?

3. Ориентирование — Где я и куда надо 3. Ориентирование — Где я и куда надо

пойти?

4. Быстрый доступ — Как мне попасть в?

3

Принципы навигации

Принцип навигации в контексте данного

семинара — это выбор способа

именования навигационных меток и узлов

(Labeling, Naming)(Labeling, Naming)

4

1. Тематический принцип

• Тема

– наиболее классический и широкомасштабный

принцип

• Узлы и навигационные метки:• Узлы и навигационные метки:

– Области деятельности

• Пример:

– История, Журналистика, Авто, Образование

5

2. Категориальный принцип

• Категория

– второй по частоте встречаемости принцип

• Узлы и навигационные метки:

– Категории, классы объектов– Категории, классы объектов

• Примеры:

– Статьи, Дискуссии, Фотографии, Мотоциклы,

Кинотеатры

6

3. Операционный принцип

• Операция

– описание действия

• Узлы и навигационные метки:

– простые операции и наборы операций– простые операции и наборы операций

• Примеры:

– Отправить письмо, Разместить файл, Оформить

заказ

7

4. Ролевой принцип

• Роль

– организация навигации по принципу

разделения ролей

• Пример:• Пример:

– Для сайта вуза: Абитуриент, Родитель, Студент,

Преподаватель, Сотрудник.

8

5. Проблемный принцип

• Проблема (Ситуация)

– организация навигации с опорой на какую-

либо проблему или жизненную ситуацию

пользователяпользователя

• Узлы и навигационные метки:

– формулировки ситуаций

• Примеры:

– Поход в кино, Ужин с друзьями, Развод

9

5 принципов

1. Тематический

2. Категориальный

3. Операционный

4. Ролевой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. Выделите Проблемы (Ситуации). Определите применимость к Категориям

2. Выделите Проблемы (Ситуации). Определите применимость к Категориям

(Организовать тусу, Съездить за продуктами, Отдохнуть на природе, Проконсультироваться, Найти квартиру)

3. Добавьте Операции в рамках Проблем

(Планирование события, Оповещение, Поиск и т.д.)

44

Спасибо!

Заходите, читайте, пишите:

http://beskov.ru

http://beskov.livejournal.com

Gtalk/Skype: denis.beskov

45