106
ИНФОРМАЦИОННАЯ АРХИТЕКТУРА подходы и принципы

Информационная архитектура в интернете

Embed Size (px)

Citation preview

Page 1: Информационная архитектура в интернете

ИНФОРМАЦИОННАЯ АРХИТЕКТУРАподходы и принципы

Page 2: Информационная архитектура в интернете

Михаил Галушко [email protected] | http://galushko.ru | +7 916 550-27-56

Page 3: Информационная архитектура в интернете

Михаил ГалушкоБизнес-аналитика и проектирование

профессиональный опыт более 18 лет

специализация на проектировании интерактивных решений для финансового сектора

клиенты и работодатели: Центр финансовых технологий, Альфа-Банк, ВТБ24, Сбербанк, Ингосстрах

участник ТОП-100 рейтинга ключевых персон российского рынка веб-разработки и digital-маркетинга

Page 4: Информационная архитектура в интернете

НЕМНОГО О ПРОФЕССИИ

Page 5: Информационная архитектура в интернете

Информационный архитектор — это роль, а не профессия.

Page 6: Информационная архитектура в интернете

«Проектировщик»

Page 7: Информационная архитектура в интернете

Что хороший проектировщик должен сказать о себе?

Page 8: Информационная архитектура в интернете

«Я был хорошим дизайнером в нескольких областях: например — реклама, диджитал, приложения, брендинг, промдизайн, навигация, архитектура.»

Page 9: Информационная архитектура в интернете

«Я был менеджером как со стороны производства, так и со стороны заказа.»

Page 10: Информационная архитектура в интернете

«Я сам программировал и писал код и постоянно общаюсь с программистами и технологами. Понимаю основы современного бэкенда, и работая всегда думаю о конечной реализации.»

Page 11: Информационная архитектура в интернете

«Мой опыт включает десятки проектов, в которых я выступал в роли дизайнера, менеджера или разработчика.»

Page 12: Информационная архитектура в интернете

«Я не останавливаюсь на достигнутом и не опираюсь исключительно на собственный опыт и экспертизу, так как мир быстро меняется.»

Page 13: Информационная архитектура в интернете

«Мне важно мнение клиента и поведение пользователей, их мнения, предпочтения или их возражения и недовольство. Но этим, как единственным или приоритетным, я никогда не руководствуюсь, и этим же никогда не стану прикрывать любые свои решения.»

Page 14: Информационная архитектура в интернете

«Для меня важна собранная статистика и аналитика, но всецело на нее, как на единственную истину, я никогда не полагаюсь. Одновременно с изучением собранной статистики я всегда изучаю алгоритмы, механизмы и общие условия её сбора, строю предположения о системных искажениях и думаю о том, куда аналитика меня может направить в самом общем смысле.»

Page 15: Информационная архитектура в интернете

ЦИКЛ ПРОЕКТИРОВАНИЯ

Page 16: Информационная архитектура в интернете
Page 17: Информационная архитектура в интернете

Ситуационный анализ

Текущая ситуацияЦелевая аудитория

Обзор рынка

Точки принятия решения

SWOT-анализ Выводы

Page 18: Информационная архитектура в интернете

Постановка целей и задач

Коммуникационные цели

Бизнес-целиЗадачи, которые должны быть для этого решены

Page 19: Информационная архитектура в интернете

Концепция сайта

Концептуальные инструменты

Навигационная концепция

Точки принятия решений

Из этого и строится информационная архитектура

Page 20: Информационная архитектура в интернете

Концепция сайта

Концептуальные инструменты — конструктор банковских продуктов, социальное доказательство, контекстное информирование…

Навигационная концепция — mobile first, touch, share…

Точки принятия решения — главная страница, продуктовая страница, интерактивный калькулятор…

Page 21: Информационная архитектура в интернете

Описание концепции в текстовом виде может достигать сотни страниц. Поэтому всегда имеет смысл иметь под рукой простую

схему для объяснения.

Page 22: Информационная архитектура в интернете
Page 23: Информационная архитектура в интернете

