Всеобъемлющее руководство по информационной архитектуре

Послушайте аудиоверсию этой статьи.

В качестве стандартной части процесса UX дизайнеры создают информационную архитектуру при создании продуктов. Определяя каждый путь и путь, по которому пользователи могут пройти через приложение или веб-сайт, информационная архитектура — это гораздо больше, чем просто карта сайта, показывающая, какая страница куда ведет.

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

Однако его разработка не так проста, как составление списка функций и определение того, как они работают — давайте исследуем этот процесс.

Что такое информационная архитектура и почему она важна?

Информационная архитектура (IA) — это, как и план, визуальное представление инфраструктуры, функций и иерархии продукта. Уровень детализации зависит от дизайнера, поэтому IA может также включать в себя навигацию, функции и поведение приложения, контент и потоки. Нет установленных ограничений на размер или форму IA; тем не менее, он должен охватывать общую структуру продукта, чтобы любой (теоретически) мог прочитать его и понять, как продукт работает.

Мы будем часто использовать ссылку на чертеж, потому что цель обоих документов почти одинакова. Подобно плану, IA предоставляет дизайнерам (а также командам разработчиков и инженеров) представление о продукте с высоты птичьего полета. Наличие единого документа, который обеспечивает простое и понятное представление о том, как работает приложение или веб-сайт, жизненно важно для разработки новых функций, обновления существующих и для просмотра того, что возможно с учетом существующего продукта.

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

Давайте погрузимся в базовое видео, чтобы увидеть, как создается IA.

Как спроектировать информационную архитектуру

Как часть процесса UX, дизайн IA следует шаблонам, очень похожим на блок-схемы: добавляйте фигуры и соединяйте их линиями в организованном порядке в один документ. Задача при построении IA заключается в понимании того, как на самом деле работает ваше приложение или веб-сайт с точки зрения пользователя, и как организовать эту информацию в удобочитаемом и разборчивом формате.

Существуют два основных требования для фактического создания IA: организация его посредством визуальной иерархии (то есть иерархии функций, функций и поведения) и создание легенды для отображения различных типов функций, взаимодействий и потоков. В стандартной блок-схеме формы соответствуют определенным требованиям (прямоугольники — это процессы, ромбы — точки принятия решений и т. д.); однако следование этой номенклатуре не является обязательным требованием.

Другими словами, наиболее важными факторами для построения вашей IA являются расположение отдельных компонентов архитектуры (иерархически), а также их маркировка и отображение.

Понимание и отображение визуальной иерархии

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

При построении IA с нуля, если только ваш веб-сайт или приложение не соответствуют стандартному формату, рисовать что-либо после верхнего уровня очень сложно. Это все равно, что попросить механика построить машину сверху вниз, а не по частям. Каждая часть должна быть построена заранее с собственными исследованиями, временем для дизайна и разработки. То же самое и с ИА.

Отображение визуальной иерархии является ценным активом для IA не только потому, что он обеспечивает лучший контекст для читателя, но и обобщает ключевые области продукта. Если наиболее важной функцией вашего приложения является заказ поездки (а-ля Uber или Lyft), которую можно сделать с главной страницы, то эта страница будет иметь наибольшее количество точек соприкосновения и наибольшую ценность для продукта. То же самое будет верно и для визуальной иерархии.

Карты сайта удобны для понимания иерархии, поскольку они упорядочивают страницы численно (например, 1.0 «Главная», 2.0 «Оплата», 2.1 «Добавить способ оплаты» и т. д.). Или рассмотрите пример на изображении ниже для веб-сайта библиотеки Университета Дьюка, где верхняя навигация не только находится вверху, но и выделена, чтобы быть видимой во всем приложении.

Иерархия форм, цветов и других визуальных элементов

Помимо иерархии, приведенная выше архитектура хорошо справляется с другой задачей: она отображает каждую точку взаимодействия уникальным образом по мере необходимости с помощью простой легенды и нескольких ключевых фраз. Легенда обозначает страницу и тип содержимого, а также означает различия между цветами фигур. Это важно, потому что, хотя сайт Дьюка кажется довольно простым, IA имеет только три уровня глубины. Каждый желтый прямоугольник обозначает приложение, поэтому процессы внутри каждого из этих прямоугольников не включены в этот документ!

Даже без этих доступных частей структура такова, что мы можем понять, как перемещаться по веб-сайту только через IA. Это останавливается, когда мы достигаем приложения на веб-сайте — это не обязательно.

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

Эта модель не идеальна, но она четко организует иерархию приложений и определяет, что пользователь либо видит, либо делает в любой момент.

Лучшие инструменты информационной архитектуры

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

Draw.io, использованный в видео выше, полностью бесплатен для личного и профессионального использования и автоматически подключается к Google Диску. Также есть платные интеграции с Confluence и JIRA. Draw.io отлично подходит для создания блок-схем, создания пользовательских потоков и информационной архитектуры, а благодаря функциям Drive несколько человек могут работать над одним и тем же документом и видеть изменения в реальном времени. Также есть бесплатная офлайн-версия.

