SlideShare uma empresa Scribd logo

Информационное проектирование и дизайн навигации

•
•
L
Lara Simonova

Презентация к практической части воркшопа по проектированию навигации на основе модели области в рамках курса Русской школы сервисного дизайна.

Dados e análise
1 de 139
Baixar para ler offline
ИНФОРМАЦИОННОЕ ПРОЕКТИРОВАНИЕ И ДИЗАЙН НАВИГАЦИИ Р Ш С Д 4 н о я б р я 2 0 1 7 н а п р и м е р е к ата л о га у с л у г п о р та л а M O S . R U ЛАРА СИМОНО В А
ЛАРА СИМОНОВА Проекты • Patrn (таск-менеджер для анимационной студии) • Campus (образовательный проект рамках «Мастерской» Димы Барбанеля при поддержке Яндекс) • Textr (текстовый конструктор для издательства) • Почта России (подписное агентство, почта id, портал, электронные заказные письма) • Channelkit (инструмент для организации знаний) • Collectrium, the Christie’s Company (отдел анализа данных аукционного дома) Контакты • Facebook: Lara Simonova • Upwork / Behance / Linkedin • E-mail: lara@channelkit.com
1. Теория. Информационное проектирование. • Любой сервис — надстройка на сложной экосистеме на стыке цифровой и аналоговой сред • Нужно понять, как эту экосистему воспринимают участники процесса • И формализовать в виде информационной модели области 2. Теория. Модель области. Интерфейсы. Навигация • Фреймворк для построения информационной модели области • UX-дизайн, графический дизайн. Навигация: типы, задачи, точки входа • Что еще нужно учитывать 3. Исходные данные. • Задача: создать информационную модель раздела услуг портала mos.ru и оптимизировать навигацию • Особенности субстрата • Спектр навигационных подходов, на которые можно опираться • Как будет строиться практическая часть 4. Практика. Редизайн навигации. • Исследование • Моделирование • Приоритезация • Информационный дизайн. Пластический дизайн. ПЛАН
1. ИНФОРМАЦИОННОЕ ПРОЕКТИРОВАНИЕ т е о р и я
СЛОЖНАЯ ЭКОСИСТЕМА а н а л о г о в а я СРЕ Д А Ц И Ф РО В АЯ СРЕ Д А с у щ н о с т и п р о ц е с с ы ПОЛЬЗОВАТЕЛЬСКИЙ ОПЫТ 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ
ПРИМЕР а н а л о г о в а я СРЕ Д А Ц И Ф РО В АЯ СРЕ Д А с у щ н о с т и п р о ц е с с ы Peter Moreville (WIAD 2016) Harvard Business School’s Baker Library 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ / с л о ж н а я э к о с и с т е м а
ПРИМЕР Ц И Ф РО В АЯ СРЕ Д А п р о ц е с с ы Каталог Карточка книги Заказ Поиск Возврат Чтение Обучение Поиск Заказ Обучение а н а л о г о в а я СРЕ Д А с у щ н о с т и Книги Полки Библиотекарь Читатель UX “This one test made it clear that information architecture isn’t just about websites; it’s about the whole ecosystem, because everything is deeply intertwingled” Peter Morville 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ / с л о ж н а я э к о с и с т е м а
Любой продукт — это контейнер для пользовательского опыта взаимодействия со сложной средой на стыке цифрового и аналогового миров Этот контейнер может быть: • Неудачным — идущим в разрез с реальным опытом • Удачным — соответствующим реальному опыту • Визионерским — модифицирующим среду и создающим новый опыт, более удобный пользователю КОНТЕЙНЕР ДЛЯ ОПЫТА 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ
Перед тем, как начать строить с нуля или модифицировать существующий продукт, нужно понять, как устроена «вселенная», в которой этот продукт живет. ИССЛЕДОВАНИЯ 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ
1. Какие в ней есть основные сущности и процессы? СУЩНОСТИ И ПРОЦЕССЫ ЧЕЛОВЕК ИНФОРМИРОВАНИЕ СОБЫТИЕ ПОЛУЧЕНИЕ ДОКУМЕНТ ЗАПРОС ДЕНЬГИ МЕСТО ОФОРМЛЕНИЕ ПОСЕЩЕНИЕ ОРГАНИЗАЦИЯ ЗАПИСЬ п р о ц е с с ыс у щ н о с т и 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ / ИССЛЕ Д О В АНИЯ
2. Какими объективными свойствами они обладают? СВОЙСТВА ЧЕЛОВЕК МЕСТО СОБЫТИЕ ДОКУМЕНТ ДЕНЬГИ ОРГАНИЗАЦИЯ должность сумма срок действия название валюта имя тип документа дата выдачи адрес название цена с в о й с т в ас у щ н о с т и 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ / ИССЛЕ Д О В АНИЯ
3. Как субъективно воспринимаются пользователями? ПЕРЦЕПТИВНЫЕ КАРТЫ 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ / ИССЛЕ Д О В АНИЯ
3. Как субъективно воспринимаются пользователями? ПЕРЦЕПТИВНЫЕ КАРТЫ 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ / ИССЛЕ Д О В АНИЯ
3. Как субъективно воспринимаются пользователями? ПЕРЦЕПТИВНЫЕ КАРТЫ 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ / ИССЛЕ Д О В АНИЯ
• Расположенные рядом по какому-то (например, пространственному) признаку сущности записываются в мозгу рядом • Записанные рядом в мозгу сущности быстрее активируются в тандеме ПЕРЦЕПТИВНЫЕ КАРТЫ 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ / ИССЛЕ Д О В АНИЯ
ВОСПРИЯТИЕ И UX-ДИЗАЙН 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ / в о с п р и я т и е
ВОСПРИЯТИЕ И UX-ДИЗАЙН МИР Время Пространство Объекты 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ / в о с п р и я т и е
ВОСПРИЯТИЕ И UX-ДИЗАЙН Опыт Объекты Действия Процессы Навыки Движение П о л ь з о в ат е л ь МИР Время Пространство Объекты восприятие 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ / в о с п р и я т и е
ВОСПРИЯТИЕ И UX-ДИЗАЙН Опыт Объекты Действия Процессы Навыки Движение П о л ь з о в ат е л ь Перцептивные карты запись существующие / новые ассоциированные бессознательные МИР Время Пространство Объекты восприятие 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ / в о с п р и я т и е
ВОСПРИЯТИЕ И UX-ДИЗАЙН Опыт Объекты Действия Процессы Навыки Движение П о л ь з о в ат е л ь Перцептивные карты Ментальные модели области запись упаковка существующие / новые ассоциированные бессознательные рабочий механизм потенциально осознаваемые МИР Время Пространство Объекты восприятие 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ / в о с п р и я т и е
ВОСПРИЯТИЕ И UX-ДИЗАЙН Опыт Объекты Действия Процессы Навыки Движение П о л ь з о в ат е л ь Перцептивные карты Ментальные модели области запись упаковка существующие / новые ассоциированные инвариантные / зависящие от среды бессознательные рабочий механизм потенциально осознаваемые Сущности Свойства Связи информационное проектирование СИСТЕМЫМИР Время Пространство Объекты восприятие формализация 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ / в о с п р и я т и е
ВОСПРИЯТИЕ И UX-ДИЗАЙН Опыт Объекты Действия Процессы Навыки Движение П о л ь з о в ат е л ь Перцептивные карты Ментальные модели области запись упаковка упаковка существующие / новые ассоциированные инвариантные / зависящие от среды мета-структуры бессознательные рабочий механизм потенциально осознаваемые Сущности Свойства Связи Классификация Навигация Сценарии Контролы информационное проектирование интерфейсы СИСТЕМЫМИР Время Пространство Объекты восприятие формализация 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ / в о с п р и я т и е
ВОСПРИЯТИЕ И UX-ДИЗАЙН Опыт Объекты Действия Процессы Навыки Движение П о л ь з о в ат е л ь Перцептивные карты Ментальные модели области Ментальная модель сервиса запись упаковка упаковка существующие / новые ассоциированные инвариантные / зависящие от среды мета-структуры бессознательные рабочий механизм потенциально осознаваемые потенциально осознаваемая Сущности Свойства Связи Классификация Навигация Сценарии Контролы информационное проектирование интерфейсы чтение СИСТЕМЫМИР Время Пространство Объекты восприятие формализация 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ / в о с п р и я т и е
AFFORDANCES • Человек воспринимает объект не через его непосредственные свойства, а скорее через набор действий, которые, по его мнению, с этим объектом можно совершить (affordances) [Norman] • И этот набор и является тем, что нужно закладывать в сущности, в явном виде показывать пользователю при дизайне процессов и взаимодействий. О Б Ъ ЕКТ восприятие Действия Интерфейс Свойства База данных формализация 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ / в о с п р и я т и е
ЦЕЛИ Вся совокупность этих действий (affordances) не меняется, однако их набор зависит от контекста и целей, с которыми человек приходит к взаимодействию с объектом Ц ЕЛИ О Б Ъ ЕКТ восприятие Действия Интерфейс Свойства База данных формализация 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ / в о с п р и я т и е
СОЗДАНИЕ ПРОДУКТА И IA МИР ч е л о в е к digital analog продукт данные наблюдения опросы опросы наблюдения эксперименты задачи ограничения приоритезация выбор под цели обоснование тестирование к а к в с е у с т р о е н о ? к а к в о с п р и н и м а е т с я ? к а к ф о р м а л и з о в ат ь ? к а к с д е л ат ь ? исследования и анализ моделирование UX-дизайн 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ / в о п р о с ы
ОПРЕДЕЛЕНИЕ Совокупность практик, направленных на: • Выявление значимых сущностей области; • Изучение и формализацию их свойств, связей между ними; • Определение возможных действий с ними в рамках потенциальных пользовательских целей; • Разработка форматов хранения этих данных; • И способов передачи для дальнейшего их использования в процессе создания продукта... ... называется информационным проектированием и ложится в основу в том числе сервис-дизайна. 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ / и н ф о р м а ц и о н н а я а р х и т е к т у р а
ОПРЕДЕЛЕНИЕ А результат информационного проектирования, заложенный в продукт, называется его информационной архитектурой 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ / и н ф о р м а ц и о н н а я а р х и т е к т у р а
ПРОДАКТ-ДИЗАЙН и ИА Исследования и анализ Оптимизация и формализация Имплементация Тестирование • Опросы • Брифы • Поддержка дизайна • Поддержка разработки • Схемы • Таблицы • Майндмэпы • Спецификации • Вайрфреймы 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ / и н ф о р м а ц и о н н а я а р х и т е к т у р а
ПРОЕКТИРОВАНИЕ 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ
ПРОЕКТИРОВАНИЕ ч е л о в е к с у щ н о с т и о б л а с т ь 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ
ПРОЕКТИРОВАНИЕ ч е л о в е к с у щ н о с т и о б л а с т ь И Д ЕЯ п р о д у к тА Для кого? Зачем? Монетизация? исследование 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ
ПРОЕКТИРОВАНИЕ ч е л о в е к с у щ н о с т и о б л а с т ь И Д ЕЯ п р о д у к тА Сущностей Свойств Связей Действий Для кого? Зачем? Монетизация? отбор значимых для решения конкретных задач исследование 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ
ПРОЕКТИРОВАНИЕ ч е л о в е к с у щ н о с т и о б л а с т ь п р о д у к т И Д ЕЯ п р о д у к тА Сущностей Свойств Связей Действий Для кого? Зачем? Монетизация? Информационная архитектура отбор формализация значимых для решения конкретных задач исследование 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ
ПРОЕКТИРОВАНИЕ ч е л о в е к с у щ н о с т и о б л а с т ь п р о д у к т И Д ЕЯ п р о д у к тА Сущностей Свойств Связей Действий Для кого? Зачем? Монетизация? Информационная архитектура Сценарии Интеферсы отбор формализация значимых для решения конкретных задач исследование 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ
ПРОЕКТИРОВАНИЕ ч е л о в е к с у щ н о с т и о б л а с т ь п р о д у к т И Д ЕЯ п р о д у к тА Сущностей Свойств Связей Действий Для кого? Зачем? Монетизация? Информационная архитектура Сценарии Интеферсы отбор формализация значимых для решения конкретных задач оптимизация исследование Маркетинг Тестирование ... ≈ c s t≈ c s t ≈ V A R 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ
ВОПРОСЫ 1. Кто участвует в поцессе (люди, объекты) 2. Как участники картируют область 3. Какие задачи решаются участниками 4. В рамках каких процессов 5. В каких контекстах 6. Что из вышеперечисленного является ключевыми компонентами, без которых система не будет работать о п р е д е л е н и е р а м о к с и с т е м ы => 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ
РЕЗЮМЕ Определение и формализация базовых сущностей в области, их свойств и правил взаимодействия, не привязанных к конкретным продуктовым решениями, позволяет создавать, поддерживать и масштабировать непротиворечивую логику интерфейсов, баз данных, процессов, обеспечивающих хороший пользовательский опыт. 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ
2.1 МОДЕЛЬ ОБЛАСТИ. ФРЕЙМВОРК т е о р и я
ПРЕДМЕТНАЯ ОБЛАСТЬ 2 . 1 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к Сущности / Concepts Свойства / Properties Агенты / Agents Термины / Terms Связи / Realtionships в з а и м о д е й с т в и я
ПРЕДМЕТНАЯ ОБЛАСТЬ Сущности / Concepts Свойства / Properties Агенты / Agents Термины / Terms Связи / Realtionships в з а и м о д е й с т в и я М о д е л ь д а н н ы х 2 . 1 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к
Модель данных это совокупность терминов и принципов, описывающих определенную предметную область ОБЩЕЕ ОПРЕДЕЛЕНИЕ 2 . 1 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к
МОДЕЛИРОВАНИЕ ДАННЫХ Чтобы построить любую модель, нужно определить границы вселенной, которую она должна описывать, и сформулировать задачи и области где информация, входящая в ее состав будет использоваться 2 . 1 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к
Изучение области 1 МОДЕЛИРОВАНИЕ ДАННЫХ 2 . 1 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к
Определить источники, которые содержат информацию об области, ее сущностях, процессах, агентах 1. Базы данных 2. Сайты организаций / людей 3. Инструменты 4. Существующие модели ИСТОЧНИКИ 2 . 1 . 1 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / и з у ч е н и е
Изучение области 1 Моделирование области ключевые сущности и их взаимосвязи 2 МОДЕЛИРОВАНИЕ ДАННЫХ 2 . 1 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к
Вселенная может состоять, например, из отобранных согласно определенному набору принципов ОБЪЕКТОВ ВСЕЛЕННАЯ 2 . 1 . 2 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / м о д е л и р о в а н и е о б л а с т и
И набора Вселенная может состоять, например, из отобранных согласно определенному набору принципов ОБЪЕКТОВ СВЯЗАННЫХ СУЩНОСТЕЙ ВСЕЛЕННАЯ 2 . 1 . 2 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / м о д е л и р о в а н и е о б л а с т и
источники книги, статьи, сайты места точки продаж, места рождения, событий СОБЫТИЯ продажи, выставки, концерты, исследования ОРГАНИЗАЦИИ музеи, склады, бренды, контрагенты ЛЮДИ создатели, владельцы, пользователи И набора СВЯЗАННЫХ СУЩНОСТЕЙ Вселенная может состоять, например из отобранных согласно определенному набору принципов ОБЪЕКТОВ ВСЕЛЕННАЯ 2 . 1 . 2 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / м о д е л и р о в а н и е о б л а с т и
Доработка: ВСЕЛЕННАЯ 2 . 1 . 2 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / м о д е л и р о в а н и е о б л а с т и
Доработка: 1. Вынесение наиболее значимых концептов в отдельные сущности и их более подробное описание Аукционная продажа Событие Остальные события выставки, исследования, реставрации ВСЕЛЕННАЯ 2 . 1 . 2 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / м о д е л и р о в а н и е о б л а с т и
Доработка: 1. Вынесение наиболее значимых концептов в отдельные сущности и их более подробное описание 2. Разделение сущности на несколько отдельных Аукционная продажа Событие Мес Адрес то Адм. единица Остальные события выставки, исследования, реставрации название адрес город, страна, континент координаты тип: город, страна, ... название родительский термин + ВСЕЛЕННАЯ 2 . 1 . 2 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / м о д е л и р о в а н и е о б л а с т и
Моделирование содержания свойства ключевых сущностей 4 3 Изучение области 1 МОДЕЛИРОВАНИЕ ДАННЫХ Моделирование области ключевые сущности и их взаимосвязи 2 2 . 1 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к
ТРИ ВОПРОСА 2 . 1 . 4 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / м о д е л и р о в а н и е с о д е р ж а н и я
А. Как используются данные? 2 . 1 . 4 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / м о д е л и р о в а н и е с о д е р ж а н и я
Умные поисковые интерфейсы (автокомплиты, полнотекстовый поиск, фильтрация и сортировка по полям) Удобство и эффективность контроля качества (автоматическое распознавание отклоняющихся значений, валидация бизнес-правил) Обучение алгоритмов получения данных (автоматическое распознавание нужных текстов, их скрейпинг и парсинг в структурированные поля) Обучение алгоритмов кластеризации (поиск по изображению, рекомендации похожих объектов) Расчет динамики цен (расчет ценовых индексов, вычисление ценовых коридоров) А. Как используются данные? 2 . 1 . 4 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / м о д е л и р о в а н и е с о д е р ж а н и я
B. Какие данные нужны? 2 . 1 . 4 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / м о д е л и р о в а н и е с о д е р ж а н и я
Определение набора свойств для ключевых сущностей ОБЪЕКТ ИСТОЧНИК СОБЫТИЕ ЧЕЛОВЕК МЕСТО ОРГАНИЗАЦИЯ автор длина тип название валюта имя материал роль куратор статус широта цвет дата адрес цена редактор спонсор ссылка с в о й с т в ас у щ н о с т и B. Какие данные нужны? 2 . 1 . 4 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / м о д е л и р о в а н и е с о д е р ж а н и я
С. Как данные получают? 2 . 1 . 4 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / м о д е л и р о в а н и е с о д е р ж а н и я
Скрейпинг с сайтов в индустрии (текстовые описания, обычно слабо структурированные, структура отличается от источника к источнику) Отцифровка аналоговых источников (неструктурированные текстовые описания, полученные методом оптического распознования, с ошибками) Подключение к тематическим базам данных (хорошо стркутурированные, общепринятые методы организации и терминология, но небольшие объемы) Ручной ввод (времязатратно и высокая вероятность ошибок) С. Как данные получают? 2 . 1 . 4 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / м о д е л и р о в а н и е с о д е р ж а н и я
P 1 P 3 P 7 P 6 P 8 P 9 P 2 V 1.1L 1 V 3.1L 3 V 7.1L 7 V 2.2L 2 V 6.1L 6 V 8.4 V 9.1 L 8.2 L 9 V 9.3 V 6.2 V 8.5 V 9.2 с в о й с т в а з н а ч е н и я P 10 V 10.1L 10 V 10.3V 10.2 л е й б л с у щ н о с т ь СУЩНОСТЬ 2 . 1 . 4 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / м о д е л и р о в а н и е с о д е р ж а н и я
ТРИ ВОПРОСА А. Как данные используются? В. Какие данные нужны? С. Как данные получают? P 1 P 3 P 7 P 6 P 8 P 9 P 2 V 1.1L 1 V 3.1L 3 V 7.1L 7 V 2.2L 2 V 6.1L 6 V 8.4 V 9.1 L 8.2 L 9 V 9.3 V 6.2 V 8.5 V 9.2 с в о й с т в а з н а ч е н и я P 10 V 10.1L 10 V 10.3V 10.2 л е й б л с у щ н о с т ь 2 . 1 . 4 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / м о д е л и р о в а н и е с о д е р ж а н и я
ТРИ ВОПРОСА P 1 P 3 P 7 P 6 P 8 P 9 P 2 V 1.1L 1 V 3.1L 3 V 7.1L 7 V 2.2L 2 V 6.1L 6 V 8.4 V 9.1 L 8.2 L 9 V 9.3 V 6.2 V 8.5 V 9.2 с в о й с т в а з н а ч е н и я P 10 V 10.1L 10 V 10.3V 10.2 л е й б л с у щ н о с т ь А. Как данные используются? В. Какие данные нужны? С. Как данные получают? о т б о р в м о д е л ь р е л е в а н т н ы х д а н н ы х в ы с о к о г о к а ч е с т в а р е а л и с т и ч н о й д о с т у п н о с т и => 2 . 1 . 4 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / м о д е л и р о в а н и е с о д е р ж а н и я
СЛЕДСТВИЯ Отбор в модель релевантных данных высокого качества и реалестичной доступности требует: • Определения релевантных свойств для каждой ключевой сущности; • Скрейпинг и, потенциально, хранения фри-текстовых данных; • Парсинг фри-текстовых данных в структурированные поля нужного уровня подробности; • Имплементации контролируемых словарей терминов, использующихся как значения основных свойств. 2 . 1 . 4 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / м о д е л и р о в а н и е с о д е р ж а н и я
6 5 Дизайн схемы данных принципы организации свойств Моделирование содержания свойства ключевых сущностей 4 3 Изучение области 1 МОДЕЛИРОВАНИЕ ДАННЫХ Моделирование области ключевые сущности и их взаимосвязи 2 2 . 1 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к
Полная модель данных состоит из: ЧТО ТАКОЕ СХЕМА ДАННЫХ? 2 . 1 . 6 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / д и з а й н с х е м ы д а н н ы х
Полная модель области состоит из: Сущностей представляющих основные концепты (Объект, Событие, Место, Человек, ...) Списка свойств каждой сущности и их структуры (Объект: автор, дата создания, место создания, материал, измерения, ...) (Измерения: тип, значение, единица измерения, система измерения, ...) Словарей значений (терминов) для каждого из свойств (Единицы измерения: м, метры, футы, feet, mètre, ...) Взаимосвязей сущностей, свойств и значений (онтологии, сущность-атрибут-значение EAV, etc) ЧТО ТАКОЕ СХЕМА ДАННЫХ? 2 . 1 . 6 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / д и з а й н с х е м ы д а н н ы х
Они сгруппированы в две конструкции, которые моделируются отдельно: ЧТО ТАКОЕ СХЕМА ДАННЫХ? 2 . 1 . 6 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / д и з а й н с х е м ы д а н н ы х
Они сгруппированы в две конструкции, которые моделируются отдельно: Сущности + Свойства + Отношения = Схема ЧТО ТАКОЕ СХЕМА ДАННЫХ? 2 . 1 . 6 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / д и з а й н с х е м ы д а н н ы х
Они сгруппированы в две конструкции, которые моделируются отдельно: Сущности + Свойства + Отношения = Схема Термины + Отношения + Правила = Словари ЧТО ТАКОЕ СХЕМА ДАННЫХ? 2 . 1 . 6 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / д и з а й н с х е м ы д а н н ы х
МОДЕЛЬ { ЧТО ТАКОЕ СХЕМА ДАННЫХ? Они сгруппированы в две конструкции, которые моделируются отдельно: Сущности + Свойства + Отношения = Схема Термины + Отношения + Правила = Словари 2 . 1 . 6 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / д и з а й н с х е м ы д а н н ы х
Какие подходы уже существуют для описания области? ВЫБОР СХЕМЫ: АНАЛОГИ 2 . 1 . 6 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / д и з а й н с х е м ы д а н н ы х
Какие подходы уже существуют для описания области? Онтологические фреймворки Пример: schema.org, dbpedia.org Принцип: Субъект – Предикат – Объект (RDF) Плюсы: высокая описательная гибкость Минусы: свойства не организованы в логические кластеры сложно управлять и разработать единообразные принципы описания Категорийные фреймворки Пример: Getty’s Categories for the Description of Works of Art (CDWA) Принцип: Entity – Attribute – Value (EAV) Плюсы: свойства сгруппированы в концептуальные блоки описательные принципы четко определены Минусы: менее гибкая ВЫБОР СХЕМЫ: АНАЛОГИ 3 . 6 . И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Д ИЗАЙН СХЕМЫ Д АННЫХ
1. Удобство принципа организации 2. Специфичность для области 3. Признаность сообществом 4. Описание смежных конецптов 5. Проработанная терминология (словари) ВЫБОР СХЕМЫ: ОРИЕНТИРЫ 2 . 1 . 6 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / д и з а й н с х е м ы д а н н ы х
ОГРАНИЧЕНИЯ СХЕМЫ 1. Подробность 2. Полнота описания области 3 . 6 . И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Д ИЗАЙН СХЕМЫ Д АННЫХ
ОГРАНИЧЕНИЯ СХЕМЫ 1. Подробность 2. Полнота описания области => упрощение / усложнение существующих сущностей расширение набора сущностей 2 . 1 . 6 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / д и з а й н с х е м ы д а н н ы х
Создание тезаврусов структура и принципы наполнения 7 8 6 5 Дизайн схемы данных принципы организации свойств Моделирование содержания свойства ключевых сущностей 4 3 Изучение области 1 МОДЕЛИРОВАНИЕ ДАННЫХ Моделирование области ключевые сущности и их взаимосвязи 2 2 . 1 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к
Список терминов Утверждения об их иерархических взаимосвязях Утверждения о синонимии (+ переводы) Утверждения о связанных терминах (≠ синонимы) Утверждения о предпочтительности терминов Набор дополнительных свойств (определения, ссылки) Нестрогий синоним: Словарь ЧТО ТАКОЕ ТЕЗАВРУС? 2 . 1 . 8 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / с о з д а н и е т е з а у р у с о в
ТЕЗАУРУСЫ: ОРИЕНТИРЫ 2 . 1 . 8 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / с о з д а н и е т е з а у р у с о в
ТЕЗАУРУСЫ: ОРИЕНТИРЫ 1. Что уже есть? (Примеры: AAT, TGN, ULAN, CONA) 2. Как организованы статьи и их взаимосвязи? (Синонимы, переводы, иерархии, предпочтительность, мэппинг, определения) 3. Насколько полные? (Краткие/полные словари) 4. Как происходит модерация? (Открытый краудсорс, краудсорс среди специалистов, кураторы) 5. Откуда еще брать термины? (Несловарные источники: сайты индустрии) 2 . 1 . 8 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / с о з д а н и е т е з а у р у с о в
ПРИМЕР СЛОВАРНОЙ СТАТЬИ 2 . 1 . 8 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / с о з д а н и е т е з а у р у с о в
ПРИМЕР СЛОВАРНОЙ СТАТЬИ с л о в а р и С л о в а р ь « РОЛИ » с тат ь я « х у д о ж н и к » Единицы измерений Материалы Системы счисления Типы измерений Техники Роли Автор Водитель Издатель Композитор Космонавт Художник Футуролог Этнограф ID: [номер термина] Иерархия: создатель художник акварелист график Getty ID: [AAT identification number] Определение: [текстовое описание] Мэппинг на другие словари Типы объектов: картины литографии Области: изящные искусства Категории искусства: авангард ренессанс Синонимы и переводы painter (English, preferred) peintre (French) kunstmaler (German) 2 . 1 . 8 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / с о з д а н и е т е з а у р у с о в
ПРАВИЛА НАПОЛНЕНИЯ 1. Форматирование (заглавные/прописные буквы, пробелы, дефисы, скобки, диакритика, последовательность, цифры) 2. Предпочтительность (частотность, язык, орфография) 3. Уровень гранулярности (широкие/узкие термины) 4. Поясняющие слова (позволяющие отличить омонимы) 5. Один общий словарь или разные (серый: масть лошади и цвет машины) 6. Длина терминов (важно для навигации, например) 2 . 1 . 8 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / с о з д а н и е т е з а у р у с о в
ВЫВОД структ ура контентправила наполнения 2 . 1 . 8 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к
2.2 МОДЕЛЬ ОБЛАСТИ. ВЛИЯНИЕ НА ИНТЕРФЕЙСЫ т е о р и я
ВЛИЯНИЕ НА 4 УРОВНЯХ А. Бизнес (оптимизация процессов, логистики, финансовых схем) B. Разработка (удобное проектирование баз данных, бэкенда, логики фронтенда, масштабируемость) C. Графический дизайн (UI-kit и масштабируемость) D. UX и продакт дизайн (понятные интерфейсы, чистые пользовательские данные, умные рекомендательные системы, machine learning) 2 . 2 и н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / В ЛИЯНИЕ НА ИНТЕР Ф ЕЙСЫ
ВЛИЯНИЕ НА 4 УРОВНЯХ А. Бизнес (оптимизация процессов, логистики, финансовых схем) B. Разработка (удобное проектирование баз данных, бэкенда, логики фронтенда, масштабируемость) C. Графический дизайн (UI-kit и масштабируемость) D. UX и продакт дизайн (понятные интерфейсы, чистые пользовательские данные, умные рекомендательные системы, machine learning) 2 . 2 и н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / В ЛИЯНИЕ НА ИНТЕР Ф ЕЙСЫ
1. Стилистическая логика страниц C. ГРАФИЧЕСКИЙ ДИЗАЙН выставка концерт событие Стилистическая унификация страниц одного типа сущностей: «выставка» и «концерт» будут выглядеть похоже, так как оба — «событие»; 2 . 2 и н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / В ЛИЯНИЕ НА ИНТЕР Ф ЕЙСЫ
1. Стилистическая логика страниц C. ГРАФИЧЕСКИЙ ДИЗАЙН выставка человекконцерт компания событие субъект Стилистическая унификация страниц одного типа сущностей: «выставка» и «концерт» будут выглядеть похоже, так как оба — «событие»; Стилистические различия страниц разных типов сущностей: страницы типа «субъект», отличные от страниц типа «событие»; 2 . 2 и н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / В ЛИЯНИЕ НА ИНТЕР Ф ЕЙСЫ
1. Стилистическая логика страниц C. ГРАФИЧЕСКИЙ ДИЗАЙН выставка выставка выставка человек человек человек концерт концерт концерт компания компания компания событие субъект просмотр создание редактирование Стилистическая унификация страниц одного типа сущностей: «выставка» и «концерт» будут выглядеть похоже, так как оба — «событие» (визуальное кодирование); Стилистические различия страниц разных типов сущностей: страницы типа «объект», отличные от страниц типа «событие»; Стилистическая унификация страниц, выполняющих одну функцию: редактирование, создание, просмотр. 2 . 2 и н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / В ЛИЯНИЕ НА ИНТЕР Ф ЕЙСЫ
2. Модульность Четко описанные сущности позволяют создать сиситему шаблонов их отображения с возможностью их использования в разных контекстах: страница, виджет в контексте другой старницы, модальности. C. ГРАФИЧЕСКИЙ ДИЗАЙН концерт артист площадка оплата MTS каталог ИНФОРМАЦИОННАЯ МОДЕЛЬ КОНТЕКСТЫ => шаблоны сущность: Событие тип: Концерт название: Alfa-future people участники: A, B, C площадка: Завидово дата: 23.07.2018 время начала: 20:00 длительность: 12:30 цена: 2 500 руб. полная картинка: full.jpg средняя картика: medium.jpeg превью: small.jpeg страница концерта вся информация большая картинка артист / превью название дата стоимость площадка маленькая картинка площадка / превью название участники дата стоимость маленькая картинка площадка / резюме название дата стоимость площадка мобильный / пуш название дата время площадка каталог / превью название дата стоимость площадка маленькая картинка 2 . 2 и н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / В ЛИЯНИЕ НА ИНТЕР Ф ЕЙСЫ
3. Унификация UI элементов Подробно продуманные свойства, для которых понятен тип данных, количество значений, влияние на значения других свойств, позволяют сгруппировать их по аналогии и использовать в каждом случае один тип UI элементов. А также облегчают коммуникацию с фротенд-разработчиками. C. ГРАФИЧЕСКИЙ ДИЗАЙН ИНФОРМАЦИОННАЯ МОДЕЛЬ событие человек сущность: Событие тип: Концерт Выставка Спектакль Флешмоб Маркет сущность: Человек тип: Артист Подрядчик Посетитель Организатор Концерт Выставка Спектакль Флешмоб Маркет Артист Подрядчик Посетитель Организатор Выберите тип Выберите тип Артист Концерт Подрядчик Посетитель Организатор Выставка Спектакль Флешмоб Маркет 2 . 2 и н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / В ЛИЯНИЕ НА ИНТЕР Ф ЕЙСЫ
Продуманная навигация и контекстные действия (меню, категоризаторы, контекстные ссылки на другие сущности, операции с сущностями) Умные поисковые интерфейсы (автокомплиты, полнотекстовый поиск, фильтрация и сортировка по полям) Удобство и эффективность контроля качества (автоматическое распознавание отклоняющихся значений, валидация бизнес-правил) Обучение алгоритмов получения данных (автоматическое распознавание нужных текстов, их скрейпинг и парсинг в структурированные поля) Обучение алгоритмов кластеризации (поиск по изображению, рекомендации похожих объектов) Рассчет динамики цен (рассчет ценовых индексов, вычисление ценовых коридоров) D. UX И ПРОДАКТ ДИЗАЙН 2 . 2 и н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / В ЛИЯНИЕ НА ИНТЕР Ф ЕЙСЫ
Продуманная навигация и контекстные действия (меню, категоризаторы, контекстные ссылки на другие сущности, операции с сущностями) Умные поисковые интерфейсы (автокомплиты, полнотекстовый поиск, фильтрация и сортировка по полям) Удобство и эффективность контроля качества (автоматическое распознавание отклоняющихся значений, валидация бизнес-правил) Обучение алгоритмов получения данных (автоматическое распознавание нужных текстов, их скрейпинг и парсинг в структурированные поля) Обучение алгоритмов кластеризации (поиск по изображению, рекомендации похожих объектов) Рассчет динамики цен (рассчет ценовых индексов, вычисление ценовых коридоров) D. UX И ПРОДАКТ ДИЗАЙН 2 . 2 и н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / В ЛИЯНИЕ НА ИНТЕР Ф ЕЙСЫ
2.3 МОДЕЛЬ ОБЛАСТИ. НАВИГАЦИЯ т е о р и я
НАВИГАЦИЯ Главная задача — сориентироваться д и з а й н н а в и га ц и и Цветовое кодирование Композиция страниц Типографика Приоритезация Пиктографические маркеры etc... Запросы Категоризация Названия разделов Фильтрация Аналогии Сортировка Группировка Типы информации Логическ ая часть «на вход» «на выход» пластическ ая часть информационное проектирование 2 . 3 и н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / н а в и га ц и я
ЛОГИЧЕСКАЯ ЧАСТЬ Сначала надо подумать о том, как помочь пользователю выбрать способ найти/выполнить то, что ему нужно («навигация на входе») А затем о том, как помочь выбрать из предложенных вариантов, если их несколько («навигация на выходе») 2 . 3 и н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / н а в и га ц и я
ХОРОШО БЫ ПОНЯТЬ 1. С каким изначальным сетапом приходит пользоватль 2. Какие вопросы он себе задает 3. Как он представляет себе область, покрываемую сервисом (ментальная модель) 4. Какая информация нужна для принятия решений 5. Как часто он пользуется сервисом и конкретными его частями 6. Ограничения и требования сервиса, которые нужно учесть 2 . 3 и н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / н а в и га ц и я
1. СЕТАП Точно знаю, какой Приблизительно знаю, какой, но не могу сформулирвовать запрос Хочу определиться с параметрами Точно знаю, какую Примерно знаю область Знаю семантику вокруг поиска Ищу конкретный объект Ищу более или менее определенный объект Хочу узнать или выполнить процедуру, подразумевающую много этапов Не знаю, что ищу Не знаю, что вообще ищу Что ищ у? ЧТО ЗНАЮ? 2 . 3 и н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / н а в и га ц и я
2. ВОПРОСЫ ПОЛЬЗОВАТЕЛЯ 1. Где я? 2. Как мне попасть туда-то? 3. Где мне найти то-то? 4. Что мне нужно, чтобы сделать то-то? 5. Как мне здесь сделать то-то? 6. Какой следующий шаг? 7. Что мне из этого выбрать? 2 . 3 и н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / н а в и га ц и я
3. МЕНТАЛЬНАЯ МОДЕЛЬ Опыт Объекты Действия Процессы Навыки Движение П о л ь з о в ат е л ь Перцептивные карты Ментальные модели области Ментальная модель сервиса запись упаковка упаковка существующие / новые ассоциированные инвариантные / зависящие от среды мета-структуры бессознательные рабочий механизм потенциально осознаваемые потенциально осознаваемая Сущности Свойства Связи Классификация Навигация Сценарии Контролы информационное проектирование интерфейсы чтение СИСТЕМЫМИР Время Пространство Объекты восприятие формализация 2 . 3 и н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / н а в и га ц и я
Сущности / Concepts Свойства / Properties Агенты / Agents Термины / Terms Связи / Realtionships в з а и м о д е й с т в и я М о д е л ь д а н н ы х 3. МЕНТАЛЬНАЯ МОДЕЛЬ Иногда ментальные модели заставляют модифицировать строгие модели области, создавать мультифастеные иерархии, использовать альтернативные термины, менять сценарии 2 . 3 и н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / н а в и га ц и я
4. ОТБОР ИНФОРМАЦИИ P 1 P 3 P 7 P 6 P 8 P 9 P 2 V 1.1L 1 V 3.1L 3 V 7.1L 7 V 2.2L 2 V 6.1L 6 V 8.4 V 9.1 L 8.2 L 9 V 9.3 V 6.2 V 8.5 V 9.2 с в о й с т в а з н а ч е н и я P 10 V 10.1L 10 V 10.3V 10.2 л е й б л с у щ н о с т ь Из всего набора сущностей и их свойств для навигации нужно выбирать только те, которые позволяют пользоватлю выполнить его задачу в данном контексте 2 . 3 и н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / н а в и га ц и я
5. ЧАСТОТА В навигации нужно попытаться учесть, как часто совокупность пользователей, или отдельный пользователь испытывают необходимость решать ту или иную задачу. • Выносить часто используемые опции наверх • Давать возможность кастомизироать пользовательское рабочее пространство • Сокращать и упрощать частые сценарии 2 . 3 и н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / н а в и га ц и я
6. ОГРАНИЧЕНИЯ Как правило, при разработке сервиса есть особенности его бизнес- или медиа- логики, которые накладывают дополнительные требования или ограничения • Сезонное/временное изменение релевантности определенных услуг, позиций, запросов • Редакторская воля формирования популярного • Необходимость продвигать какие-то другие услуги, разделы, информацию в рамках текущей странцы, что может отнимать полезное место 2 . 3 и н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / н а в и га ц и я
НАВИГАЦИЯ «НА ВХОДЕ» Можно говорить о концептуальных типах навигации, которые так или иначе решают задачи и вопросы пользоавтелей, которые были упомянуты раньше 2 . 3 и н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / н а в и га ц и я
КОНЦЕПТУАЛЬНЫЕ ТИПЫ 1. «Географическая» Верхнеуровневая навигация между основными смысловыми, функционально разными разделами 2. «Категорийная» Перемещение по набору разных сущностей одного функционального типа, визуально сгруппированных в категории по некоторым принципам 3. «По аналогии или комплиментарности» Горизонтальная навигация с одной страницы, на другие, контент которых считается релевантным данному 4. «Сценарная» Перемещение в рамках определенного сценария: вперед, назад на несколько шагов, в ветви сценария 5. «Расширенный поиск» По набору разных сущностей одного функционального типа, обладающих одним набором атрибутов 6. «Гугл» Свободный текст запроса дает хорошо или плохо структурированную выдачу в зависимости от проработанности разметки контента 2 . 3 и н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / н а в и га ц и я
НАВИГАЦИЯ «НА ВХОДЕ» Можно говорить о концептуальных типах навигации, которые так или иначе решают задачи и вопросы пользоавтелей, которые были упомянуты раньше. И в рамках каждого концептуального типа можно найти большое количество конкретных UX решений. 2 . 3 и н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / н а в и га ц и я
ПРИМЕРЫ UХ РЕШЕНИЙ ГЕОГРАФИЯ к атеГОРИИгде я? ана логии поиск сценарии I 2 . 3 и н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / н а в и га ц и я
НАВИГАЦИЯ «НА ВЫХОДЕ» В случае, когда человек попал туда, куда он хотел, или получил определенную выборку результатов по своему запросу, нужно дать ему инструменты, чтобы: 1. Он не забыл, где он и почему он тут 2. Видел, что это место соотвтетсвует его запросам 3. Понимал, как отсюда уйти назад или куда-то еще 4. Имел доступ к инструментам, чтобы дальше работать с полученным результатом 2 . 3 и н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / н а в и га ц и я
НАВИГАЦИЯ «НА ВЫХОДЕ» Иными словами, на «итоговой странице», будь она конечной, промежуточной в сценарии, или списком с результатом выдачи по запросу, нужно подумать о следующих действиях и элементах. 2 . 3 и н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / н а в и га ц и я
НАВИГАЦИЯ «НА ВЫХОДЕ» и н ф о р м а ц и я н а в и га ц и я и н с т р у м е н т ы Название страницы Название этапа сценария Понятные элементы выдачи, если это был поисковый запрос Breadcrumb и URL Название сценария Введенные параметры запроса «Назад» Breadcrumb URL Дополнительные фильтры по общим свойствам объектов, значения которых выведены в элементах выборки Сортировка по количественным параметрам, времени, алфавиту Группировка элементов выборки по смысловым категориям Прогресс-бар сценария Назад-Вперед-Отменить Очевидный выбор элемента из выдачи, на основе отображаемой информации Переход на другие элементы по аналогии или к другим релевантным сущностям Выделение важной информации на странице Выделение ключевого действия на этапе Подчеркивание информации, соотвтствующей фильтрам Информация для принятия дальнейших решений ЧТО это? почему я здесь? к ак уйти? КАК выбрать? к уд а д а льше? В ПРАВИЛЬНОМ МЕСТЕ? 2 . 3 и н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / н а в и га ц и я
НАВИГАЦИЯ «НА ВЫХОДЕ» Иными словами, на «итоговой странице», будь она конечной, промежуточной в сценарии, или списком с результатом выдачи по запросу, нужно подумать о следующих действиях и элементах. А затем подобрать оптимальные UI-решения для их поддержки. 2 . 3 и н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / н а в и га ц и я
ГЛОБАЛЬНАЯ ЗАДАЧА Положить наши знания о модели области, о ее восприятии пользователем, о пользовательских задачах На продуманную систему из логических и пластических навигационных решений С учетом системных/бизнес/редакторских ограничений или необходимостей конкретного продукта 2 . 2 и н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / н а в и га ц и я
3. ИСХОДНЫЕ ДАННЫЕ т е о р и я
ЗАДАЧА раздел услуг портала Москвы mos.ru перепроектировать навигацию с нуля? изменение текущей? дополнение к текущей? 3 . и с х о д н ы е д а н н ы е субстрат за д ача
ПЛАН 1. Здравый смысл и функции каталога 2. Верхнеуровневое изучение функций каталога 3. Исследование текущего интерфейса (логика, содержание, графика) 4. Моделирование: выделение и описание информационных сущностей 5. Выделение сущностей и их свойств важных для навигации 6. Предложение информационной структуры навигации 7. Предложение дизайна навигации (опционально) 8. Тестирование 3 . и с х о д н ы е д а н н ы е ИССЛЕДОВАНИЕ ИССЛЕДОВАНИЕ АНАЛИЗ + СИНТЕЗ АНАЛИЗ СИНТЕЗ
КАК ПОСТРОИМ РАБОТУ 1. Одна общая группа, но лучше две 2. Я буду давать последовательно набор небольших заданий, в рамках этапов, описанных выше 3. Каждое задание поможет подумать о навигации под определенным углом. 4. Возможно, я дам какие-то свои мысли, в качестве опорных точек, но ими не обязательно пользоваться 5. Часть времени, отведенное на задание, я попрошу подумать над ним самостоятельно, часть — вместе. И выдать общий результат. 6. Мы обсудим результат задания все вместе, и потом у вас будет время, если захочется что-то внести в свою версию 7. Некоторые ваши результаты попрошу отложить, мы их используем в конце 3 . и с х о д н ы е д а н н ы е
ОСОБЕННОСТИ СУБСТРАТА ? 3 . и с х о д н ы е д а н н ы е
ОСОБЕННОСТИ СУБСТРАТА 1. Очень большой каталог услуг 2. Он живет в рамках портала и связан с ним 3. Структура каталога сейчас продиктована тем, что он формируется на основе реестра государственных услуг. Этим можно пренебречь и переформировать категории на ваше усмотрение Остальное расскажу по ходу обсуждений. 3 . и с х о д н ы е д а н н ы е
4. РЕДИЗАЙН НАВИАГЦИИ. ЗАДАНИЯ. п р а к т и к а
1.1 ЗДРАВЫЙ СМЫСЛ 1. Возьмите стикеры 2. Не открывая сайт, напишите на отдельных стикерах услуги, которые, как вам кажется, должен выполнять портал города Москвы 3. Разбейте стикеры по категориям 4. Назовите категории на стикерах 5. Приоритезируйте услуги внутри каждой категории 6. Сфотографируйте результат 3 . р е д и з а й н н а в и га ц и и / И с с л е д о в а н и я индивид уа льно: 10 мин
1.2 ЗДРАВЫЙ СМЫСЛ 1. Возьмите большой лист 2. Объедините стикеры с категориями, постарайтесь сделать общий рубрикатор, наклеив их на лист 3. Объедините стикеры-услуги и распределите их по общему рубрикатору, наклеив на лист 4. Приоритезируйте услуги внутри каждой категории 5. Сфотографируйте лист, сохраните его и отложите. Он нам еще понадобится 3 . р е д и з а й н н а в и га ц и и / И с с л е д о в а н и я вну три группы: 10 мин
2.1 БЕГЛОЕ ИЗУЧЕНИЕ САЙТА 1. Очень быстро изучите раздел услуг mos.ru 2. Возьмите стикеры и допишите услуги, которые вам кажутся важными, но вы о них забыли 3. Добавьте стикеры на общий лист. Возможно придется перегруппировать категории и поменять их название. Это ок. 4. Сфотографируйте лист, сохраните его и отложите. Он нам еще понадобится 3 . р е д и з а й н н а в и га ц и и / И с с л е д о в а н и я индивид уа льно: 5 мин вну три группы: 5 мин
2.2 ОБСУЖДЕНИЕ 1. Давайте сравним листы и обсудим что получается, если опираться только на здравый смысл и беглое изучение 2. Какие общие места? 3. В чем различия? 4. А теперь посмотрим на файл со статистикой услуг. 3 . р е д и з а й н н а в и га ц и и / И с с л е д о в а н и я ОБСУЖ ДЕНИЕ: 5 мин
2.2 ОБСУЖДЕНИЕ 3 . р е д и з а й н н а в и га ц и и / И с с л е д о в а н и я
3.1 ПОДРОБНОЕ ИЗУЧЕНИЕ 3 . р е д и з а й н н а в и га ц и и / И с с л е д о в а н и я 1. Как следует изучите раздел услуг 2. Возьмите пять листов А4, назовите их — Смысловые компоненты (услуга, инструкция, ...) — Логические принципы навигации (сценарии, уровни, ...) — Интерфейсные решения и элементы, которые бросаются в глаза — Положительные особенности — Отрицательные особенности 3. Изучая сайт, выписывайте на стикеры важную на ваш взгляд информацию и наклеивайте их на соответствующие листы индивид уа льно: 10 мин
3.2 ПОДРОБНОЕ ИЗУЧЕНИЕ 3 . р е д и з а й н н а в и га ц и и / И с с л е д о в а н и я 1. Изучите файл с рубрикатором услуг — Обратите внимание на то, куда ведут ссылки — И на колонку «Тип» 2. Дополните свои списки на А4 новыми стикерами индивид уа льно: 5 мин
3.3 ПОДРОБНОЕ ИЗУЧЕНИЕ 3 . р е д и з а й н н а в и га ц и и / И с с л е д о в а н и я 1. Возьмите большой лист, разделите его, как показано на схеме и перенесите туда собственные стикеры вну три группы: 10 мин смысловые компоненты плюсы минусы логические принципы интерфейсные решения
3.4 ОБСУЖДЕНИЕ 1. Давайте сравним листы и обсудим что получается 2. Какие общие места? 3. В чем различия? 4. Предложите несколько потенциальных идей для оптимизации навигации 3 . р е д и з а й н н а в и га ц и и / И с с л е д о в а н и я ОБСУЖ ДЕНИЕ: 5 мин
4.1 ОПИСАНИЕ ВСЕЛЕННОЙ 1. Запишите короткие ответы на следующие вопросы (на стикерах) — Кто пользуется сервисом, кто участвует в цикле поставки-использования- обрабоки информации — Какие области покрывает экосистема — Какие функции, действия, задачи участников — В рамках каких процессов, сценариев — В каких контекстах 2. Возможно, ответы на эти вопросы можно будет как- то сгруппировать и назвать кластеры. Сделайте это 3 . р е д и з а й н н а в и га ц и и / а н а л и з + с и н т е з вну три группы: 20 мин
4.2 ОПИСАНИЕ ВСЕЛЕННОЙ 3. Попробуйте нарисовать эти сущности и их взаимосвязи в виде верхнеуровневой схемы, на ваше усмотрение 3 . р е д и з а й н н а в и га ц и и / а н а л и з + с и н т е з вну три группы: 10 мин области / контексты процессы функции результатыУчастники
4.3 ОБСУЖДЕНИЕ 1. Давайте сравним схемы и обсудим что получается 3 . р е д и з а й н н а в и га ц и и / И с с л е д о в а н и я ОБСУЖ ДЕНИЕ: 5 мин
5. МОДЕЛИРОВАНИЕ 1. Ориентируясь на результаты предыдущего задания выделити основные типы сущностей, которые взаимодействуют между собой в рамках портала 2. Запишите типы свойств тех сущностей, которые вы сочтете ключевыми 3. Запишите типы действий которые могут встречаться в контексте сущностей или типы взаимодействий между ними. 3 . р е д и з а й н н а в и га ц и и / а н а л и з + с и н т е з вну три группы: 20 мин
6. ПРИОРИТЕЗАЦИЯ 1. Какие области вам кажутся самыми важными? 2. Как они кластеризуются? (по каким их свойствам: бизнес/частн, тип пользователя, тип документа, тип задачи?) 3. Можно ли что-то, скажем, унести на другой портал? 4. На основе сущностей и связей между ними, какие ключевые вопросы можно задать пользователю, чтобы сузить поле для поиска? («Я такой-то», «Хочу сделать то-то», «С таким-то объектом») 3 . р е д и з а й н н а в и га ц и и / а н а л и з вну три группы: 5 мин
7. ВЫБОР СИСТЕМЫ 1. Держа в голове свое представление об области, полученое в результате предыдущих упражнений — Об основных участниках — О задачах — О субъектах взаимодействия и статистику (реальную или оценочную) соберите из описанных в презентации подходов, систему, которая сможет улучшить/изменить/заменить навигацию по разделу (стр. 107, 109, 112). 2. Наполните выбранную систему реальными данными 3 . р е д и з а й н н а в и га ц и и / с и н т е з вну три группы: 10 мин
8. ДИЗАЙН 1. Подумайте, какие графические приемы помогли бы укрепить и улучшить навигацию в рамках вашей системы 2. Сделайте несколько скетчей (опционально) 3 . р е д и з а й н н а в и га ц и и / с и н т е з вну три группы: 15 мин
9. ТЕСТИРОВАНИЕ 1. Презентуйте свою систему 2. Возьмите лист с самыми важными функциями, которые вы сделали в начале занятия и проверьте, удобна ли ваша система навигации для их выполнения 3. Возьмите лист другой команды и сделайте то же самое. 3 . р е д и з а й н н а в и га ц и и / а н а л и з Обсу ж дение: 15 мин
СПАСИБО Р Ш С Д 4 н о я б р я 2 0 1 7 ЛАРА СИМОНО В А

Recomendados

Accessibility meets structure
Accessibility meets structureAccessibility meets structure
Accessibility meets structure
Lara Simonova
 
Дипломное проектирование по сайту Agentika.com
Дипломное проектирование по сайту Agentika.comДипломное проектирование по сайту Agentika.com
Дипломное проектирование по сайту Agentika.com
Elena Veselova
 
User Centered Design: обзор процесса
User Centered Design: обзор процессаUser Centered Design: обзор процесса
User Centered Design: обзор процесса
Andrew Sikorskiy
 
Основы информационного проектирования: моделирование предметной области и UX-...
Основы информационного проектирования: моделирование предметной области и UX-...Основы информационного проектирования: моделирование предметной области и UX-...
Основы информационного проектирования: моделирование предметной области и UX-...
Lara Simonova
 
Низкомолекулярное проектирование: структурированные данные и UX
Низкомолекулярное проектирование: структурированные данные и UXНизкомолекулярное проектирование: структурированные данные и UX
Низкомолекулярное проектирование: структурированные данные и UX
Lara Simonova
 
Becoming and Being an Information Architect
Becoming and Being an Information ArchitectBecoming and Being an Information Architect
Becoming and Being an Information Architect
Lara Simonova
 
Проектирование и UX
Проектирование и UXПроектирование и UX
Проектирование и UX
Uplab_University
 
Why we use the Design Research in our projects
Why we use the Design Research in our projectsWhy we use the Design Research in our projects
Why we use the Design Research in our projects
Service Design Experience
 

Recomendados

Accessibility meets structure
Accessibility meets structureAccessibility meets structure
Accessibility meets structure
Lara Simonova
 
Дипломное проектирование по сайту Agentika.com
Дипломное проектирование по сайту Agentika.comДипломное проектирование по сайту Agentika.com
Дипломное проектирование по сайту Agentika.com
Elena Veselova
 
User Centered Design: обзор процесса
User Centered Design: обзор процессаUser Centered Design: обзор процесса
User Centered Design: обзор процесса
Andrew Sikorskiy
 
Основы информационного проектирования: моделирование предметной области и UX-...
Основы информационного проектирования: моделирование предметной области и UX-...Основы информационного проектирования: моделирование предметной области и UX-...
Основы информационного проектирования: моделирование предметной области и UX-...
Lara Simonova
 
Низкомолекулярное проектирование: структурированные данные и UX
Низкомолекулярное проектирование: структурированные данные и UXНизкомолекулярное проектирование: структурированные данные и UX
Низкомолекулярное проектирование: структурированные данные и UX
Lara Simonova
 
Becoming and Being an Information Architect
Becoming and Being an Information ArchitectBecoming and Being an Information Architect
Becoming and Being an Information Architect
Lara Simonova
 
Проектирование и UX
Проектирование и UXПроектирование и UX
Проектирование и UX
Uplab_University
 
Why we use the Design Research in our projects
Why we use the Design Research in our projectsWhy we use the Design Research in our projects
Why we use the Design Research in our projects
Service Design Experience
 
Как написать гайд для исследования на заданную тему
Как написать гайд для исследования на заданную темуКак написать гайд для исследования на заданную тему
Как написать гайд для исследования на заданную тему
LAZOVOY
 
Start-up Reality Check - Empatika в ВШЭ
Start-up Reality Check - Empatika в ВШЭStart-up Reality Check - Empatika в ВШЭ
Start-up Reality Check - Empatika в ВШЭ
Oleg Parinov
 
Новые требования к многоканальному/трансмедийному взаимодействию // Медиабрен...
Новые требования к многоканальному/трансмедийному взаимодействию // Медиабрен...Новые требования к многоканальному/трансмедийному взаимодействию // Медиабрен...
Новые требования к многоканальному/трансмедийному взаимодействию // Медиабрен...
Andrew Sikorskiy
 
Павел Орлов: Технология eye-tracking в маркетинговых исследованиях
Павел Орлов: Технология eye-tracking в маркетинговых исследованияхПавел Орлов: Технология eye-tracking в маркетинговых исследованиях
Павел Орлов: Технология eye-tracking в маркетинговых исследованиях
SPECIA
 
Project Wonderfull. Crowdsourcing.
Project Wonderfull. Crowdsourcing.Project Wonderfull. Crowdsourcing.
Project Wonderfull. Crowdsourcing.
Service Design Experience
 
Project wonderfull. crowdsoursing
Project wonderfull. crowdsoursingProject wonderfull. crowdsoursing
Project wonderfull. crowdsoursing
Vera Kovaleva
 
Human Centered Design
Human Centered DesignHuman Centered Design
Human Centered Design
guvarov
 
IDealMachine October 2014
IDealMachine October 2014IDealMachine October 2014
IDealMachine October 2014
cgvictor
 
WUD2014: Ю.Ветров — Фоновые исследования. Как много читать, знать и не офигевать
WUD2014: Ю.Ветров — Фоновые исследования. Как много читать, знать и не офигеватьWUD2014: Ю.Ветров — Фоновые исследования. Как много читать, знать и не офигевать
WUD2014: Ю.Ветров — Фоновые исследования. Как много читать, знать и не офигевать
Yury Vetrov
 
Мониторинг веб пространства на открытии ИКР в НН
Мониторинг веб пространства на открытии ИКР в ННМониторинг веб пространства на открытии ИКР в НН
Мониторинг веб пространства на открытии ИКР в НН
Alex Zagoumenov
 
Дизайн для людей, приложений, устройств и сервисов
Дизайн для людей, приложений, устройств и сервисовДизайн для людей, приложений, устройств и сервисов
Дизайн для людей, приложений, устройств и сервисов
Constantin Kichinsky
 
Константин Кичинский, Microsoft
Константин Кичинский, MicrosoftКонстантин Кичинский, Microsoft
Константин Кичинский, Microsoft
Diana Dymolazova
 
Качественные исследования для hi-tech продуктов и сервисов
Качественные исследования для hi-tech продуктов и сервисовКачественные исследования для hi-tech продуктов и сервисов
Качественные исследования для hi-tech продуктов и сервисов
Konstantin Efimov
 
Methods of game and applications improvement. Playtestix.
Methods of game and applications improvement. Playtestix.Methods of game and applications improvement. Playtestix.
Methods of game and applications improvement. Playtestix.
Playtestix
 
Cubisma
CubismaCubisma
Cubisma
Marat Garifoullin
 
Информационное обеспечение научного исследования
Информационное обеспечение научного исследованияИнформационное обеспечение научного исследования
Информационное обеспечение научного исследования
Alena Begler
 
Организация эффективных процессов
Организация эффективных процессовОрганизация эффективных процессов
Организация эффективных процессов
Vladimir Melnikov
 
Design Audit as a tool for improving your business
Design Audit as a tool for improving your businessDesign Audit as a tool for improving your business
Design Audit as a tool for improving your business
Alena Kotelnikova
 
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
Eugene Kulakov
 
Принимая решение о создании интегрированной редакции
Принимая решение о создании интегрированной редакцииПринимая решение о создании интегрированной редакции
Принимая решение о создании интегрированной редакции
Oksana Silantieva
 

Mais conteúdo relacionado

Semelhante a Информационное проектирование и дизайн навигации

Human Centered Design
Human Centered DesignHuman Centered Design
Human Centered Design
guvarov
 
IDealMachine October 2014
IDealMachine October 2014IDealMachine October 2014
IDealMachine October 2014
cgvictor
 
Качественные исследования для hi-tech продуктов и сервисов
Качественные исследования для hi-tech продуктов и сервисовКачественные исследования для hi-tech продуктов и сервисов
Качественные исследования для hi-tech продуктов и сервисов
Konstantin Efimov
 
Methods of game and applications improvement. Playtestix.
Methods of game and applications improvement. Playtestix.Methods of game and applications improvement. Playtestix.
Methods of game and applications improvement. Playtestix.
Playtestix
 
Design Audit as a tool for improving your business
Design Audit as a tool for improving your businessDesign Audit as a tool for improving your business
Design Audit as a tool for improving your business
Alena Kotelnikova
 

Semelhante a Информационное проектирование и дизайн навигации (20)

Как написать гайд для исследования на заданную тему
Как написать гайд для исследования на заданную темуКак написать гайд для исследования на заданную тему
Как написать гайд для исследования на заданную тему
 
Start-up Reality Check - Empatika в ВШЭ
Start-up Reality Check - Empatika в ВШЭStart-up Reality Check - Empatika в ВШЭ
Start-up Reality Check - Empatika в ВШЭ
 
Новые требования к многоканальному/трансмедийному взаимодействию // Медиабрен...
Новые требования к многоканальному/трансмедийному взаимодействию // Медиабрен...Новые требования к многоканальному/трансмедийному взаимодействию // Медиабрен...
Новые требования к многоканальному/трансмедийному взаимодействию // Медиабрен...
 
Павел Орлов: Технология eye-tracking в маркетинговых исследованиях
Павел Орлов: Технология eye-tracking в маркетинговых исследованияхПавел Орлов: Технология eye-tracking в маркетинговых исследованиях
Павел Орлов: Технология eye-tracking в маркетинговых исследованиях
 
Project Wonderfull. Crowdsourcing.
Project Wonderfull. Crowdsourcing.Project Wonderfull. Crowdsourcing.
Project Wonderfull. Crowdsourcing.
 
Project wonderfull. crowdsoursing
Project wonderfull. crowdsoursingProject wonderfull. crowdsoursing
Project wonderfull. crowdsoursing
 
Human Centered Design
Human Centered DesignHuman Centered Design
Human Centered Design
 
IDealMachine October 2014
IDealMachine October 2014IDealMachine October 2014
IDealMachine October 2014
 
WUD2014: Ю.Ветров — Фоновые исследования. Как много читать, знать и не офигевать
WUD2014: Ю.Ветров — Фоновые исследования. Как много читать, знать и не офигеватьWUD2014: Ю.Ветров — Фоновые исследования. Как много читать, знать и не офигевать
WUD2014: Ю.Ветров — Фоновые исследования. Как много читать, знать и не офигевать
 
Мониторинг веб пространства на открытии ИКР в НН
Мониторинг веб пространства на открытии ИКР в ННМониторинг веб пространства на открытии ИКР в НН
Мониторинг веб пространства на открытии ИКР в НН
 
Дизайн для людей, приложений, устройств и сервисов
Дизайн для людей, приложений, устройств и сервисовДизайн для людей, приложений, устройств и сервисов
Дизайн для людей, приложений, устройств и сервисов
 
Константин Кичинский, Microsoft
Константин Кичинский, MicrosoftКонстантин Кичинский, Microsoft
Константин Кичинский, Microsoft
 
Качественные исследования для hi-tech продуктов и сервисов
Качественные исследования для hi-tech продуктов и сервисовКачественные исследования для hi-tech продуктов и сервисов
Качественные исследования для hi-tech продуктов и сервисов
 
Methods of game and applications improvement. Playtestix.
Methods of game and applications improvement. Playtestix.Methods of game and applications improvement. Playtestix.
Methods of game and applications improvement. Playtestix.
 
Cubisma
CubismaCubisma
Cubisma
 
Информационное обеспечение научного исследования
Информационное обеспечение научного исследованияИнформационное обеспечение научного исследования
Информационное обеспечение научного исследования
 
Организация эффективных процессов
Организация эффективных процессовОрганизация эффективных процессов
Организация эффективных процессов
 
Design Audit as a tool for improving your business
Design Audit as a tool for improving your businessDesign Audit as a tool for improving your business
Design Audit as a tool for improving your business
 
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
 
Принимая решение о создании интегрированной редакции
Принимая решение о создании интегрированной редакцииПринимая решение о создании интегрированной редакции
Принимая решение о создании интегрированной редакции
 

Информационное проектирование и дизайн навигации

  • 1. ИНФОРМАЦИОННОЕ ПРОЕКТИРОВАНИЕ И ДИЗАЙН НАВИГАЦИИ Р Ш С Д 4 н о я б р я 2 0 1 7 н а п р и м е р е к ата л о га у с л у г п о р та л а M O S . R U ЛАРА СИМОНО В А
  • 2. ЛАРА СИМОНОВА Проекты • Patrn (таск-менеджер для анимационной студии) • Campus (образовательный проект рамках «Мастерской» Димы Барбанеля при поддержке Яндекс) • Textr (текстовый конструктор для издательства) • Почта России (подписное агентство, почта id, портал, электронные заказные письма) • Channelkit (инструмент для организации знаний) • Collectrium, the Christie’s Company (отдел анализа данных аукционного дома) Контакты • Facebook: Lara Simonova • Upwork / Behance / Linkedin • E-mail: lara@channelkit.com
  • 3. 1. Теория. Информационное проектирование. • Любой сервис — надстройка на сложной экосистеме на стыке цифровой и аналоговой сред • Нужно понять, как эту экосистему воспринимают участники процесса • И формализовать в виде информационной модели области 2. Теория. Модель области. Интерфейсы. Навигация • Фреймворк для построения информационной модели области • UX-дизайн, графический дизайн. Навигация: типы, задачи, точки входа • Что еще нужно учитывать 3. Исходные данные. • Задача: создать информационную модель раздела услуг портала mos.ru и оптимизировать навигацию • Особенности субстрата • Спектр навигационных подходов, на которые можно опираться • Как будет строиться практическая часть 4. Практика. Редизайн навигации. • Исследование • Моделирование • Приоритезация • Информационный дизайн. Пластический дизайн. ПЛАН
  • 5. СЛОЖНАЯ ЭКОСИСТЕМА а н а л о г о в а я СРЕ Д А Ц И Ф РО В АЯ СРЕ Д А с у щ н о с т и п р о ц е с с ы ПОЛЬЗОВАТЕЛЬСКИЙ ОПЫТ 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ
  • 6. ПРИМЕР а н а л о г о в а я СРЕ Д А Ц И Ф РО В АЯ СРЕ Д А с у щ н о с т и п р о ц е с с ы Peter Moreville (WIAD 2016) Harvard Business School’s Baker Library 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ / с л о ж н а я э к о с и с т е м а
  • 7. ПРИМЕР Ц И Ф РО В АЯ СРЕ Д А п р о ц е с с ы Каталог Карточка книги Заказ Поиск Возврат Чтение Обучение Поиск Заказ Обучение а н а л о г о в а я СРЕ Д А с у щ н о с т и Книги Полки Библиотекарь Читатель UX “This one test made it clear that information architecture isn’t just about websites; it’s about the whole ecosystem, because everything is deeply intertwingled” Peter Morville 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ / с л о ж н а я э к о с и с т е м а
  • 8. Любой продукт — это контейнер для пользовательского опыта взаимодействия со сложной средой на стыке цифрового и аналогового миров Этот контейнер может быть: • Неудачным — идущим в разрез с реальным опытом • Удачным — соответствующим реальному опыту • Визионерским — модифицирующим среду и создающим новый опыт, более удобный пользователю КОНТЕЙНЕР ДЛЯ ОПЫТА 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ
  • 9. Перед тем, как начать строить с нуля или модифицировать существующий продукт, нужно понять, как устроена «вселенная», в которой этот продукт живет. ИССЛЕДОВАНИЯ 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ
  • 10. 1. Какие в ней есть основные сущности и процессы? СУЩНОСТИ И ПРОЦЕССЫ ЧЕЛОВЕК ИНФОРМИРОВАНИЕ СОБЫТИЕ ПОЛУЧЕНИЕ ДОКУМЕНТ ЗАПРОС ДЕНЬГИ МЕСТО ОФОРМЛЕНИЕ ПОСЕЩЕНИЕ ОРГАНИЗАЦИЯ ЗАПИСЬ п р о ц е с с ыс у щ н о с т и 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ / ИССЛЕ Д О В АНИЯ
  • 11. 2. Какими объективными свойствами они обладают? СВОЙСТВА ЧЕЛОВЕК МЕСТО СОБЫТИЕ ДОКУМЕНТ ДЕНЬГИ ОРГАНИЗАЦИЯ должность сумма срок действия название валюта имя тип документа дата выдачи адрес название цена с в о й с т в ас у щ н о с т и 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ / ИССЛЕ Д О В АНИЯ
  • 12. 3. Как субъективно воспринимаются пользователями? ПЕРЦЕПТИВНЫЕ КАРТЫ 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ / ИССЛЕ Д О В АНИЯ
  • 13. 3. Как субъективно воспринимаются пользователями? ПЕРЦЕПТИВНЫЕ КАРТЫ 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ / ИССЛЕ Д О В АНИЯ
  • 14. 3. Как субъективно воспринимаются пользователями? ПЕРЦЕПТИВНЫЕ КАРТЫ 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ / ИССЛЕ Д О В АНИЯ
  • 15. • Расположенные рядом по какому-то (например, пространственному) признаку сущности записываются в мозгу рядом • Записанные рядом в мозгу сущности быстрее активируются в тандеме ПЕРЦЕПТИВНЫЕ КАРТЫ 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ / ИССЛЕ Д О В АНИЯ
  • 16. ВОСПРИЯТИЕ И UX-ДИЗАЙН 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ / в о с п р и я т и е
  • 17. ВОСПРИЯТИЕ И UX-ДИЗАЙН МИР Время Пространство Объекты 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ / в о с п р и я т и е
  • 18. ВОСПРИЯТИЕ И UX-ДИЗАЙН Опыт Объекты Действия Процессы Навыки Движение П о л ь з о в ат е л ь МИР Время Пространство Объекты восприятие 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ / в о с п р и я т и е
  • 19. ВОСПРИЯТИЕ И UX-ДИЗАЙН Опыт Объекты Действия Процессы Навыки Движение П о л ь з о в ат е л ь Перцептивные карты запись существующие / новые ассоциированные бессознательные МИР Время Пространство Объекты восприятие 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ / в о с п р и я т и е
  • 20. ВОСПРИЯТИЕ И UX-ДИЗАЙН Опыт Объекты Действия Процессы Навыки Движение П о л ь з о в ат е л ь Перцептивные карты Ментальные модели области запись упаковка существующие / новые ассоциированные бессознательные рабочий механизм потенциально осознаваемые МИР Время Пространство Объекты восприятие 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ / в о с п р и я т и е
  • 21. ВОСПРИЯТИЕ И UX-ДИЗАЙН Опыт Объекты Действия Процессы Навыки Движение П о л ь з о в ат е л ь Перцептивные карты Ментальные модели области запись упаковка существующие / новые ассоциированные инвариантные / зависящие от среды бессознательные рабочий механизм потенциально осознаваемые Сущности Свойства Связи информационное проектирование СИСТЕМЫМИР Время Пространство Объекты восприятие формализация 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ / в о с п р и я т и е
  • 22. ВОСПРИЯТИЕ И UX-ДИЗАЙН Опыт Объекты Действия Процессы Навыки Движение П о л ь з о в ат е л ь Перцептивные карты Ментальные модели области запись упаковка упаковка существующие / новые ассоциированные инвариантные / зависящие от среды мета-структуры бессознательные рабочий механизм потенциально осознаваемые Сущности Свойства Связи Классификация Навигация Сценарии Контролы информационное проектирование интерфейсы СИСТЕМЫМИР Время Пространство Объекты восприятие формализация 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ / в о с п р и я т и е
  • 23. ВОСПРИЯТИЕ И UX-ДИЗАЙН Опыт Объекты Действия Процессы Навыки Движение П о л ь з о в ат е л ь Перцептивные карты Ментальные модели области Ментальная модель сервиса запись упаковка упаковка существующие / новые ассоциированные инвариантные / зависящие от среды мета-структуры бессознательные рабочий механизм потенциально осознаваемые потенциально осознаваемая Сущности Свойства Связи Классификация Навигация Сценарии Контролы информационное проектирование интерфейсы чтение СИСТЕМЫМИР Время Пространство Объекты восприятие формализация 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ / в о с п р и я т и е
  • 24. AFFORDANCES • Человек воспринимает объект не через его непосредственные свойства, а скорее через набор действий, которые, по его мнению, с этим объектом можно совершить (affordances) [Norman] • И этот набор и является тем, что нужно закладывать в сущности, в явном виде показывать пользователю при дизайне процессов и взаимодействий. О Б Ъ ЕКТ восприятие Действия Интерфейс Свойства База данных формализация 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ / в о с п р и я т и е
  • 25. ЦЕЛИ Вся совокупность этих действий (affordances) не меняется, однако их набор зависит от контекста и целей, с которыми человек приходит к взаимодействию с объектом Ц ЕЛИ О Б Ъ ЕКТ восприятие Действия Интерфейс Свойства База данных формализация 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ / в о с п р и я т и е
  • 26. СОЗДАНИЕ ПРОДУКТА И IA МИР ч е л о в е к digital analog продукт данные наблюдения опросы опросы наблюдения эксперименты задачи ограничения приоритезация выбор под цели обоснование тестирование к а к в с е у с т р о е н о ? к а к в о с п р и н и м а е т с я ? к а к ф о р м а л и з о в ат ь ? к а к с д е л ат ь ? исследования и анализ моделирование UX-дизайн 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ / в о п р о с ы
  • 27. ОПРЕДЕЛЕНИЕ Совокупность практик, направленных на: • Выявление значимых сущностей области; • Изучение и формализацию их свойств, связей между ними; • Определение возможных действий с ними в рамках потенциальных пользовательских целей; • Разработка форматов хранения этих данных; • И способов передачи для дальнейшего их использования в процессе создания продукта... ... называется информационным проектированием и ложится в основу в том числе сервис-дизайна. 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ / и н ф о р м а ц и о н н а я а р х и т е к т у р а
  • 28. ОПРЕДЕЛЕНИЕ А результат информационного проектирования, заложенный в продукт, называется его информационной архитектурой 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ / и н ф о р м а ц и о н н а я а р х и т е к т у р а
  • 29. ПРОДАКТ-ДИЗАЙН и ИА Исследования и анализ Оптимизация и формализация Имплементация Тестирование • Опросы • Брифы • Поддержка дизайна • Поддержка разработки • Схемы • Таблицы • Майндмэпы • Спецификации • Вайрфреймы 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ / и н ф о р м а ц и о н н а я а р х и т е к т у р а
  • 30. ПРОЕКТИРОВАНИЕ 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ
  • 31. ПРОЕКТИРОВАНИЕ ч е л о в е к с у щ н о с т и о б л а с т ь 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ
  • 32. ПРОЕКТИРОВАНИЕ ч е л о в е к с у щ н о с т и о б л а с т ь И Д ЕЯ п р о д у к тА Для кого? Зачем? Монетизация? исследование 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ
  • 33. ПРОЕКТИРОВАНИЕ ч е л о в е к с у щ н о с т и о б л а с т ь И Д ЕЯ п р о д у к тА Сущностей Свойств Связей Действий Для кого? Зачем? Монетизация? отбор значимых для решения конкретных задач исследование 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ
  • 34. ПРОЕКТИРОВАНИЕ ч е л о в е к с у щ н о с т и о б л а с т ь п р о д у к т И Д ЕЯ п р о д у к тА Сущностей Свойств Связей Действий Для кого? Зачем? Монетизация? Информационная архитектура отбор формализация значимых для решения конкретных задач исследование 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ
  • 35. ПРОЕКТИРОВАНИЕ ч е л о в е к с у щ н о с т и о б л а с т ь п р о д у к т И Д ЕЯ п р о д у к тА Сущностей Свойств Связей Действий Для кого? Зачем? Монетизация? Информационная архитектура Сценарии Интеферсы отбор формализация значимых для решения конкретных задач исследование 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ
  • 36. ПРОЕКТИРОВАНИЕ ч е л о в е к с у щ н о с т и о б л а с т ь п р о д у к т И Д ЕЯ п р о д у к тА Сущностей Свойств Связей Действий Для кого? Зачем? Монетизация? Информационная архитектура Сценарии Интеферсы отбор формализация значимых для решения конкретных задач оптимизация исследование Маркетинг Тестирование ... ≈ c s t≈ c s t ≈ V A R 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ
  • 37. ВОПРОСЫ 1. Кто участвует в поцессе (люди, объекты) 2. Как участники картируют область 3. Какие задачи решаются участниками 4. В рамках каких процессов 5. В каких контекстах 6. Что из вышеперечисленного является ключевыми компонентами, без которых система не будет работать о п р е д е л е н и е р а м о к с и с т е м ы => 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ
  • 38. РЕЗЮМЕ Определение и формализация базовых сущностей в области, их свойств и правил взаимодействия, не привязанных к конкретным продуктовым решениями, позволяет создавать, поддерживать и масштабировать непротиворечивую логику интерфейсов, баз данных, процессов, обеспечивающих хороший пользовательский опыт. 1 . ИН Ф ОРМА Ц ИОННОЕ ПРОЕКТИРО В АНИЕ
  • 40. ПРЕДМЕТНАЯ ОБЛАСТЬ 2 . 1 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к Сущности / Concepts Свойства / Properties Агенты / Agents Термины / Terms Связи / Realtionships в з а и м о д е й с т в и я
  • 41. ПРЕДМЕТНАЯ ОБЛАСТЬ Сущности / Concepts Свойства / Properties Агенты / Agents Термины / Terms Связи / Realtionships в з а и м о д е й с т в и я М о д е л ь д а н н ы х 2 . 1 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к
  • 42. Модель данных это совокупность терминов и принципов, описывающих определенную предметную область ОБЩЕЕ ОПРЕДЕЛЕНИЕ 2 . 1 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к
  • 43. МОДЕЛИРОВАНИЕ ДАННЫХ Чтобы построить любую модель, нужно определить границы вселенной, которую она должна описывать, и сформулировать задачи и области где информация, входящая в ее состав будет использоваться 2 . 1 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к
  • 44. Изучение области 1 МОДЕЛИРОВАНИЕ ДАННЫХ 2 . 1 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к
  • 45. Определить источники, которые содержат информацию об области, ее сущностях, процессах, агентах 1. Базы данных 2. Сайты организаций / людей 3. Инструменты 4. Существующие модели ИСТОЧНИКИ 2 . 1 . 1 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / и з у ч е н и е
  • 46. Изучение области 1 Моделирование области ключевые сущности и их взаимосвязи 2 МОДЕЛИРОВАНИЕ ДАННЫХ 2 . 1 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к
  • 47. Вселенная может состоять, например, из отобранных согласно определенному набору принципов ОБЪЕКТОВ ВСЕЛЕННАЯ 2 . 1 . 2 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / м о д е л и р о в а н и е о б л а с т и
  • 48. И набора Вселенная может состоять, например, из отобранных согласно определенному набору принципов ОБЪЕКТОВ СВЯЗАННЫХ СУЩНОСТЕЙ ВСЕЛЕННАЯ 2 . 1 . 2 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / м о д е л и р о в а н и е о б л а с т и
  • 49. источники книги, статьи, сайты места точки продаж, места рождения, событий СОБЫТИЯ продажи, выставки, концерты, исследования ОРГАНИЗАЦИИ музеи, склады, бренды, контрагенты ЛЮДИ создатели, владельцы, пользователи И набора СВЯЗАННЫХ СУЩНОСТЕЙ Вселенная может состоять, например из отобранных согласно определенному набору принципов ОБЪЕКТОВ ВСЕЛЕННАЯ 2 . 1 . 2 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / м о д е л и р о в а н и е о б л а с т и
  • 50. Доработка: ВСЕЛЕННАЯ 2 . 1 . 2 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / м о д е л и р о в а н и е о б л а с т и
  • 51. Доработка: 1. Вынесение наиболее значимых концептов в отдельные сущности и их более подробное описание Аукционная продажа Событие Остальные события выставки, исследования, реставрации ВСЕЛЕННАЯ 2 . 1 . 2 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / м о д е л и р о в а н и е о б л а с т и
  • 52. Доработка: 1. Вынесение наиболее значимых концептов в отдельные сущности и их более подробное описание 2. Разделение сущности на несколько отдельных Аукционная продажа Событие Мес Адрес то Адм. единица Остальные события выставки, исследования, реставрации название адрес город, страна, континент координаты тип: город, страна, ... название родительский термин + ВСЕЛЕННАЯ 2 . 1 . 2 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / м о д е л и р о в а н и е о б л а с т и
  • 53. Моделирование содержания свойства ключевых сущностей 4 3 Изучение области 1 МОДЕЛИРОВАНИЕ ДАННЫХ Моделирование области ключевые сущности и их взаимосвязи 2 2 . 1 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к
  • 54. ТРИ ВОПРОСА 2 . 1 . 4 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / м о д е л и р о в а н и е с о д е р ж а н и я
  • 55. А. Как используются данные? 2 . 1 . 4 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / м о д е л и р о в а н и е с о д е р ж а н и я
  • 56. Умные поисковые интерфейсы (автокомплиты, полнотекстовый поиск, фильтрация и сортировка по полям) Удобство и эффективность контроля качества (автоматическое распознавание отклоняющихся значений, валидация бизнес-правил) Обучение алгоритмов получения данных (автоматическое распознавание нужных текстов, их скрейпинг и парсинг в структурированные поля) Обучение алгоритмов кластеризации (поиск по изображению, рекомендации похожих объектов) Расчет динамики цен (расчет ценовых индексов, вычисление ценовых коридоров) А. Как используются данные? 2 . 1 . 4 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / м о д е л и р о в а н и е с о д е р ж а н и я
  • 57. B. Какие данные нужны? 2 . 1 . 4 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / м о д е л и р о в а н и е с о д е р ж а н и я
  • 58. Определение набора свойств для ключевых сущностей ОБЪЕКТ ИСТОЧНИК СОБЫТИЕ ЧЕЛОВЕК МЕСТО ОРГАНИЗАЦИЯ автор длина тип название валюта имя материал роль куратор статус широта цвет дата адрес цена редактор спонсор ссылка с в о й с т в ас у щ н о с т и B. Какие данные нужны? 2 . 1 . 4 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / м о д е л и р о в а н и е с о д е р ж а н и я
  • 59. С. Как данные получают? 2 . 1 . 4 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / м о д е л и р о в а н и е с о д е р ж а н и я
  • 60. Скрейпинг с сайтов в индустрии (текстовые описания, обычно слабо структурированные, структура отличается от источника к источнику) Отцифровка аналоговых источников (неструктурированные текстовые описания, полученные методом оптического распознования, с ошибками) Подключение к тематическим базам данных (хорошо стркутурированные, общепринятые методы организации и терминология, но небольшие объемы) Ручной ввод (времязатратно и высокая вероятность ошибок) С. Как данные получают? 2 . 1 . 4 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / м о д е л и р о в а н и е с о д е р ж а н и я
  • 61. P 1 P 3 P 7 P 6 P 8 P 9 P 2 V 1.1L 1 V 3.1L 3 V 7.1L 7 V 2.2L 2 V 6.1L 6 V 8.4 V 9.1 L 8.2 L 9 V 9.3 V 6.2 V 8.5 V 9.2 с в о й с т в а з н а ч е н и я P 10 V 10.1L 10 V 10.3V 10.2 л е й б л с у щ н о с т ь СУЩНОСТЬ 2 . 1 . 4 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / м о д е л и р о в а н и е с о д е р ж а н и я
  • 62. ТРИ ВОПРОСА А. Как данные используются? В. Какие данные нужны? С. Как данные получают? P 1 P 3 P 7 P 6 P 8 P 9 P 2 V 1.1L 1 V 3.1L 3 V 7.1L 7 V 2.2L 2 V 6.1L 6 V 8.4 V 9.1 L 8.2 L 9 V 9.3 V 6.2 V 8.5 V 9.2 с в о й с т в а з н а ч е н и я P 10 V 10.1L 10 V 10.3V 10.2 л е й б л с у щ н о с т ь 2 . 1 . 4 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / м о д е л и р о в а н и е с о д е р ж а н и я
  • 63. ТРИ ВОПРОСА P 1 P 3 P 7 P 6 P 8 P 9 P 2 V 1.1L 1 V 3.1L 3 V 7.1L 7 V 2.2L 2 V 6.1L 6 V 8.4 V 9.1 L 8.2 L 9 V 9.3 V 6.2 V 8.5 V 9.2 с в о й с т в а з н а ч е н и я P 10 V 10.1L 10 V 10.3V 10.2 л е й б л с у щ н о с т ь А. Как данные используются? В. Какие данные нужны? С. Как данные получают? о т б о р в м о д е л ь р е л е в а н т н ы х д а н н ы х в ы с о к о г о к а ч е с т в а р е а л и с т и ч н о й д о с т у п н о с т и => 2 . 1 . 4 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / м о д е л и р о в а н и е с о д е р ж а н и я
  • 64. СЛЕДСТВИЯ Отбор в модель релевантных данных высокого качества и реалестичной доступности требует: • Определения релевантных свойств для каждой ключевой сущности; • Скрейпинг и, потенциально, хранения фри-текстовых данных; • Парсинг фри-текстовых данных в структурированные поля нужного уровня подробности; • Имплементации контролируемых словарей терминов, использующихся как значения основных свойств. 2 . 1 . 4 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / м о д е л и р о в а н и е с о д е р ж а н и я
  • 65. 6 5 Дизайн схемы данных принципы организации свойств Моделирование содержания свойства ключевых сущностей 4 3 Изучение области 1 МОДЕЛИРОВАНИЕ ДАННЫХ Моделирование области ключевые сущности и их взаимосвязи 2 2 . 1 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к
  • 66. Полная модель данных состоит из: ЧТО ТАКОЕ СХЕМА ДАННЫХ? 2 . 1 . 6 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / д и з а й н с х е м ы д а н н ы х
  • 67. Полная модель области состоит из: Сущностей представляющих основные концепты (Объект, Событие, Место, Человек, ...) Списка свойств каждой сущности и их структуры (Объект: автор, дата создания, место создания, материал, измерения, ...) (Измерения: тип, значение, единица измерения, система измерения, ...) Словарей значений (терминов) для каждого из свойств (Единицы измерения: м, метры, футы, feet, mètre, ...) Взаимосвязей сущностей, свойств и значений (онтологии, сущность-атрибут-значение EAV, etc) ЧТО ТАКОЕ СХЕМА ДАННЫХ? 2 . 1 . 6 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / д и з а й н с х е м ы д а н н ы х
  • 68. Они сгруппированы в две конструкции, которые моделируются отдельно: ЧТО ТАКОЕ СХЕМА ДАННЫХ? 2 . 1 . 6 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / д и з а й н с х е м ы д а н н ы х
  • 69. Они сгруппированы в две конструкции, которые моделируются отдельно: Сущности + Свойства + Отношения = Схема ЧТО ТАКОЕ СХЕМА ДАННЫХ? 2 . 1 . 6 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / д и з а й н с х е м ы д а н н ы х
  • 70. Они сгруппированы в две конструкции, которые моделируются отдельно: Сущности + Свойства + Отношения = Схема Термины + Отношения + Правила = Словари ЧТО ТАКОЕ СХЕМА ДАННЫХ? 2 . 1 . 6 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / д и з а й н с х е м ы д а н н ы х
  • 71. МОДЕЛЬ { ЧТО ТАКОЕ СХЕМА ДАННЫХ? Они сгруппированы в две конструкции, которые моделируются отдельно: Сущности + Свойства + Отношения = Схема Термины + Отношения + Правила = Словари 2 . 1 . 6 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / д и з а й н с х е м ы д а н н ы х
  • 72. Какие подходы уже существуют для описания области? ВЫБОР СХЕМЫ: АНАЛОГИ 2 . 1 . 6 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / д и з а й н с х е м ы д а н н ы х
  • 73. Какие подходы уже существуют для описания области? Онтологические фреймворки Пример: schema.org, dbpedia.org Принцип: Субъект – Предикат – Объект (RDF) Плюсы: высокая описательная гибкость Минусы: свойства не организованы в логические кластеры сложно управлять и разработать единообразные принципы описания Категорийные фреймворки Пример: Getty’s Categories for the Description of Works of Art (CDWA) Принцип: Entity – Attribute – Value (EAV) Плюсы: свойства сгруппированы в концептуальные блоки описательные принципы четко определены Минусы: менее гибкая ВЫБОР СХЕМЫ: АНАЛОГИ 3 . 6 . И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Д ИЗАЙН СХЕМЫ Д АННЫХ
  • 74. 1. Удобство принципа организации 2. Специфичность для области 3. Признаность сообществом 4. Описание смежных конецптов 5. Проработанная терминология (словари) ВЫБОР СХЕМЫ: ОРИЕНТИРЫ 2 . 1 . 6 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / д и з а й н с х е м ы д а н н ы х
  • 75. ОГРАНИЧЕНИЯ СХЕМЫ 1. Подробность 2. Полнота описания области 3 . 6 . И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Д ИЗАЙН СХЕМЫ Д АННЫХ
  • 76. ОГРАНИЧЕНИЯ СХЕМЫ 1. Подробность 2. Полнота описания области => упрощение / усложнение существующих сущностей расширение набора сущностей 2 . 1 . 6 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / д и з а й н с х е м ы д а н н ы х
  • 77. Создание тезаврусов структура и принципы наполнения 7 8 6 5 Дизайн схемы данных принципы организации свойств Моделирование содержания свойства ключевых сущностей 4 3 Изучение области 1 МОДЕЛИРОВАНИЕ ДАННЫХ Моделирование области ключевые сущности и их взаимосвязи 2 2 . 1 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к
  • 78. Список терминов Утверждения об их иерархических взаимосвязях Утверждения о синонимии (+ переводы) Утверждения о связанных терминах (≠ синонимы) Утверждения о предпочтительности терминов Набор дополнительных свойств (определения, ссылки) Нестрогий синоним: Словарь ЧТО ТАКОЕ ТЕЗАВРУС? 2 . 1 . 8 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / с о з д а н и е т е з а у р у с о в
  • 79. ТЕЗАУРУСЫ: ОРИЕНТИРЫ 2 . 1 . 8 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / с о з д а н и е т е з а у р у с о в
  • 80. ТЕЗАУРУСЫ: ОРИЕНТИРЫ 1. Что уже есть? (Примеры: AAT, TGN, ULAN, CONA) 2. Как организованы статьи и их взаимосвязи? (Синонимы, переводы, иерархии, предпочтительность, мэппинг, определения) 3. Насколько полные? (Краткие/полные словари) 4. Как происходит модерация? (Открытый краудсорс, краудсорс среди специалистов, кураторы) 5. Откуда еще брать термины? (Несловарные источники: сайты индустрии) 2 . 1 . 8 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / с о з д а н и е т е з а у р у с о в
  • 81. ПРИМЕР СЛОВАРНОЙ СТАТЬИ 2 . 1 . 8 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / с о з д а н и е т е з а у р у с о в
  • 82. ПРИМЕР СЛОВАРНОЙ СТАТЬИ с л о в а р и С л о в а р ь « РОЛИ » с тат ь я « х у д о ж н и к » Единицы измерений Материалы Системы счисления Типы измерений Техники Роли Автор Водитель Издатель Композитор Космонавт Художник Футуролог Этнограф ID: [номер термина] Иерархия: создатель художник акварелист график Getty ID: [AAT identification number] Определение: [текстовое описание] Мэппинг на другие словари Типы объектов: картины литографии Области: изящные искусства Категории искусства: авангард ренессанс Синонимы и переводы painter (English, preferred) peintre (French) kunstmaler (German) 2 . 1 . 8 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / с о з д а н и е т е з а у р у с о в
  • 83. ПРАВИЛА НАПОЛНЕНИЯ 1. Форматирование (заглавные/прописные буквы, пробелы, дефисы, скобки, диакритика, последовательность, цифры) 2. Предпочтительность (частотность, язык, орфография) 3. Уровень гранулярности (широкие/узкие термины) 4. Поясняющие слова (позволяющие отличить омонимы) 5. Один общий словарь или разные (серый: масть лошади и цвет машины) 6. Длина терминов (важно для навигации, например) 2 . 1 . 8 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к / с о з д а н и е т е з а у р у с о в
  • 84. ВЫВОД структ ура контентправила наполнения 2 . 1 . 8 И н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / Ф р е й м в о р к
  • 85. 2.2 МОДЕЛЬ ОБЛАСТИ. ВЛИЯНИЕ НА ИНТЕРФЕЙСЫ т е о р и я
  • 86. ВЛИЯНИЕ НА 4 УРОВНЯХ А. Бизнес (оптимизация процессов, логистики, финансовых схем) B. Разработка (удобное проектирование баз данных, бэкенда, логики фронтенда, масштабируемость) C. Графический дизайн (UI-kit и масштабируемость) D. UX и продакт дизайн (понятные интерфейсы, чистые пользовательские данные, умные рекомендательные системы, machine learning) 2 . 2 и н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / В ЛИЯНИЕ НА ИНТЕР Ф ЕЙСЫ
  • 87. ВЛИЯНИЕ НА 4 УРОВНЯХ А. Бизнес (оптимизация процессов, логистики, финансовых схем) B. Разработка (удобное проектирование баз данных, бэкенда, логики фронтенда, масштабируемость) C. Графический дизайн (UI-kit и масштабируемость) D. UX и продакт дизайн (понятные интерфейсы, чистые пользовательские данные, умные рекомендательные системы, machine learning) 2 . 2 и н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / В ЛИЯНИЕ НА ИНТЕР Ф ЕЙСЫ
  • 88. 1. Стилистическая логика страниц C. ГРАФИЧЕСКИЙ ДИЗАЙН выставка концерт событие Стилистическая унификация страниц одного типа сущностей: «выставка» и «концерт» будут выглядеть похоже, так как оба — «событие»; 2 . 2 и н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / В ЛИЯНИЕ НА ИНТЕР Ф ЕЙСЫ
  • 89. 1. Стилистическая логика страниц C. ГРАФИЧЕСКИЙ ДИЗАЙН выставка человекконцерт компания событие субъект Стилистическая унификация страниц одного типа сущностей: «выставка» и «концерт» будут выглядеть похоже, так как оба — «событие»; Стилистические различия страниц разных типов сущностей: страницы типа «субъект», отличные от страниц типа «событие»; 2 . 2 и н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / В ЛИЯНИЕ НА ИНТЕР Ф ЕЙСЫ
  • 90. 1. Стилистическая логика страниц C. ГРАФИЧЕСКИЙ ДИЗАЙН выставка выставка выставка человек человек человек концерт концерт концерт компания компания компания событие субъект просмотр создание редактирование Стилистическая унификация страниц одного типа сущностей: «выставка» и «концерт» будут выглядеть похоже, так как оба — «событие» (визуальное кодирование); Стилистические различия страниц разных типов сущностей: страницы типа «объект», отличные от страниц типа «событие»; Стилистическая унификация страниц, выполняющих одну функцию: редактирование, создание, просмотр. 2 . 2 и н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / В ЛИЯНИЕ НА ИНТЕР Ф ЕЙСЫ
  • 91. 2. Модульность Четко описанные сущности позволяют создать сиситему шаблонов их отображения с возможностью их использования в разных контекстах: страница, виджет в контексте другой старницы, модальности. C. ГРАФИЧЕСКИЙ ДИЗАЙН концерт артист площадка оплата MTS каталог ИНФОРМАЦИОННАЯ МОДЕЛЬ КОНТЕКСТЫ => шаблоны сущность: Событие тип: Концерт название: Alfa-future people участники: A, B, C площадка: Завидово дата: 23.07.2018 время начала: 20:00 длительность: 12:30 цена: 2 500 руб. полная картинка: full.jpg средняя картика: medium.jpeg превью: small.jpeg страница концерта вся информация большая картинка артист / превью название дата стоимость площадка маленькая картинка площадка / превью название участники дата стоимость маленькая картинка площадка / резюме название дата стоимость площадка мобильный / пуш название дата время площадка каталог / превью название дата стоимость площадка маленькая картинка 2 . 2 и н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / В ЛИЯНИЕ НА ИНТЕР Ф ЕЙСЫ
  • 92. 3. Унификация UI элементов Подробно продуманные свойства, для которых понятен тип данных, количество значений, влияние на значения других свойств, позволяют сгруппировать их по аналогии и использовать в каждом случае один тип UI элементов. А также облегчают коммуникацию с фротенд-разработчиками. C. ГРАФИЧЕСКИЙ ДИЗАЙН ИНФОРМАЦИОННАЯ МОДЕЛЬ событие человек сущность: Событие тип: Концерт Выставка Спектакль Флешмоб Маркет сущность: Человек тип: Артист Подрядчик Посетитель Организатор Концерт Выставка Спектакль Флешмоб Маркет Артист Подрядчик Посетитель Организатор Выберите тип Выберите тип Артист Концерт Подрядчик Посетитель Организатор Выставка Спектакль Флешмоб Маркет 2 . 2 и н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / В ЛИЯНИЕ НА ИНТЕР Ф ЕЙСЫ
  • 93. Продуманная навигация и контекстные действия (меню, категоризаторы, контекстные ссылки на другие сущности, операции с сущностями) Умные поисковые интерфейсы (автокомплиты, полнотекстовый поиск, фильтрация и сортировка по полям) Удобство и эффективность контроля качества (автоматическое распознавание отклоняющихся значений, валидация бизнес-правил) Обучение алгоритмов получения данных (автоматическое распознавание нужных текстов, их скрейпинг и парсинг в структурированные поля) Обучение алгоритмов кластеризации (поиск по изображению, рекомендации похожих объектов) Рассчет динамики цен (рассчет ценовых индексов, вычисление ценовых коридоров) D. UX И ПРОДАКТ ДИЗАЙН 2 . 2 и н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / В ЛИЯНИЕ НА ИНТЕР Ф ЕЙСЫ
  • 94. Продуманная навигация и контекстные действия (меню, категоризаторы, контекстные ссылки на другие сущности, операции с сущностями) Умные поисковые интерфейсы (автокомплиты, полнотекстовый поиск, фильтрация и сортировка по полям) Удобство и эффективность контроля качества (автоматическое распознавание отклоняющихся значений, валидация бизнес-правил) Обучение алгоритмов получения данных (автоматическое распознавание нужных текстов, их скрейпинг и парсинг в структурированные поля) Обучение алгоритмов кластеризации (поиск по изображению, рекомендации похожих объектов) Рассчет динамики цен (рассчет ценовых индексов, вычисление ценовых коридоров) D. UX И ПРОДАКТ ДИЗАЙН 2 . 2 и н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / В ЛИЯНИЕ НА ИНТЕР Ф ЕЙСЫ
  • 96. НАВИГАЦИЯ Главная задача — сориентироваться д и з а й н н а в и га ц и и Цветовое кодирование Композиция страниц Типографика Приоритезация Пиктографические маркеры etc... Запросы Категоризация Названия разделов Фильтрация Аналогии Сортировка Группировка Типы информации Логическ ая часть «на вход» «на выход» пластическ ая часть информационное проектирование 2 . 3 и н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / н а в и га ц и я
  • 97. ЛОГИЧЕСКАЯ ЧАСТЬ Сначала надо подумать о том, как помочь пользователю выбрать способ найти/выполнить то, что ему нужно («навигация на входе») А затем о том, как помочь выбрать из предложенных вариантов, если их несколько («навигация на выходе») 2 . 3 и н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / н а в и га ц и я
  • 98. ХОРОШО БЫ ПОНЯТЬ 1. С каким изначальным сетапом приходит пользоватль 2. Какие вопросы он себе задает 3. Как он представляет себе область, покрываемую сервисом (ментальная модель) 4. Какая информация нужна для принятия решений 5. Как часто он пользуется сервисом и конкретными его частями 6. Ограничения и требования сервиса, которые нужно учесть 2 . 3 и н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / н а в и га ц и я
  • 99. 1. СЕТАП Точно знаю, какой Приблизительно знаю, какой, но не могу сформулирвовать запрос Хочу определиться с параметрами Точно знаю, какую Примерно знаю область Знаю семантику вокруг поиска Ищу конкретный объект Ищу более или менее определенный объект Хочу узнать или выполнить процедуру, подразумевающую много этапов Не знаю, что ищу Не знаю, что вообще ищу Что ищ у? ЧТО ЗНАЮ? 2 . 3 и н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / н а в и га ц и я
  • 100. 2. ВОПРОСЫ ПОЛЬЗОВАТЕЛЯ 1. Где я? 2. Как мне попасть туда-то? 3. Где мне найти то-то? 4. Что мне нужно, чтобы сделать то-то? 5. Как мне здесь сделать то-то? 6. Какой следующий шаг? 7. Что мне из этого выбрать? 2 . 3 и н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / н а в и га ц и я
  • 101. 3. МЕНТАЛЬНАЯ МОДЕЛЬ Опыт Объекты Действия Процессы Навыки Движение П о л ь з о в ат е л ь Перцептивные карты Ментальные модели области Ментальная модель сервиса запись упаковка упаковка существующие / новые ассоциированные инвариантные / зависящие от среды мета-структуры бессознательные рабочий механизм потенциально осознаваемые потенциально осознаваемая Сущности Свойства Связи Классификация Навигация Сценарии Контролы информационное проектирование интерфейсы чтение СИСТЕМЫМИР Время Пространство Объекты восприятие формализация 2 . 3 и н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / н а в и га ц и я
  • 102. Сущности / Concepts Свойства / Properties Агенты / Agents Термины / Terms Связи / Realtionships в з а и м о д е й с т в и я М о д е л ь д а н н ы х 3. МЕНТАЛЬНАЯ МОДЕЛЬ Иногда ментальные модели заставляют модифицировать строгие модели области, создавать мультифастеные иерархии, использовать альтернативные термины, менять сценарии 2 . 3 и н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / н а в и га ц и я
  • 103. 4. ОТБОР ИНФОРМАЦИИ P 1 P 3 P 7 P 6 P 8 P 9 P 2 V 1.1L 1 V 3.1L 3 V 7.1L 7 V 2.2L 2 V 6.1L 6 V 8.4 V 9.1 L 8.2 L 9 V 9.3 V 6.2 V 8.5 V 9.2 с в о й с т в а з н а ч е н и я P 10 V 10.1L 10 V 10.3V 10.2 л е й б л с у щ н о с т ь Из всего набора сущностей и их свойств для навигации нужно выбирать только те, которые позволяют пользоватлю выполнить его задачу в данном контексте 2 . 3 и н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / н а в и га ц и я
  • 104. 5. ЧАСТОТА В навигации нужно попытаться учесть, как часто совокупность пользователей, или отдельный пользователь испытывают необходимость решать ту или иную задачу. • Выносить часто используемые опции наверх • Давать возможность кастомизироать пользовательское рабочее пространство • Сокращать и упрощать частые сценарии 2 . 3 и н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / н а в и га ц и я
  • 105. 6. ОГРАНИЧЕНИЯ Как правило, при разработке сервиса есть особенности его бизнес- или медиа- логики, которые накладывают дополнительные требования или ограничения • Сезонное/временное изменение релевантности определенных услуг, позиций, запросов • Редакторская воля формирования популярного • Необходимость продвигать какие-то другие услуги, разделы, информацию в рамках текущей странцы, что может отнимать полезное место 2 . 3 и н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / н а в и га ц и я
  • 106. НАВИГАЦИЯ «НА ВХОДЕ» Можно говорить о концептуальных типах навигации, которые так или иначе решают задачи и вопросы пользоавтелей, которые были упомянуты раньше 2 . 3 и н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / н а в и га ц и я
  • 107. КОНЦЕПТУАЛЬНЫЕ ТИПЫ 1. «Географическая» Верхнеуровневая навигация между основными смысловыми, функционально разными разделами 2. «Категорийная» Перемещение по набору разных сущностей одного функционального типа, визуально сгруппированных в категории по некоторым принципам 3. «По аналогии или комплиментарности» Горизонтальная навигация с одной страницы, на другие, контент которых считается релевантным данному 4. «Сценарная» Перемещение в рамках определенного сценария: вперед, назад на несколько шагов, в ветви сценария 5. «Расширенный поиск» По набору разных сущностей одного функционального типа, обладающих одним набором атрибутов 6. «Гугл» Свободный текст запроса дает хорошо или плохо структурированную выдачу в зависимости от проработанности разметки контента 2 . 3 и н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / н а в и га ц и я
  • 108. НАВИГАЦИЯ «НА ВХОДЕ» Можно говорить о концептуальных типах навигации, которые так или иначе решают задачи и вопросы пользоавтелей, которые были упомянуты раньше. И в рамках каждого концептуального типа можно найти большое количество конкретных UX решений. 2 . 3 и н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / н а в и га ц и я
  • 109. ПРИМЕРЫ UХ РЕШЕНИЙ ГЕОГРАФИЯ к атеГОРИИгде я? ана логии поиск сценарии I 2 . 3 и н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / н а в и га ц и я
  • 110. НАВИГАЦИЯ «НА ВЫХОДЕ» В случае, когда человек попал туда, куда он хотел, или получил определенную выборку результатов по своему запросу, нужно дать ему инструменты, чтобы: 1. Он не забыл, где он и почему он тут 2. Видел, что это место соотвтетсвует его запросам 3. Понимал, как отсюда уйти назад или куда-то еще 4. Имел доступ к инструментам, чтобы дальше работать с полученным результатом 2 . 3 и н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / н а в и га ц и я
  • 111. НАВИГАЦИЯ «НА ВЫХОДЕ» Иными словами, на «итоговой странице», будь она конечной, промежуточной в сценарии, или списком с результатом выдачи по запросу, нужно подумать о следующих действиях и элементах. 2 . 3 и н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / н а в и га ц и я
  • 112. НАВИГАЦИЯ «НА ВЫХОДЕ» и н ф о р м а ц и я н а в и га ц и я и н с т р у м е н т ы Название страницы Название этапа сценария Понятные элементы выдачи, если это был поисковый запрос Breadcrumb и URL Название сценария Введенные параметры запроса «Назад» Breadcrumb URL Дополнительные фильтры по общим свойствам объектов, значения которых выведены в элементах выборки Сортировка по количественным параметрам, времени, алфавиту Группировка элементов выборки по смысловым категориям Прогресс-бар сценария Назад-Вперед-Отменить Очевидный выбор элемента из выдачи, на основе отображаемой информации Переход на другие элементы по аналогии или к другим релевантным сущностям Выделение важной информации на странице Выделение ключевого действия на этапе Подчеркивание информации, соотвтствующей фильтрам Информация для принятия дальнейших решений ЧТО это? почему я здесь? к ак уйти? КАК выбрать? к уд а д а льше? В ПРАВИЛЬНОМ МЕСТЕ? 2 . 3 и н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / н а в и га ц и я
  • 113. НАВИГАЦИЯ «НА ВЫХОДЕ» Иными словами, на «итоговой странице», будь она конечной, промежуточной в сценарии, или списком с результатом выдачи по запросу, нужно подумать о следующих действиях и элементах. А затем подобрать оптимальные UI-решения для их поддержки. 2 . 3 и н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / н а в и га ц и я
  • 114. ГЛОБАЛЬНАЯ ЗАДАЧА Положить наши знания о модели области, о ее восприятии пользователем, о пользовательских задачах На продуманную систему из логических и пластических навигационных решений С учетом системных/бизнес/редакторских ограничений или необходимостей конкретного продукта 2 . 2 и н ф о р м а ц и о н н а я м о д е л ь о б л а с т и / н а в и га ц и я
  • 116. ЗАДАЧА раздел услуг портала Москвы mos.ru перепроектировать навигацию с нуля? изменение текущей? дополнение к текущей? 3 . и с х о д н ы е д а н н ы е субстрат за д ача
  • 117. ПЛАН 1. Здравый смысл и функции каталога 2. Верхнеуровневое изучение функций каталога 3. Исследование текущего интерфейса (логика, содержание, графика) 4. Моделирование: выделение и описание информационных сущностей 5. Выделение сущностей и их свойств важных для навигации 6. Предложение информационной структуры навигации 7. Предложение дизайна навигации (опционально) 8. Тестирование 3 . и с х о д н ы е д а н н ы е ИССЛЕДОВАНИЕ ИССЛЕДОВАНИЕ АНАЛИЗ + СИНТЕЗ АНАЛИЗ СИНТЕЗ
  • 118. КАК ПОСТРОИМ РАБОТУ 1. Одна общая группа, но лучше две 2. Я буду давать последовательно набор небольших заданий, в рамках этапов, описанных выше 3. Каждое задание поможет подумать о навигации под определенным углом. 4. Возможно, я дам какие-то свои мысли, в качестве опорных точек, но ими не обязательно пользоваться 5. Часть времени, отведенное на задание, я попрошу подумать над ним самостоятельно, часть — вместе. И выдать общий результат. 6. Мы обсудим результат задания все вместе, и потом у вас будет время, если захочется что-то внести в свою версию 7. Некоторые ваши результаты попрошу отложить, мы их используем в конце 3 . и с х о д н ы е д а н н ы е
  • 119. ОСОБЕННОСТИ СУБСТРАТА ? 3 . и с х о д н ы е д а н н ы е
  • 120. ОСОБЕННОСТИ СУБСТРАТА 1. Очень большой каталог услуг 2. Он живет в рамках портала и связан с ним 3. Структура каталога сейчас продиктована тем, что он формируется на основе реестра государственных услуг. Этим можно пренебречь и переформировать категории на ваше усмотрение Остальное расскажу по ходу обсуждений. 3 . и с х о д н ы е д а н н ы е
  • 122. 1.1 ЗДРАВЫЙ СМЫСЛ 1. Возьмите стикеры 2. Не открывая сайт, напишите на отдельных стикерах услуги, которые, как вам кажется, должен выполнять портал города Москвы 3. Разбейте стикеры по категориям 4. Назовите категории на стикерах 5. Приоритезируйте услуги внутри каждой категории 6. Сфотографируйте результат 3 . р е д и з а й н н а в и га ц и и / И с с л е д о в а н и я индивид уа льно: 10 мин
  • 123. 1.2 ЗДРАВЫЙ СМЫСЛ 1. Возьмите большой лист 2. Объедините стикеры с категориями, постарайтесь сделать общий рубрикатор, наклеив их на лист 3. Объедините стикеры-услуги и распределите их по общему рубрикатору, наклеив на лист 4. Приоритезируйте услуги внутри каждой категории 5. Сфотографируйте лист, сохраните его и отложите. Он нам еще понадобится 3 . р е д и з а й н н а в и га ц и и / И с с л е д о в а н и я вну три группы: 10 мин
  • 124. 2.1 БЕГЛОЕ ИЗУЧЕНИЕ САЙТА 1. Очень быстро изучите раздел услуг mos.ru 2. Возьмите стикеры и допишите услуги, которые вам кажутся важными, но вы о них забыли 3. Добавьте стикеры на общий лист. Возможно придется перегруппировать категории и поменять их название. Это ок. 4. Сфотографируйте лист, сохраните его и отложите. Он нам еще понадобится 3 . р е д и з а й н н а в и га ц и и / И с с л е д о в а н и я индивид уа льно: 5 мин вну три группы: 5 мин
  • 125. 2.2 ОБСУЖДЕНИЕ 1. Давайте сравним листы и обсудим что получается, если опираться только на здравый смысл и беглое изучение 2. Какие общие места? 3. В чем различия? 4. А теперь посмотрим на файл со статистикой услуг. 3 . р е д и з а й н н а в и га ц и и / И с с л е д о в а н и я ОБСУЖ ДЕНИЕ: 5 мин
  • 126. 2.2 ОБСУЖДЕНИЕ 3 . р е д и з а й н н а в и га ц и и / И с с л е д о в а н и я
  • 127. 3.1 ПОДРОБНОЕ ИЗУЧЕНИЕ 3 . р е д и з а й н н а в и га ц и и / И с с л е д о в а н и я 1. Как следует изучите раздел услуг 2. Возьмите пять листов А4, назовите их — Смысловые компоненты (услуга, инструкция, ...) — Логические принципы навигации (сценарии, уровни, ...) — Интерфейсные решения и элементы, которые бросаются в глаза — Положительные особенности — Отрицательные особенности 3. Изучая сайт, выписывайте на стикеры важную на ваш взгляд информацию и наклеивайте их на соответствующие листы индивид уа льно: 10 мин
  • 128. 3.2 ПОДРОБНОЕ ИЗУЧЕНИЕ 3 . р е д и з а й н н а в и га ц и и / И с с л е д о в а н и я 1. Изучите файл с рубрикатором услуг — Обратите внимание на то, куда ведут ссылки — И на колонку «Тип» 2. Дополните свои списки на А4 новыми стикерами индивид уа льно: 5 мин
  • 129. 3.3 ПОДРОБНОЕ ИЗУЧЕНИЕ 3 . р е д и з а й н н а в и га ц и и / И с с л е д о в а н и я 1. Возьмите большой лист, разделите его, как показано на схеме и перенесите туда собственные стикеры вну три группы: 10 мин смысловые компоненты плюсы минусы логические принципы интерфейсные решения
  • 130. 3.4 ОБСУЖДЕНИЕ 1. Давайте сравним листы и обсудим что получается 2. Какие общие места? 3. В чем различия? 4. Предложите несколько потенциальных идей для оптимизации навигации 3 . р е д и з а й н н а в и га ц и и / И с с л е д о в а н и я ОБСУЖ ДЕНИЕ: 5 мин
  • 131. 4.1 ОПИСАНИЕ ВСЕЛЕННОЙ 1. Запишите короткие ответы на следующие вопросы (на стикерах) — Кто пользуется сервисом, кто участвует в цикле поставки-использования- обрабоки информации — Какие области покрывает экосистема — Какие функции, действия, задачи участников — В рамках каких процессов, сценариев — В каких контекстах 2. Возможно, ответы на эти вопросы можно будет как- то сгруппировать и назвать кластеры. Сделайте это 3 . р е д и з а й н н а в и га ц и и / а н а л и з + с и н т е з вну три группы: 20 мин
  • 132. 4.2 ОПИСАНИЕ ВСЕЛЕННОЙ 3. Попробуйте нарисовать эти сущности и их взаимосвязи в виде верхнеуровневой схемы, на ваше усмотрение 3 . р е д и з а й н н а в и га ц и и / а н а л и з + с и н т е з вну три группы: 10 мин области / контексты процессы функции результатыУчастники
  • 133. 4.3 ОБСУЖДЕНИЕ 1. Давайте сравним схемы и обсудим что получается 3 . р е д и з а й н н а в и га ц и и / И с с л е д о в а н и я ОБСУЖ ДЕНИЕ: 5 мин
  • 134. 5. МОДЕЛИРОВАНИЕ 1. Ориентируясь на результаты предыдущего задания выделити основные типы сущностей, которые взаимодействуют между собой в рамках портала 2. Запишите типы свойств тех сущностей, которые вы сочтете ключевыми 3. Запишите типы действий которые могут встречаться в контексте сущностей или типы взаимодействий между ними. 3 . р е д и з а й н н а в и га ц и и / а н а л и з + с и н т е з вну три группы: 20 мин
  • 135. 6. ПРИОРИТЕЗАЦИЯ 1. Какие области вам кажутся самыми важными? 2. Как они кластеризуются? (по каким их свойствам: бизнес/частн, тип пользователя, тип документа, тип задачи?) 3. Можно ли что-то, скажем, унести на другой портал? 4. На основе сущностей и связей между ними, какие ключевые вопросы можно задать пользователю, чтобы сузить поле для поиска? («Я такой-то», «Хочу сделать то-то», «С таким-то объектом») 3 . р е д и з а й н н а в и га ц и и / а н а л и з вну три группы: 5 мин
  • 136. 7. ВЫБОР СИСТЕМЫ 1. Держа в голове свое представление об области, полученое в результате предыдущих упражнений — Об основных участниках — О задачах — О субъектах взаимодействия и статистику (реальную или оценочную) соберите из описанных в презентации подходов, систему, которая сможет улучшить/изменить/заменить навигацию по разделу (стр. 107, 109, 112). 2. Наполните выбранную систему реальными данными 3 . р е д и з а й н н а в и га ц и и / с и н т е з вну три группы: 10 мин
  • 137. 8. ДИЗАЙН 1. Подумайте, какие графические приемы помогли бы укрепить и улучшить навигацию в рамках вашей системы 2. Сделайте несколько скетчей (опционально) 3 . р е д и з а й н н а в и га ц и и / с и н т е з вну три группы: 15 мин
  • 138. 9. ТЕСТИРОВАНИЕ 1. Презентуйте свою систему 2. Возьмите лист с самыми важными функциями, которые вы сделали в начале занятия и проверьте, удобна ли ваша система навигации для их выполнения 3. Возьмите лист другой команды и сделайте то же самое. 3 . р е д и з а й н н а в и га ц и и / а н а л и з Обсу ж дение: 15 мин
  • 139. СПАСИБО Р Ш С Д 4 н о я б р я 2 0 1 7 ЛАРА СИМОНО В А