Иногда визуализация концепции сайта может практически совпадать с информационной архитектурой

Page 24: Информационная архитектура в интернете
Page 25: Информационная архитектура в интернете

ЧТО ТАКОЕ ИНФОРМАЦИОННАЯ АРХИТЕКТУРА

Page 26: Информационная архитектура в интернете

«Информационная архитектура занимается принципами систематизации информации и навигации по ней с целью помочь людям более успешно находить и обрабатывать нужные им данные»

Луис Розенфельд, 1999 год.

Page 27: Информационная архитектура в интернете

Это не структура сайта, приложения или сервиса!

Page 28: Информационная архитектура в интернете

Это проектирование пользовательского опыта…

Page 29: Информационная архитектура в интернете

…и решение поставленных перед проектом задач.

Page 30: Информационная архитектура в интернете

ЗАЧЕМ НУЖНАИНФОРМАЦИОННАЯАРХИТЕКТУРА

Page 31: Информационная архитектура в интернете

«Суть информационной архитектуры заключается в том, чтобы пользователь мог быстро, легко и без затруднений получить ту информацию, которая ему нужна. Это что-то вроде дорожной карты. Но это не значит, что нужно отказываться от живописных видов по этой дороге.»

Noreen Whysel

Page 32: Информационная архитектура в интернете

Инструмент для самоанализа

Page 33: Информационная архитектура в интернете

Наглядная демонстрация концептуальных идей

Page 34: Информационная архитектура в интернете

Руководство для проектировщиков и разработчиков

Page 35: Информационная архитектура в интернете

Гарантия жизнеспособности экосистемы пользователя

Page 36: Информационная архитектура в интернете

Понимание сайта или сервиса как единого продукта

Page 37: Информационная архитектура в интернете

ИЗ ЧЕГО СЕГОДНЯ СОСТОИТИНФОРМАЦИОННАЯАРХИТЕКТУРА

Page 38: Информационная архитектура в интернете

«Учитывая то, что информация просачивается в сферу мобильных устройств и в окружающее нас физическое пространство, информационная архитектура перестала ограничиваться рамками всемирной паутины: она лежит в основе проектирования всех общественных информационных пространств, мест, сервисов и всех процессов, в первую очередь ориентированных на пользовательский опыт»

Noreen Whysel

Page 39: Информационная архитектура в интернете

Категоризация информации ориентируясь на конечного

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

Page 40: Информационная архитектура в интернете

Арбуз и помидор это ягоды только с точки зрения науки

Page 41: Информационная архитектура в интернете

Даже из хаоса создается спонтанный порядок

Page 42: Информационная архитектура в интернете

Но у нас больше нет миллиардов лет на эволюцию

Page 43: Информационная архитектура в интернете

Классификация информационных сущностей требует маркировки

Page 44: Информационная архитектура в интернете

Что является отдельной страницей, сервисом, состоянием навигации, описанием информационного блока?

Page 45: Информационная архитектура в интернете

Каковы приоритеты в навигации и сценариях взаимодействия?

Page 46: Информационная архитектура в интернете

Что попадет в меню первого уровня? Как строить навигацию?

Как удержать внимание пользователя?

Page 47: Информационная архитектура в интернете

Как взаимосвязаны между собой отдельные сущности?

Page 48: Информационная архитектура в интернете

Горизонтальные связи становятся важнее вертикальных!

Page 49: Информационная архитектура в интернете

Понимает ли пользователь, как он сюда попал и чего ожидать в дальнейшем?

Page 50: Информационная архитектура в интернете

В конечном итоге, как пользователь получает удовлетворение от реализации

своей потребности?

Page 51: Информационная архитектура в интернете

ИНСТРУМЕНТАРИЙ

Page 52: Информационная архитектура в интернете

ИНСТРУМЕНТАРИЙ АРХИТЕКТОРА

• Головамой выбор: трезвая

• Ментальные карты мой выбор: XMind

• Блокноты мой выбор: тетрадь A4

• Онлайн-сервисы групповая работа над проектами

• Специализированное ПО мой выбор: Axure RP

