Понятный продуктОт информационной архитектуры к структуре

интерфейса

Юрий Солоницын, «ИСТ»Санкт-Петербург, 2017

Пролог• Как-то раз, за три-девять земель, присоединился

проектировщик к проекту…

Белый Кролик«Алиса в Стране чудес», «Киевнаучфильм», 1981.

IA в проектных артефактах

@

Обычное электронное

письмо

IA в проектных артефактах

@

Обычное электронное

письмо

Получатель

Отправитель

Тема

Текст

IA в проектных артефактах

@

Обычное электронное

письмо

Получатель

Отправитель

Тема

Текст

Вложенные файлы

Несколько получателей

Получатели копии

Получатели скрытой копии

Дата отправки

Дата создания

IA в проектных артефактах

@

Обычное электронное

письмо

Получатель

Отправитель

Тема

Текст

Вложенные файлы

Несколько получателей

Получатели копии

Получатели скрытой копии

Дата отправки

Дата создания

Изображения

Форматирование

Текстовая версия

Важность

Метки и теги

Признак ответа

Признак пересылки

Цифровая подпись

IA в проектных артефактах

@

Обычное электронное

письмо

Получатель

Отправитель

Тема

Текст

Вложенные файлы

Несколько получателей

Получатели копии

Получатели скрытой копии

Дата отправки

Дата создания

Изображения

Форматирование

Текстовая версия

Важность

Метки и теги

Признак ответа

Признак пересылки

Цифровая подпись

Корпоративные расширения

Адрес получателя ответа

Промежуточные серверы

Отметки антивируса

Отметки спам-фильтров

Время прохождения через серверы

Контрольные суммы

Размер

Корпоративные подписи

Ссылки для отказа от рассылки

IA в проектных артефактах

@

Обычное электронное

письмо

Получатель

Отправитель

Тема

Текст

Вложенные файлы

Несколько получателей

Получатели копии

Получатели скрытой копии

Дата отправки

Дата создания

Изображения

Форматирование

Текстовая версия

Важность

Метки и теги

Признак ответа

Признак пересылки

Цифровая подпись

Корпоративные расширения

Адрес получателя ответа

Промежуточные серверы

Отметки антивируса

Отметки спам-фильтров

Время прохождения через серверы

Контрольные суммы

Размер

Корпоративные подписи

Ссылки для отказа от рассылки

И так далее...

Что такое IA в проекте• Информационные сущности:• Связанные с бизнес-логикой;• Технологические;

• Функции продукта;• Правила работы с продуктом и его элементами.

Приходится разбираться…• Проектировщик, изучая проектную документацию:• сам усваивает информационную модель продукта;• формирует представление о продукте — ментальную

модель;

• А ведь есть пользователи … у которых проектнойдокументации нет.

«Чудо на Гудзоне», Warner Bros., 2016

Ментальная модель• Что это?• Зачем оно нужно?• Как им пользоваться?• Как от него избавиться?

http://img0.liveinternet.ru/images/attach/d/1/129/963/129963696_1259869_laki_dlya_nogtei.jpg

Задача проектировщика• Сопоставить информационную архитектуру

продукта с ментальной моделью, имеющейся у пользователя;• Скорректировать информационную модель

(проектирование продукта) и ментальную модель (обучение пользователей).Информационная

архитектура Ментальная модель

ИНТЕРфейс

Информационная архитектура Ментальная модель

Интерфейс,его структура

Интерфейс — зеркало«Алиса в Зазеркалье», «Киевнаучфильм», 1982

Как Алиса в стране чудес

• Имеющаяся ментальная модельне работает;• Пользователь перестраивает

модель;• Опирается на контекст, новую

информацию и ранее полученный опыт.

«Алиса в стране чудес», «Киевнаучфильм», 1981

Между тем,в реальности…

• Аэропорт Шенефельд, утренний «час-пик»;• Терминалы по продаже билетов на метро;• Ожидание в очереди — 20 минут;

Какие бывают зеркала?• Узко-профессиональные — в балетном зале;• «Кривые зеркала» — рассмешить или что-то скрыть;• Зеркала для повседневного использования — в

интерьере;• Зеркала специальные — для очень специфичных

задач.

Профессиональное зеркало

https://the-challenger.ru/wp-content/uploads/2015/05/IMG_4795-800x533.jpg

• Для редких пользователей и редких задач;• Крайне эффективны;• Неоправданно

«дороги» для повседневного применения;• Пользователи —

профи.

Профессиональное зеркало

http://img-fotki.yandex.ru/get/5629/66496967.4d/0_7c3b8_c682c360_XL.jpg http://cdn.tvc.ru/pictures/o/183/712.jpg

Отточенное годами решение!

