Та презентация, в которой описываются подходы к созданию информационной архитектуры в интернете.

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

2. Михаил Галушко
mikhail@galushko.ru | http://galushko.ru | +7 916 550-27-56

3. Михаил Галушко
Бизнес-аналитика и проектирование
профессиональный опыт более 18 лет
специализация на проектировании интерактивных
решений для финансового сектора
клиенты и работодатели: Центр финансовых
технологий, Альфа-Банк, ВТБ24, Сбербанк,
Ингосстрах
участник ТОП-100 рейтинга ключевых персон
российского рынка веб-разработки и digital-
маркетинга

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

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

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

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

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

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

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

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

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

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

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

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

17. Ситуационный анализ
Текущая ситуация
Целевая
аудитория
Обзор рынка
Точки принятия
решения
SWOT-анализ Выводы

18. Постановка целей и задач
Коммуникационные
цели
Бизнес-цели
Задачи, которые
должны быть для
этого решены

19. Концепция сайта
Концептуальные
инструменты
Навигационная
концепция
Точки принятия
решений
Из этого и строится информационная архитектура

20. Концепция сайта
Концептуальные инструменты — конструктор банковских
продуктов, социальное доказательство, контекстное
информирование…
Навигационная концепция — mobile first, touch, share…
Точки принятия решения — главная страница, продуктовая
страница, интерактивный калькулятор…

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

39. Категоризация информации
ориентируясь на конечного
пользователя

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

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

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

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

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

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

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

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

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

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

50. В конечном итоге, как пользователь
получает удовлетворение от реализации
своей потребности?

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

52. ИНСТРУМЕНТАРИЙ АРХИТЕКТОРА
• Голова
мой выбор: трезвая
• Ментальные карты
мой выбор: XMind
• Блокноты
мой выбор: тетрадь A4
• Онлайн-сервисы
групповая работа над проектами
• Специализированное ПО
мой выбор:Axure RP
• Фреймворки
снимают ограничения ПО

53. МЕТОДОЛОГИЯ

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

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

56. Алфавитная классификация
Хронологическая классификация
Географическая классификация
и так далее…

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

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

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

60. Тематическая классификация
Интенциональная классификация
Аудиторная классификация
Метафорическая классификация
и так далее…

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

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

63. ДЕЛАЕМ САЙТ БАНКА
• Тематическая классификация: вклады, кредиты, кредитные карты…
• Интенциональная классификация: сохранить, преумножить, перевести…
• Аудиторная классификация: частным лицам, малому бизнесу, компаниям…

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

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

71. Иерархический формат
Сценарный формат
Матричная структура
База данных

72. Иерархический формат подразумевает,
что вы двигаетесь от центра вглубь, где каждый
информационный объект может иметь подчиненного себе.
По сути это то, что зовется «деревом».

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

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

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

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

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

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

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

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

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

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

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

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

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

91. Адреса страниц
Метаописания
Заголовки
Тексты, таблицы, медиаматериалы
Файлы для скачивания
Интерактивные сервисы
и так далее…

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

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

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

96. Прототип это иллюстрация
и развитие информационной
архитектуры

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

98. Концептуальный прототип
Главная страница
Типовая страница
продукта
Прототип
калькулятора
Продуктовая
анкета
Информационные
разделы
Точки продаж
На примере банковского сайта

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

100. Навигационное решение
Цели и задачи
Целевые
аудитории
и уровни доступа
Функциональные
требования

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

104. ЧТО ЧИТАТЬ

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, англ.)
• …

106. Спасибо за внимание
Михаил Галушко
mikhail@galushko.ru | http://galushko.ru | +7 916 550-27-56