• Фреймворки снимают ограничения ПО

Page 53: Информационная архитектура в интернете

МЕТОДОЛОГИЯ

Page 54: Информационная архитектура в интернете

Категоризация контента по общим признакам

Page 55: Информационная архитектура в интернете

Задача информационного архитектора – найти в массиве контента общие признаки и сформировать группы информационных объектов, с которыми можно далее продолжать работу.

Page 56: Информационная архитектура в интернете

Алфавитная классификация

Хронологическая классификация

Географическая классификация

и так далее…

Page 57: Информационная архитектура в интернете

Эти классификации затем могут быть применены в навигации, тегах, метаописаниях и т.п.

Page 58: Информационная архитектура в интернете

Категоризация контента исходя из потребностей конечного пользователя

Page 59: Информационная архитектура в интернете

Задача информационного архитектора – опираясь на понимание конечных потребностей пользователей, особенности шаблонов восприятия и конкурентное окружение сформировать группы информационных объектов максимально понятным для

пользователя способом.

Page 60: Информационная архитектура в интернете

Тематическая классификация

Интенциональная классификация

Аудиторная классификация

Метафорическая классификация

и так далее…

Page 61: Информационная архитектура в интернете

Рекомендуется придерживаться одной модели классификации: пользователь должен интуитивно понимать,

как с ним сейчас разговаривают.

Page 62: Информационная архитектура в интернете

Но это не означает, что в рамках продукта нельзя использовать несколько схем.

Page 63: Информационная архитектура в интернете

ДЕЛАЕМ САЙТ БАНКА

• Тематическая классификация: вклады, кредиты, кредитные карты…

• Интенциональная классификация: сохранить, преумножить, перевести…

• Аудиторная классификация: частным лицам, малому бизнесу, компаниям…

Page 64: Информационная архитектура в интернете
Page 65: Информационная архитектура в интернете
Page 66: Информационная архитектура в интернете
Page 67: Информационная архитектура в интернете
Page 68: Информационная архитектура в интернете
Page 69: Информационная архитектура в интернете

Расстановка взаимосвязей

Page 70: Информационная архитектура в интернете

Здесь отношения между различными составляющими уже не идейные, а вполне конкретные, на уровне иерархического

подчинения или места в сценарии.

Page 71: Информационная архитектура в интернете

Иерархический формат

Сценарный формат

Матричная структура

База данных

Page 72: Информационная архитектура в интернете

Иерархический формат подразумевает, что вы двигаетесь от центра вглубь, где каждый

информационный объект может иметь подчиненного себе.

По сути это то, что зовется «деревом».

Page 73: Информационная архитектура в интернете

Иерархический формат может быть представлен в виде ментальной карты, чарта, древовидного представления,

логического представления, да как угодно.

Page 74: Информационная архитектура в интернете
Page 75: Информационная архитектура в интернете
Page 76: Информационная архитектура в интернете
Page 77: Информационная архитектура в интернете

Сценарный формат требует от пользователя, чтобы он последовательно прошел по определенному сценарию шаг за шагом: например, если вы показываете оптимальный сценарий покупки или

регистрации.

Page 78: Информационная архитектура в интернете
Page 79: Информационная архитектура в интернете

Матричная структура позволяет пользователю как бы не зависеть от воли проектировщика, который ставит его в иерархические или сценарные рамки, и выбирать любой путь, который ему хочется.

Page 80: Информационная архитектура в интернете

Например, кто-то хочет пойти по интенциям, а кто-то по тематикам. Можно предусмотреть возможность реализации таких

типов поведения.

Page 81: Информационная архитектура в интернете

Понятно, что такая “свобода” на самом деле иллюзорна, так как возможности выбора предопределены и ограничены

согласно целям проекта.

Page 82: Информационная архитектура в интернете

На схеме для визуализации матричных переходов и прочих взаимных зависимостей можно использовать стрелки и

всевозможные обозначения.

Page 83: Информационная архитектура в интернете
Page 84: Информационная архитектура в интернете