https://diyivorytower.files.wordpress.com/2011/01/2011_01_12-bulk-rename-utility.jpg

https://supportforums.cisco.com/sites/default/files/legacy/7/7/1/106177-route1.jpg

• Пользователи отлично знают,что им нужно — они обладают точной ментальной моделью продукта;• Крайне важен контекст

применения;• Эффективность — прежде

всего.

Кривое зеркало• Чтобы удивить и рассмешить;• Чтобы развлечь;• Искажение модели как

источник ощущений.

http://g02.s.alicdn.com/kf/HTB1IbYIKVXXXXbcapXXq6xXFXXXW/200267954/HTB1IbYIKVXXXXbcapXXq6xXFXXXW.jpg

Как в лаборатории

• Чтобы что-то скрыть;• Модель искажается намеренно.

https://static1.squarespace.com/static/5680413c25981d069dc20c23/t/57707d28e6f2e1d283a5a558/1466989902133

Для повседневного использования

• Адаптировано к задачам конкретных людей в конкретной обстановке;• Самый широкий простор для исследований и фантазии.

http://dizhomes.com/wp-content/uploads/2016/05/bathroom-lighting-ideas-for-small-bathrooms-with-white-ceramic-desk-for-bathtub-and-mosaic-tiles-for-wall-designs-plus-granite-countertops-also-vanity.jpg-720x540.jpg

Видно ровно то, что нужно

https://www.sketchapp.com/images/features/precision.jpg

• Баланс между сложностью и функциональностью;• Интерфейс фокусируется

на текущих задачах пользователя;• Отображаемая информация

«фильтруется» для упрощения ментальной модели;• Второстепенные функции

выносятся «на второй план».

Узко-специальные зеркала• Оптимизированы

для решения толькоодной задачи.

http://evaamenedo.es/blog/wp-content/uploads/2016/02/Rear_view_mirror_view_in_Mt._Rainier_National_Park_driving_to_Longmire.jpg

Узко-специальные интерфейсы

https://allinfopark.files.wordpress.com/2014/09/3209e-unnamed.png

Фундамент интерфейса• Информационная структура продукта

переходит в структуру экранных форм;• Структура интерфейса —

отражает функции, данные и методыих обработки.• Ясная структура:• позволяет ограничить нагрузку на пользователя;• упрощает формирование ментальной модели;• ускоряет освоение продукта.

https://mir-s3-cdn-cf.behance.net/project_modules/disp/87d2638679783.5602c0ea3a5de.jpg

Профессиональный UI• Структура точно следует

за информационной архитектурой;• Обеспечивает гибкость

в применении продукта;• Ментальная модель

формируется при профессиональном обучении.

http://www.firewall.cx/images/stories/cisco-sg500-3.jpg

Обучение? Да, слышали!

https://diyivorytower.files.wordpress.com/2011/01/2011_01_12-bulk-rename-utility.jpg

• Подготовка — это нормально, для нее отводят время;• Инженеры не читают

мануалы? Потому, что их учили изучать продукт.

Развлечения?• Игры — развлечения и эмоции.

Структура просто не должна мешать.• Что-то скрыть — Censored

Повседневные интерфейсы• Для кого мы делаем продукт?• Какие потребности

у них есть?• Что они уже знают и умеют?• Какие задачи важнее?• С чего удобно начать?

Уровень подготовки• Уровень образования — языки, предметные знания?• Опыт работы с подобными продуктами?• Физические возможности?• Культурные особенности?

• Мотивация?

• Конкуренты не дремлют ;)

Узко-специальное зеркало• Задачи короткие, но важные.

Как взгляд в зеркало заднего вида;• Убрать все лишнее, помочь сфокусироваться на

задаче;• Структура интерфейса ведет пользователя к цели;• Позаботиться об отсутствии помех в восприятии и

изучении продукта.

Скорость формирования моделиТерминал заказа «McDonalds», октябрь 2016.

КонтекстБанкомат ВТБ24Банкомат ВТБ24

ИтогоИнтерфейсы:• Профессиональные — структура интерфейса

соответствует предметной области, следует за структурой знаний;• Для развлечений — прежде всего — эмоции.

Структура на втором плане и просто не должна мешать;• Общего назначения — структура помогает обучению,

начиная с самых распространенных сценариев и заканчивая редкими;• Узко-специальные — структура обеспечивает

максимальную эффективность в заданной задаче.

Пара научных слов• Структура интерфейса объединяет

информационную архитектуру и ментальную модель в сознании пользователя;• Структура интерфейса выбирается с учетом:• знаний о существующих ментальных моделях

(исследование);• желаемого воздействия на ментальную модель

(обучение).

Спасибо за внимание!Юрий Солоницынcontact@adesignlab.ru