Lucidchart — еще один отличный инструмент, который обеспечивает немного лучший опыт, чем Draw.io, и имеет дополнительные преимущества, такие как готовые шаблоны, множество других интеграций, мобильное приложение (оценка 2,5 звезды в App Store) и поддержка для предприятий.

Omnigraffle и Visio уже давно являются опорой отрасли и отлично работают для создания и поддержки дизайна IA, хотя Visio доступен только в Интернете (старая автономная версия предназначена только для Windows), тогда как Omnigraffle доступен только для Mac и требует отдельных покупок для MacOS и iOS. версии. У OmniGraffle есть одно преимущество перед основными конкурентами, заключающееся в том, что он обеспечивает автоматизацию JavaScript и AppleScript, которая для большинства дизайнеров может быть ненужной, но, как правило, высоко ценится информационными архитекторами, работающими полный рабочий день.

Все перечисленные выше инструменты созданы для скорости и простоты использования, особенно для построения блок-схем, которые следуют практически тем же принципам, что и информационная архитектура. Другие приложения, такие как Balsamiq, MindMeister, MindManager или XMind, предлагают поведение аналогичного стиля, но созданы для других основных целей, таких как прототипирование или составление карт разума.

Рекомендации по информационной архитектуре

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

Не сосредотачивайтесь на иерархии, сосредоточьтесь на структуре

Иерархия регулируется. Домашняя страница всегда будет главной, но куда она ведет, как пользователи попадают в эти места и все, что между ними и за их пределами, определяется позже.

Все процессы должны быть логичны

Несмотря на то, что IA в процессе UX предназначен для взаимодействия с пользователем, каждый шаг должен иметь смысл. Экраны регистрации не должны вести к настройкам, функция камеры не должна переходить к просмотру карты… список можно продолжить.

Помните о UX-процессе

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

Вы картограф

Картографы принимают во внимание все, что касается карты, от горных хребтов до государственных границ. Как и создатели карт, дизайнеры определяют, что входит в дизайн ИИ. Отдельные страницы, конкретное поведение пользователей, контекст для принятия решений… и так далее.

В конечном счете, картограф решает, что будет отображаться на карте, исходя из потребностей пользователя. То же самое верно и для дизайнеров, поэтому создавайте IA для конечного пользователя, а именно для групп разработчиков и дизайнеров.

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

Еще раз повторю, что все ИА созданы для перемен. Продукты развиваются, дизайн меняется, пользователи адаптируются, и цикл продолжается снова и снова. Не относитесь к этому слишком серьезно и знайте, что всегда есть место для совершенствования. Не стремитесь к совершенству; построить простую, адаптируемую IA.

Моя информационная архитектура готова… Что теперь?

Распространено мнение, что любая работа по проектированию никогда не выполняется по- настоящему , и это, безусловно, относится к информационной архитектуре. Они растут, уменьшаются и изменяются, как и наши продукты. В отличие от плана здания, IA всегда будет развиваться в зависимости от чего угодно: от потребностей пользователей до новых функций или капитального ремонта продукта. Большая часть структуры может оставаться неизменной и обеспечивать согласованность между версиями, чтобы пользователи не запутались.

И это хорошо. Знание того, что IA — это изменчивый документ, который, вероятно, меняется еженедельно, а иногда даже ежедневно, — это эффективный способ поддерживать общую структуру вашего приложения или веб-сайта, даже не касаясь кода и не создавая новых прототипов. Чем лучше вся команда разработчиков продукта знает IA, тем быстрее все узнают, что возможно, а что нет, и насколько серьезна любая предполагаемая «легкая работа».

Что подводит нас к настоящей красоте информационной архитектуры: нет предопределенной отправной точки. В то время как традиционный процесс проектирования UX требует, чтобы IA создавалась после завершения достаточного количества пользовательских потоков; вооружившись большим количеством пользовательских и конкурентных исследований, это также может быть сделано первым… или последним. Процесс прототипирования часто дает информацию о том, как должно происходить определенное поведение или действия, которые трудно представить с помощью логического или лишенного воображения ИА.

Как постоянно развивающаяся практика, дизайн IA — это искусство, а не навык, и отчасти поэтому в крупных корпорациях есть должности информационных архитекторов. Эти дизайнеры являются привратниками крупных систем, и с их пониманием роста продукта с течением времени они помогают командам разработчиков, разработчиков и инженеров принимать правильные решения в течение многих лет . Такой масштаб организации подойдет не всем дизайнерам, но каждый дизайнер может создать простую и понятную информационную архитектуру.

• • •

Рекомендуемая литература об информационной архитектуре

IA для Интернета и не только

Как разобраться в любом беспорядке: информационная архитектура для всех

Основы информационной архитектуры

Разница между информационной архитектурой и UX-дизайном

• • •

Дальнейшее чтение в блоге Toptal Design:

• UX электронной коммерции — обзор лучших практик (с инфографикой)
• Важность ориентированного на человека дизайна в дизайне продукта
• Лучшие портфолио дизайнеров UX — вдохновляющие тематические исследования и примеры
• Эвристические принципы для мобильных интерфейсов
• Упреждающий дизайн: как создать волшебный пользовательский опыт