Модель базы данных - когда у каждого информационного объекта есть набор метаданных, благодаря чему структурирование контента

может происходить по запросу как угодно.

Это наиболее дружелюбная к пользователю модель при должной поддержке на уровне интерфейса.

Page 85: Информационная архитектура в интернете

Главное, чтобы в итоге информационная архитектура проектировалась исходя из понимания, что это – надолго.

Page 86: Информационная архитектура в интернете

Нужно предусматривать возможное масштабирование как в рамках всего сайта, так и внутри отдельных разделов.

Page 87: Информационная архитектура в интернете

Соблюдать баланс: не должно быть ситуаций, когда одна ветка имеет два уровня вложенности, а другая – пять, без особых на то

оснований.

Page 88: Информационная архитектура в интернете

Инвентаризация контента

Page 89: Информационная архитектура в интернете

Следует внимательно посмотреть на контент как таковой. Из чего состоят отдельные информационные объекты?

Page 90: Информационная архитектура в интернете

Следует внимательно посмотреть на контент как таковой. Из чего состоят отдельные информационные объекты и как

конечный контент влияет на архитектуру?

Page 91: Информационная архитектура в интернете

Адреса страниц

Метаописания

Заголовки

Тексты, таблицы, медиаматериалы

Файлы для скачивания

Интерактивные сервисы

и так далее…

Page 92: Информационная архитектура в интернете

Нужно помнить, что у проектировщика карт-бланш и он может структурировать контент с самого начала «правильно»,

базируясь на собственном опыте, изучении рынка и результатах предварительного аудита.

Нужно только будет обосновать, почему именно так будет эффективнее, чем иным способом.

Page 93: Информационная архитектура в интернете

Нужно помнить, что у проектировщика карт-бланш и он может структурировать контент с самого начала «правильно»,

базируясь на собственном опыте, изучении рынка и результатах предварительного аудита.

Нужно только будет обосновать, почему именно так будет эффективнее, чем иным способом.

Page 94: Информационная архитектура в интернете

Можно отдельно проработать последовательность информационных блоков и сделать их частью информационной архитектуры, например:

- описание продукта

- встроенный калькулятор

- результаты расчета

- форма заявки

и так далее…

Page 95: Информационная архитектура в интернете
Page 96: Информационная архитектура в интернете

Прототип это иллюстрация и развитие информационной

архитектуры

Page 97: Информационная архитектура в интернете

Наконец схема создана и нужно понять, как она укладывается в прототип. Начинаем укладывать.

Page 98: Информационная архитектура в интернете

Концептуальный прототип

Главная страницаТиповая страница продукта

Прототип калькулятора

Продуктовая анкета

Информационные разделы

Точки продаж

На примере банковского сайта

Page 99: Информационная архитектура в интернете

Это важнейшая часть работы информационного архитектора, так как именно здесь происходить «раскладка» схемы с учетом

распределения пространства, приоритезации контента и сервисов.

Page 100: Информационная архитектура в интернете

Навигационное решение

Цели и задачиЦелевые аудитории и уровни доступа

Функциональные требования

Page 101: Информационная архитектура в интернете
Page 102: Информационная архитектура в интернете

Детальный прототип

Опираясь на концептуальный прототип

Используя реальный контент

Передается в дизайн

Проектирование заканчивается с реализацией прототипа в дизайн-макете и затем в итоговой верстке. Поэтому важен авторский надзор.

Page 103: Информационная архитектура в интернете
Page 104: Информационная архитектура в интернете

ЧТО ЧИТАТЬ

Page 105: Информационная архитектура в интернете

• medium.com и habrahabr.ru по запросу «информационная архитектура»

•Информационная архитектура в Интернете (П.Морвиль и Л.Розенфельд, рус.)

• A Practical Guide to Information Architecture (D. Spencer, англ.)

• Pervasive Information Architecture: Designing Cross-Channel User Experiences (A.Resmini, L.Rosati, англ.)

• …

Page 106: Информационная архитектура в интернете

Спасибо за внимание

Михаил Галушко [email protected] | http://galushko.ru | +7 916 550-27-56