SlideShare a Scribd company logo
1 of 49
Про ИА
Визуальные сценарии
и объектно-информационная модель
Никита Ефимов в гостях у e-Legion (19 июля 2017)
Никита Ефимов
О чём сегодня поговорим
• Проблемы перехода от этапа анализа к проектированию
• Информационная архитектура и модели поиска
• Визуальные сценарии
• Объектно-информационная модель
Мы слишком нетерпеливы
Сразу прыгаем “пилить” интерфейс
Тут и так всё понятно, чё время зря
тратить…“
Many designers
Бросаемся от идеи к деталям
Мы часто тратим силы на “игры” с
позиционированием UI-элементов,
зачастую не понимая приоритетов
информации для пользователей…
“
Designers don't search for a solution until
they have determined the real problem, and
even then, instead of solving that problem, they
stop to consider a wide range of potential
solutions. Only then they will converge upon
their proposal.
“
Donald Norman
Ощущение магии
при переходе от аналитики к интерфейсам
Так воспринимается
Сразу вопросы к интерфейсу
Инф. Архитектура
и разные модели поиска
Всё дело в информации
Информация
Информация
Информация
Информация
Donna Spencer
ИА отвечает за:
• Организацию информации (объектов)
• Их (объектов) четкое описание
• Предоставление человеку способов до
этих объектов добраться
Ключевые проблемы
• Всегда есть больше одного способа организации
информации. И не всегда ясно, какой из них лучше
• У людей разные цели и способы добраться до информации
• У людей обычно разное представление о том, где и какую
информацию надо искать (и как её описать)
• Кто-то знает больше, а кто-то – меньше (на “входе” и о
предметной области)
Мы всегда в поиске
Заблуждения
“Классическая” модель
Robertson, 1977
(http://www.emeraldinsight.com/doi/abs/10.1108/eb026639)
Информ.
потребность
Поисковый
запрос
Сравнение
Объект
Представление
объекта
Стандартная модель
Вербальная
форма
Поисковый
запрос
Поисковый
движок
Анализ
результатов
Модификация
запроса
Объекты
Информ.
потребность
Задача
Marchionini, 1995
(http://www.amazon.com/Information-Electronic-Environments-Human-Computer-Interaction/dp/0521586747)
Больше подробностей
2015.profsoux.ru/papers/120/
slideshare.net/nefimov/ss-47795095
Разные режимы
Donna Spencer
• Знает, что ищет
• Примерно знает (исследует)
• Не знает, что именно нужно
• Повторный поиск
Режимы поиска:
Осмысленные шаги вместо магии
vs
Визуальные сценарии
Что это такое?
Не про это…
Важные особенности
• Описываем взаимодействие с системой, но не оперируем
интерфейсом
• Можно составлять как для “всех пользователей сразу”,
так и для каждой группы отдельно
• Можно рассматривать как высокоуровневые сценарии,
так и конкретные точечные
1. Первоначальная визуализация
1. Фиксируем все шаги
• основной путь
• возможные отклонения
• переходные состояния
2. Разбираем каждый шаг
• Что пользователь должен найти/сделать, чтобы двинуться
дальше?
• Какие действия он может выполнять в рамках этого шага?
• Какие есть ограничения (привычки, контекст, технические и т.д.)?
• Куда он может “свернуть” с этого шага и почему (чего ему не
хватает)?
• Что может послужить причиной прекращения выполнения задачи?
Пример
Список листов
рассылки
Детальное по
листу рассылки Поиск и
добавление
участника
Список листов
рассылки
Не нашел
Нужно поискать
Нашел
Сценарий “Добавление пользователей к списку рассылки”
Не тот лист
Пример
Детальное по листу
рассылки
• Убедиться, что это тот самый лист рассылки
• Убедиться, что пользователя тут ещё нет
• Добавить нового пользователя
• Поискать конкретного пользователя
• Не смог добавить пользователя
• Пользователь не был найден (во время добавления)
• Слишком много однофамильцев, не смог различить
Цели:
Почему может прекратить:
Возможные действия:
2. Проверка входов и выходов
• Всегда ли пользователь начинает свой сценарий именно
так?
• С какой информацией человек пришёл?
• Зачем он может “выйти” из сценария и вернуться
заново?
• Какие проблемы могут возникнуть во время перехода?
• В каком “режиме” поиска он сейчас находится?
• Продолжается ли сценарий вне системы?
Продолжаем пример
Проверка
работоспособности
Поиск и
добавление
участника
Вне системы
Продолжаем пример
Список листов
рассылки
Добавить конкретного
человека в лист
рассылки
Добавить нового
сотрудника в
несколько листов
Вопрос в Telegram:
Почему Васе не
приходят письма из
“лидских” рассылок
Пример
Список листов
рассылки
Детальное по
листу рассылки Поиск и
добавление
участника
Список листов
рассылки
Сценарий: “Добавить нового сотрудника в несколько листов
рассылки”
Проверка
работоспособности
И так много раз
3. Оптимизация шагов
• Можно ли упростить какие-либо шаги?
• Можно ли изменить последовательность шагов?
• Можно ли уменьшить количество переходов?
Что дальше?
• Хорошая основа для проработки навигационной модели
интерфейса
• Можно начинать “накладывать” интерфейс и разбивать
по состояниям
• Объединение карт для разных групп пользователей
Срок жизни артефактов
• Можно пытаться делать общую карту всех сценариев, но
это сложно
• Основа для проработки интерфейсов в рамках
конкретной задачи
• Можно сохранять карты для последующих сверок, но
поддерживать их в актуальном состоянии довольно
сложно
Объектно-информационная
модель
Нас окружает информация
1. Основная информация
То, что ищет пользователь для решения своей задачи
2. Вспомогательная информация
Дополнительная информация, которая помогает принять решение
3. “Нажималки”
То, что производит определённое действие с информацией или помогают
пользователю двигаться дальше
Как формировать модель
• Что (какую информацию) человек ищет?
Т.е. какие объекты он хочет найти.
• Какая дополнительная информация ему нужна?
Т.е. какие атрибуты у объекта ему могут пригодиться.
• Что он с этими объектами хочет сделать?
• Как много таких объектов может быть? Сколько реально
нужно пользователю?
• В каком виде эти объекты могут быть представлены?
+ Расставляем приоритеты у информации!!!
“Карточки” объектов
Объект: Заявка
Атрибуты:
• Краткое описание
• Срок исполнения
• Статус
• Уведомление о просрочке
• Тип заявки
• Кол-во связанных сущностей
• Ответственные
Действия:
• Просмотреть
• Сменить ответственного
• Эскалировать
• Архивировать
• Изменить статус
Объект: Ответственный
Атрибуты:
• ФИО
• Фото
• Подразделение
• Должность
• Линия поддержки
• Телефон
• Email
• Процент загрузки
• Индикатор “горящих” задач
Действия:
• Написать сообщение
• Посмотреть загрузку
• Посмотреть подробную
информацию о человеке
На основании чего создавать
• На базе визуальных сценариев
• На базе use cases, требований и других “описательных”
форматов
• На уровне эмпатии
Когда других вариантов не осталось
• Менеджер заходит в систему и выбирает нужный список рассылки
На базе описательных форматов
Сценарий “Добавление пользователей к списку рассылки”
После того, как менеджер создал список рассылки для нового проекта “Норка
Тушканчика”, ему необходимо добавить пользователей.
• Менеджер добавляет каждого пользователя (либо сразу всех) к проектному
листу
• Менеджер отправляет тестовое сообщение на проектный список рассылки
для проверки корректной работоспособности списка. В данном сообщении
менеджер просит каждого получившего это письмо написать ответ в этот
список рассылки. Этим менеджер проверяет возможность пользователей
как получать, так и писать письма на проектный лист.
Разные представления объектов
В чём ценность
• Формирование интерфейса на базе понимания требуемой
пользователю информации
• Осмысленная аргументация
• какие визуальные объекты нужны и как их упорядочить
• на чём сделать акцент
• какое использовать именование
• для себя: при проработке вариантов
• для других: при защите своего решения
• Упрощение передачи задачи дальше (или приёмки)
• постановка на отрисовку интерфейса
• разработке в качестве основы для объектной модели
• для проверки решения
Срок жизни артефактов
• Обновлять и поддерживать в актуальном состоянии на
протяжении всего проекта
• Переиспользование готовых “карточек” в других
состояниях
Object-oriented UX
alistapart.com/article/object-oriented-ux
alistapart.com/article/ooux-a-
foundation-for-interaction-design
Откуда копать:
Но не впадать в крайности!!!
Если подытожить…
Если подытожить
• Люди по-разному ищут одну и ту же информацию
• Минимизируйте количество “магии” в вашем процессе с
помощью разных инструментов
• Наша задача корректно упорядочить информацию в
интерфейсе и предоставить лёгкий способ до неё
добраться и что-то с ней сделать
Ну вот и все…
slideshare.net/nefimov
efimov.nikita@gmail.com
fb.com/nikita.efimov
For graphics thanks to freepik.com

More Related Content

What's hot

Как UX-специалист делился своими инструментами с agile-командами
Как UX-специалист делился своими инструментами с agile-командамиКак UX-специалист делился своими инструментами с agile-командами
Как UX-специалист делился своими инструментами с agile-командами
Nikita Efimov
 
Как каждому продакту научиться проводить пользовательские интервью (Георгий Б...
Как каждому продакту научиться проводить пользовательские интервью (Георгий Б...Как каждому продакту научиться проводить пользовательские интервью (Георгий Б...
Как каждому продакту научиться проводить пользовательские интервью (Георгий Б...
PCampRussia
 
Елена Махно - «UX исследования на всех этапах разработки продукта»
Елена Махно - «UX исследования на всех этапах разработки продукта»Елена Махно - «UX исследования на всех этапах разработки продукта»
Елена Махно - «UX исследования на всех этапах разработки продукта»
ПрофсоUX
 
Гибкое прототипирование для гибкой разработки (Максим Гапонов)
Гибкое прототипирование для гибкой разработки (Максим Гапонов)Гибкое прототипирование для гибкой разработки (Максим Гапонов)
Гибкое прототипирование для гибкой разработки (Максим Гапонов)
Ontico
 
Мастер-класс по ЮТ для Британки
Мастер-класс по ЮТ для БританкиМастер-класс по ЮТ для Британки
Мастер-класс по ЮТ для Британки
Ksenia Sternina
 
филиппов Material design для проектирования продуктов
филиппов   Material design для проектирования продуктовфилиппов   Material design для проектирования продуктов
филиппов Material design для проектирования продуктов
Magneta AI
 
У семи нянек дитя без глаза? Пара лет проблем и решений в UX зарубежного веб-...
У семи нянек дитя без глаза? Пара лет проблем и решений в UX зарубежного веб-...У семи нянек дитя без глаза? Пара лет проблем и решений в UX зарубежного веб-...
У семи нянек дитя без глаза? Пара лет проблем и решений в UX зарубежного веб-...
ПрофсоUX
 

What's hot (20)

Место аналитики в процессе проектирования интерфейса
Место аналитики в процессе проектирования интерфейсаМесто аналитики в процессе проектирования интерфейса
Место аналитики в процессе проектирования интерфейса
 
Как давать обратную связь
Как давать обратную связьКак давать обратную связь
Как давать обратную связь
 
Как UX-специалист делился своими инструментами с agile-командами
Как UX-специалист делился своими инструментами с agile-командамиКак UX-специалист делился своими инструментами с agile-командами
Как UX-специалист делился своими инструментами с agile-командами
 
Взаимозаменяемость и уникальность UX-специалиста и аналитика
Взаимозаменяемость и уникальность UX-специалиста и аналитикаВзаимозаменяемость и уникальность UX-специалиста и аналитика
Взаимозаменяемость и уникальность UX-специалиста и аналитика
 
Выбор метода UX исследования - UXPeople 2013
Выбор метода UX исследования - UXPeople 2013Выбор метода UX исследования - UXPeople 2013
Выбор метода UX исследования - UXPeople 2013
 
Опыт выстраивания процесса Product Discovery
Опыт выстраивания процесса Product DiscoveryОпыт выстраивания процесса Product Discovery
Опыт выстраивания процесса Product Discovery
 
Как каждому продакту научиться проводить пользовательские интервью (Георгий Б...
Как каждому продакту научиться проводить пользовательские интервью (Георгий Б...Как каждому продакту научиться проводить пользовательские интервью (Георгий Б...
Как каждому продакту научиться проводить пользовательские интервью (Георгий Б...
 
Елена Махно - «UX исследования на всех этапах разработки продукта»
Елена Махно - «UX исследования на всех этапах разработки продукта»Елена Махно - «UX исследования на всех этапах разработки продукта»
Елена Махно - «UX исследования на всех этапах разработки продукта»
 
Интервью с пользователями
Интервью с пользователямиИнтервью с пользователями
Интервью с пользователями
 
Хитрости UX-дизайна: ключевые лайфхаки, которые должен знать разработчик
Хитрости UX-дизайна: ключевые лайфхаки, которые должен знать разработчикХитрости UX-дизайна: ключевые лайфхаки, которые должен знать разработчик
Хитрости UX-дизайна: ключевые лайфхаки, которые должен знать разработчик
 
Гибкое прототипирование для гибкой разработки (Максим Гапонов)
Гибкое прототипирование для гибкой разработки (Максим Гапонов)Гибкое прототипирование для гибкой разработки (Максим Гапонов)
Гибкое прототипирование для гибкой разработки (Максим Гапонов)
 
UX research in Yandex
UX research in YandexUX research in Yandex
UX research in Yandex
 
Концепция проекта как инженерный документ — основа успеха проекта
Концепция проекта как инженерный документ — основа успеха проектаКонцепция проекта как инженерный документ — основа успеха проекта
Концепция проекта как инженерный документ — основа успеха проекта
 
Мастер-класс по ЮТ для Британки
Мастер-класс по ЮТ для БританкиМастер-класс по ЮТ для Британки
Мастер-класс по ЮТ для Британки
 
филиппов Material design для проектирования продуктов
филиппов   Material design для проектирования продуктовфилиппов   Material design для проектирования продуктов
филиппов Material design для проектирования продуктов
 
У семи нянек дитя без глаза? Пара лет проблем и решений в UX зарубежного веб-...
У семи нянек дитя без глаза? Пара лет проблем и решений в UX зарубежного веб-...У семи нянек дитя без глаза? Пара лет проблем и решений в UX зарубежного веб-...
У семи нянек дитя без глаза? Пара лет проблем и решений в UX зарубежного веб-...
 
Никита Ефимов Lead UX Architect, New Cloud Technologies
Никита Ефимов Lead UX Architect, New Cloud Technologies Никита Ефимов Lead UX Architect, New Cloud Technologies
Никита Ефимов Lead UX Architect, New Cloud Technologies
 
Аналитики и UX
Аналитики и UXАналитики и UX
Аналитики и UX
 
пр работа с информацией 2014 09
пр работа с информацией 2014 09пр работа с информацией 2014 09
пр работа с информацией 2014 09
 
Как и когда использовать айтрекер на юзабилити тестировании
Как и когда использовать айтрекер на юзабилити тестированииКак и когда использовать айтрекер на юзабилити тестировании
Как и когда использовать айтрекер на юзабилити тестировании
 

Similar to Про ИА. Визуальные сценарии и объекто-информационная модель.

исследование пользователей электронных сми
исследование пользователей электронных смиисследование пользователей электронных сми
исследование пользователей электронных сми
Eugene Kulakov
 
Дмитро Суслов. Соціальний інтранет - новий формат внутрішньо корпоративних ко...
Дмитро Суслов. Соціальний інтранет - новий формат внутрішньо корпоративних ко...Дмитро Суслов. Соціальний інтранет - новий формат внутрішньо корпоративних ко...
Дмитро Суслов. Соціальний інтранет - новий формат внутрішньо корпоративних ко...
Lviv Startup Club
 
Как правильно составить структуру сайта, Дмитрий Сатин, лекция в Школе вебмас...
Как правильно составить структуру сайта, Дмитрий Сатин, лекция в Школе вебмас...Как правильно составить структуру сайта, Дмитрий Сатин, лекция в Школе вебмас...
Как правильно составить структуру сайта, Дмитрий Сатин, лекция в Школе вебмас...
Yandex
 
CodeFest, июль 2012. Карпов М. — Пользователи: сигнал из космоса
CodeFest, июль 2012. Карпов М. — Пользователи: сигнал из космосаCodeFest, июль 2012. Карпов М. — Пользователи: сигнал из космоса
CodeFest, июль 2012. Карпов М. — Пользователи: сигнал из космоса
CodeFest
 
Консалтинг высоконагруженных web систем
Консалтинг высоконагруженных web системКонсалтинг высоконагруженных web систем
Консалтинг высоконагруженных web систем
Media Gorod
 
10 основных метрик для анализа вашего сайта - 1.12.2014
10 основных метрик для анализа вашего сайта - 1.12.201410 основных метрик для анализа вашего сайта - 1.12.2014
10 основных метрик для анализа вашего сайта - 1.12.2014
O K
 
Human Centered Design
Human Centered DesignHuman Centered Design
Human Centered Design
guvarov
 
5 alina petrenko - key requirements elicitation during the first contact wi...
5   alina petrenko - key requirements elicitation during the first contact wi...5   alina petrenko - key requirements elicitation during the first contact wi...
5 alina petrenko - key requirements elicitation during the first contact wi...
Ievgenii Katsan
 
презентация 6 июля 2012
презентация 6 июля 2012презентация 6 июля 2012
презентация 6 июля 2012
Sergiy Gladkyy
 
Четыре взгляда на Cradle
Четыре взгляда на CradleЧетыре взгляда на Cradle
Четыре взгляда на Cradle
AlekseyTimof
 

Similar to Про ИА. Визуальные сценарии и объекто-информационная модель. (20)

Mobile UI @Levelapp.me
Mobile UI @Levelapp.meMobile UI @Levelapp.me
Mobile UI @Levelapp.me
 
исследование пользователей электронных сми
исследование пользователей электронных смиисследование пользователей электронных сми
исследование пользователей электронных сми
 
Дмитро Суслов. Соціальний інтранет - новий формат внутрішньо корпоративних ко...
Дмитро Суслов. Соціальний інтранет - новий формат внутрішньо корпоративних ко...Дмитро Суслов. Соціальний інтранет - новий формат внутрішньо корпоративних ко...
Дмитро Суслов. Соціальний інтранет - новий формат внутрішньо корпоративних ко...
 
Зачем и как изучать свою аудиторию
Зачем и как изучать свою аудиториюЗачем и как изучать свою аудиторию
Зачем и как изучать свою аудиторию
 
Как правильно составить структуру сайта, Дмитрий Сатин, лекция в Школе вебмас...
Как правильно составить структуру сайта, Дмитрий Сатин, лекция в Школе вебмас...Как правильно составить структуру сайта, Дмитрий Сатин, лекция в Школе вебмас...
Как правильно составить структуру сайта, Дмитрий Сатин, лекция в Школе вебмас...
 
Jpoint 2017 - как это было (обзор конференции)
Jpoint 2017 - как это было (обзор конференции)Jpoint 2017 - как это было (обзор конференции)
Jpoint 2017 - как это было (обзор конференции)
 
Варианты использования. Введение
Варианты использования. ВведениеВарианты использования. Введение
Варианты использования. Введение
 
CodeFest, июль 2012. Карпов М. — Пользователи: сигнал из космоса
CodeFest, июль 2012. Карпов М. — Пользователи: сигнал из космосаCodeFest, июль 2012. Карпов М. — Пользователи: сигнал из космоса
CodeFest, июль 2012. Карпов М. — Пользователи: сигнал из космоса
 
Консалтинг высоконагруженных web систем
Консалтинг высоконагруженных web системКонсалтинг высоконагруженных web систем
Консалтинг высоконагруженных web систем
 
Интерактивные Прототипы или «Игра в Имитацию»
Интерактивные Прототипы  или «Игра в Имитацию»Интерактивные Прототипы  или «Игра в Имитацию»
Интерактивные Прототипы или «Игра в Имитацию»
 
1С-Битрикс: Корпоративный портал
1С-Битрикс: Корпоративный портал1С-Битрикс: Корпоративный портал
1С-Битрикс: Корпоративный портал
 
10 основных метрик для анализа вашего сайта - 1.12.2014
10 основных метрик для анализа вашего сайта - 1.12.201410 основных метрик для анализа вашего сайта - 1.12.2014
10 основных метрик для анализа вашего сайта - 1.12.2014
 
Искусство управления SharePoint
Искусство управления SharePointИскусство управления SharePoint
Искусство управления SharePoint
 
"Пользователи: сигнал из космоса". CodeFest mini 2012
"Пользователи: сигнал из космоса". CodeFest mini 2012"Пользователи: сигнал из космоса". CodeFest mini 2012
"Пользователи: сигнал из космоса". CodeFest mini 2012
 
Human Centered Design
Human Centered DesignHuman Centered Design
Human Centered Design
 
Bitrix24
Bitrix24Bitrix24
Bitrix24
 
5 alina petrenko - key requirements elicitation during the first contact wi...
5   alina petrenko - key requirements elicitation during the first contact wi...5   alina petrenko - key requirements elicitation during the first contact wi...
5 alina petrenko - key requirements elicitation during the first contact wi...
 
презентация 6 июля 2012
презентация 6 июля 2012презентация 6 июля 2012
презентация 6 июля 2012
 
How to study your audience? End user research
How to study your audience? End user researchHow to study your audience? End user research
How to study your audience? End user research
 
Четыре взгляда на Cradle
Четыре взгляда на CradleЧетыре взгляда на Cradle
Четыре взгляда на Cradle
 

More from Nikita Efimov

Информационные персоны (как люди ищут информацию)
Информационные персоны (как люди ищут информацию)Информационные персоны (как люди ищут информацию)
Информационные персоны (как люди ищут информацию)
Nikita Efimov
 
Есть ли польза от CJM при отсутствии customer'ов (и услуг)
Есть ли польза от CJM при отсутствии customer'ов (и услуг) Есть ли польза от CJM при отсутствии customer'ов (и услуг)
Есть ли польза от CJM при отсутствии customer'ов (и услуг)
Nikita Efimov
 

More from Nikita Efimov (17)

CJM как дэшборд для продукта
CJM как дэшборд для продуктаCJM как дэшборд для продукта
CJM как дэшборд для продукта
 
3 способа проверки гипотез, когда у вас ещё ничего нет
3 способа проверки гипотез, когда у вас ещё ничего нет3 способа проверки гипотез, когда у вас ещё ничего нет
3 способа проверки гипотез, когда у вас ещё ничего нет
 
Персоны разные нужны. Персоны разные важны.
Персоны разные нужны. Персоны разные важны.Персоны разные нужны. Персоны разные важны.
Персоны разные нужны. Персоны разные важны.
 
Делаем человека лучшей версией себя
Делаем человека лучшей версией себяДелаем человека лучшей версией себя
Делаем человека лучшей версией себя
 
Impact Map & Feature Canvas. Как держать фокус на целях при внедрении новых фич.
Impact Map & Feature Canvas. Как держать фокус на целях при внедрении новых фич.Impact Map & Feature Canvas. Как держать фокус на целях при внедрении новых фич.
Impact Map & Feature Canvas. Как держать фокус на целях при внедрении новых фич.
 
Feature Сanvas. С чего начать работу над новой идеей.
Feature Сanvas. С чего начать работу над новой идеей.Feature Сanvas. С чего начать работу над новой идеей.
Feature Сanvas. С чего начать работу над новой идеей.
 
Унификация взаимодействия
Унификация взаимодействияУнификация взаимодействия
Унификация взаимодействия
 
Feature Canvas: How to Start Working on a New Feature [UX Salon'18]
Feature Canvas: How to Start Working on a New Feature [UX Salon'18]Feature Canvas: How to Start Working on a New Feature [UX Salon'18]
Feature Canvas: How to Start Working on a New Feature [UX Salon'18]
 
Feature Canvas: how to start working on a new feature [UXIstanbul'18]
Feature Canvas: how to start working on a new feature [UXIstanbul'18]Feature Canvas: how to start working on a new feature [UXIstanbul'18]
Feature Canvas: how to start working on a new feature [UXIstanbul'18]
 
Информационные персоны (как люди ищут информацию)
Информационные персоны (как люди ищут информацию)Информационные персоны (как люди ищут информацию)
Информационные персоны (как люди ищут информацию)
 
User story на UX-стероидах
User story на UX-стероидахUser story на UX-стероидах
User story на UX-стероидах
 
Есть ли польза от CJM при отсутствии customer'ов (и услуг)
Есть ли польза от CJM при отсутствии customer'ов (и услуг) Есть ли польза от CJM при отсутствии customer'ов (и услуг)
Есть ли польза от CJM при отсутствии customer'ов (и услуг)
 
UX Poland 2014: N.Efimov & Y. Vedenin - Playful design
UX Poland 2014: N.Efimov & Y. Vedenin - Playful designUX Poland 2014: N.Efimov & Y. Vedenin - Playful design
UX Poland 2014: N.Efimov & Y. Vedenin - Playful design
 
Проектируем играючи
Проектируем играючиПроектируем играючи
Проектируем играючи
 
Типичные ошибки юзабилити интернет-магазинов. Почему эти ошибки становятся пр...
Типичные ошибки юзабилити интернет-магазинов. Почему эти ошибки становятся пр...Типичные ошибки юзабилити интернет-магазинов. Почему эти ошибки становятся пр...
Типичные ошибки юзабилити интернет-магазинов. Почему эти ошибки становятся пр...
 
Особенности юзабилити-тестирования мобильных приложений
Особенности юзабилити-тестирования мобильных приложенийОсобенности юзабилити-тестирования мобильных приложений
Особенности юзабилити-тестирования мобильных приложений
 
Экспресс-проектирование для людей
Экспресс-проектирование для людейЭкспресс-проектирование для людей
Экспресс-проектирование для людей
 

Про ИА. Визуальные сценарии и объекто-информационная модель.

  • 1. Про ИА Визуальные сценарии и объектно-информационная модель Никита Ефимов в гостях у e-Legion (19 июля 2017)
  • 3. О чём сегодня поговорим • Проблемы перехода от этапа анализа к проектированию • Информационная архитектура и модели поиска • Визуальные сценарии • Объектно-информационная модель
  • 4. Мы слишком нетерпеливы Сразу прыгаем “пилить” интерфейс
  • 5. Тут и так всё понятно, чё время зря тратить…“ Many designers
  • 7. Мы часто тратим силы на “игры” с позиционированием UI-элементов, зачастую не понимая приоритетов информации для пользователей… “
  • 8. Designers don't search for a solution until they have determined the real problem, and even then, instead of solving that problem, they stop to consider a wide range of potential solutions. Only then they will converge upon their proposal. “ Donald Norman
  • 9. Ощущение магии при переходе от аналитики к интерфейсам
  • 11. Сразу вопросы к интерфейсу
  • 13. Всё дело в информации Информация Информация Информация Информация
  • 14. Donna Spencer ИА отвечает за: • Организацию информации (объектов) • Их (объектов) четкое описание • Предоставление человеку способов до этих объектов добраться
  • 15. Ключевые проблемы • Всегда есть больше одного способа организации информации. И не всегда ясно, какой из них лучше • У людей разные цели и способы добраться до информации • У людей обычно разное представление о том, где и какую информацию надо искать (и как её описать) • Кто-то знает больше, а кто-то – меньше (на “входе” и о предметной области)
  • 16. Мы всегда в поиске
  • 22. Donna Spencer • Знает, что ищет • Примерно знает (исследует) • Не знает, что именно нужно • Повторный поиск Режимы поиска:
  • 26. Важные особенности • Описываем взаимодействие с системой, но не оперируем интерфейсом • Можно составлять как для “всех пользователей сразу”, так и для каждой группы отдельно • Можно рассматривать как высокоуровневые сценарии, так и конкретные точечные
  • 27. 1. Первоначальная визуализация 1. Фиксируем все шаги • основной путь • возможные отклонения • переходные состояния 2. Разбираем каждый шаг • Что пользователь должен найти/сделать, чтобы двинуться дальше? • Какие действия он может выполнять в рамках этого шага? • Какие есть ограничения (привычки, контекст, технические и т.д.)? • Куда он может “свернуть” с этого шага и почему (чего ему не хватает)? • Что может послужить причиной прекращения выполнения задачи?
  • 28. Пример Список листов рассылки Детальное по листу рассылки Поиск и добавление участника Список листов рассылки Не нашел Нужно поискать Нашел Сценарий “Добавление пользователей к списку рассылки” Не тот лист
  • 29. Пример Детальное по листу рассылки • Убедиться, что это тот самый лист рассылки • Убедиться, что пользователя тут ещё нет • Добавить нового пользователя • Поискать конкретного пользователя • Не смог добавить пользователя • Пользователь не был найден (во время добавления) • Слишком много однофамильцев, не смог различить Цели: Почему может прекратить: Возможные действия:
  • 30. 2. Проверка входов и выходов • Всегда ли пользователь начинает свой сценарий именно так? • С какой информацией человек пришёл? • Зачем он может “выйти” из сценария и вернуться заново? • Какие проблемы могут возникнуть во время перехода? • В каком “режиме” поиска он сейчас находится? • Продолжается ли сценарий вне системы?
  • 32. Продолжаем пример Список листов рассылки Добавить конкретного человека в лист рассылки Добавить нового сотрудника в несколько листов Вопрос в Telegram: Почему Васе не приходят письма из “лидских” рассылок
  • 33. Пример Список листов рассылки Детальное по листу рассылки Поиск и добавление участника Список листов рассылки Сценарий: “Добавить нового сотрудника в несколько листов рассылки” Проверка работоспособности И так много раз
  • 34. 3. Оптимизация шагов • Можно ли упростить какие-либо шаги? • Можно ли изменить последовательность шагов? • Можно ли уменьшить количество переходов?
  • 35. Что дальше? • Хорошая основа для проработки навигационной модели интерфейса • Можно начинать “накладывать” интерфейс и разбивать по состояниям • Объединение карт для разных групп пользователей
  • 36. Срок жизни артефактов • Можно пытаться делать общую карту всех сценариев, но это сложно • Основа для проработки интерфейсов в рамках конкретной задачи • Можно сохранять карты для последующих сверок, но поддерживать их в актуальном состоянии довольно сложно
  • 38. Нас окружает информация 1. Основная информация То, что ищет пользователь для решения своей задачи 2. Вспомогательная информация Дополнительная информация, которая помогает принять решение 3. “Нажималки” То, что производит определённое действие с информацией или помогают пользователю двигаться дальше
  • 39. Как формировать модель • Что (какую информацию) человек ищет? Т.е. какие объекты он хочет найти. • Какая дополнительная информация ему нужна? Т.е. какие атрибуты у объекта ему могут пригодиться. • Что он с этими объектами хочет сделать? • Как много таких объектов может быть? Сколько реально нужно пользователю? • В каком виде эти объекты могут быть представлены? + Расставляем приоритеты у информации!!!
  • 40. “Карточки” объектов Объект: Заявка Атрибуты: • Краткое описание • Срок исполнения • Статус • Уведомление о просрочке • Тип заявки • Кол-во связанных сущностей • Ответственные Действия: • Просмотреть • Сменить ответственного • Эскалировать • Архивировать • Изменить статус Объект: Ответственный Атрибуты: • ФИО • Фото • Подразделение • Должность • Линия поддержки • Телефон • Email • Процент загрузки • Индикатор “горящих” задач Действия: • Написать сообщение • Посмотреть загрузку • Посмотреть подробную информацию о человеке
  • 41. На основании чего создавать • На базе визуальных сценариев • На базе use cases, требований и других “описательных” форматов • На уровне эмпатии Когда других вариантов не осталось
  • 42. • Менеджер заходит в систему и выбирает нужный список рассылки На базе описательных форматов Сценарий “Добавление пользователей к списку рассылки” После того, как менеджер создал список рассылки для нового проекта “Норка Тушканчика”, ему необходимо добавить пользователей. • Менеджер добавляет каждого пользователя (либо сразу всех) к проектному листу • Менеджер отправляет тестовое сообщение на проектный список рассылки для проверки корректной работоспособности списка. В данном сообщении менеджер просит каждого получившего это письмо написать ответ в этот список рассылки. Этим менеджер проверяет возможность пользователей как получать, так и писать письма на проектный лист.
  • 44. В чём ценность • Формирование интерфейса на базе понимания требуемой пользователю информации • Осмысленная аргументация • какие визуальные объекты нужны и как их упорядочить • на чём сделать акцент • какое использовать именование • для себя: при проработке вариантов • для других: при защите своего решения • Упрощение передачи задачи дальше (или приёмки) • постановка на отрисовку интерфейса • разработке в качестве основы для объектной модели • для проверки решения
  • 45. Срок жизни артефактов • Обновлять и поддерживать в актуальном состоянии на протяжении всего проекта • Переиспользование готовых “карточек” в других состояниях
  • 48. Если подытожить • Люди по-разному ищут одну и ту же информацию • Минимизируйте количество “магии” в вашем процессе с помощью разных инструментов • Наша задача корректно упорядочить информацию в интерфейсе и предоставить лёгкий способ до неё добраться и что-то с ней сделать
  • 49. Ну вот и все… slideshare.net/nefimov efimov.nikita@gmail.com fb.com/nikita.efimov For graphics thanks to freepik.com