Про ИА. Визуальные сценарии и объекто-информационная модель.
•
0 likes•420 views
- Проблемы перехода от этапа анализа к проектированию - Информационная архитектура и модели поиска - Визуальные сценарии - Объектно-информационная модель
Report
Share
Про ИА. Визуальные сценарии и объекто-информационная модель.
- 1. Про ИА Визуальные сценарии и объектно-информационная модель Никита Ефимов в гостях у e-Legion (19 июля 2017)
- 3. О чём сегодня поговорим • Проблемы перехода от этапа анализа к проектированию • Информационная архитектура и модели поиска • Визуальные сценарии • Объектно-информационная модель
- 4. Мы слишком нетерпеливы Сразу прыгаем “пилить” интерфейс
- 5. Тут и так всё понятно, чё время зря тратить…“ Many designers
- 6. Бросаемся от идеи к деталям
- 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. Сразу вопросы к интерфейсу
- 12. Инф. Архитектура и разные модели поиска
- 13. Всё дело в информации Информация Информация Информация Информация
- 14. Donna Spencer ИА отвечает за: • Организацию информации (объектов) • Их (объектов) четкое описание • Предоставление человеку способов до этих объектов добраться
- 15. Ключевые проблемы • Всегда есть больше одного способа организации информации. И не всегда ясно, какой из них лучше • У людей разные цели и способы добраться до информации • У людей обычно разное представление о том, где и какую информацию надо искать (и как её описать) • Кто-то знает больше, а кто-то – меньше (на “входе” и о предметной области)
- 16. Мы всегда в поиске
- 17. Заблуждения
- 21. Разные режимы
- 22. Donna Spencer • Знает, что ищет • Примерно знает (исследует) • Не знает, что именно нужно • Повторный поиск Режимы поиска:
- 23. Осмысленные шаги вместо магии vs
- 24. Визуальные сценарии Что это такое?
- 25. Не про это…
- 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. Срок жизни артефактов • Обновлять и поддерживать в актуальном состоянии на протяжении всего проекта • Переиспользование готовых “карточек” в других состояниях
- 46. Object-oriented UX alistapart.com/article/object-oriented-ux alistapart.com/article/ooux-a- foundation-for-interaction-design Откуда копать: Но не впадать в крайности!!!
- 47. Если подытожить…
- 48. Если подытожить • Люди по-разному ищут одну и ту же информацию • Минимизируйте количество “магии” в вашем процессе с помощью разных инструментов • Наша задача корректно упорядочить информацию в интерфейсе и предоставить лёгкий способ до неё добраться и что-то с ней сделать
- 49. Ну вот и все… slideshare.net/nefimov efimov.nikita@gmail.com fb.com/nikita.efimov For graphics thanks to freepik.com