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

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

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

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

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

Улучшает понимания контента. ИА организовывает информацию таким образом, чтобы пользователи могли легко считать структуру и содержание цифрового продукта.

Упрощает навигацию. Правильно спроектированная ИА помогает пользователям легко и интуитивно перемещаться по продукту.

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

Роль ИА в улучшении пользовательского опыта

Простота и ясность. ИА снижает возможный уровень путаницы в вашем интерфейсе и улучшает его восприятие аудиторией.

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

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

В книге «Информационная архитектура» ее авторы, Луис Розенфельд и Питер Морвиль, определяют три круга информационной структуры:

Контекст — цели, которые преследует бизнес, его ресурсы и ограничения: сроки, бюджет, возможности.

Содержание — объем информации в будущем интерфейсе: расположения контента на старом сайте (при наличии), качество контента и тип, возможность удаления и добавления новой информации.

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

Компоненты ИА

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

Система организации

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

1. Вертикальная (иерархическая или древовидная)

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

2. Последовательная

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

3. Матричная

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

Система пометки

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

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

Система навигации

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

Система поиска

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

Как вы уже поняли, информационная архитектура — это основа для создания успешного пользовательского интерфейса. Для пользователей это:

• понятность,
• удобство,
• доверие.

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

Интернет-магазины

• Удобная навигация по категориям товаров.
• Интуитивно понятные фильтры.
• Быстрый поиск товара.
• Заметные кнопки CTA.

Социальные сети

• Четкая структура профиля.
• Лента новостей.
• Удобная система поиска.
• Фильтрация контента.

Новостные порталы

• Организация контента по категориям.
• Система поиска.
• Фильтрация новостей.

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

Шаг 1. Исследование

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

О качественных исследованиях пользователей писали вот здесь — «User Story и Job Story Mapping», а о создании персон тут — «Метод персон в UX».

Шаг 2. Анализ готовой информации

Оцените уже имеющийся контент и его организацию. Определите, что работает хорошо, а что требует улучшения.

Шаг 3. Разработка структуры

На основе результатов исследования и анализа начните разрабатывать структуру вашего продукта. Определитесь с системой организации информации (о ней писали выше), выделите основные категории, подкатегории и отношения между ними.

Принципы, которых следует придерживаться

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

1. Четкость и структурированность. Систематизируйте информацию, чтобы она была доступна любому пользователю без лишних условий.
2. Иерархия и организация. Обязательно выделите главные категории, подкатегории и детали.
3. Консистентность и интуитивность. Информация должна быть представлена в едином стандарте во всем продукте. Это касается как стиля оформления, так и поведения элементов.
4. Адаптивность и масштабируемость. Ваша ИА должна быть адаптивной к возможным изменениям в будущем, чтобы вы могли добавлять новые функциональные возможности и увеличивать (или уменьшать) количество контента.

Инструменты для работы

Microsoft Visio — можно составлять диаграммы и планировать архитектуру сайта.

Diagrams. net — приложение используется для построения схем, моделей и диаграмм.

OmniGraffle — стройте схемы процессов, макеты страниц и сайтов, но только для iOS и Mac.

Balsamiq Mockups — быстро создает схемы.

1. Недостаточное исследование пользовательских потребностей

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

Решение: Проводите тщательное исследование пользователей, включайте анализ их поведения, потребностей, целей и контекста использования продукта.

2. Слишком сложная или неразборчивая структура

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

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

3. Неправильное использование терминологии и меток

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

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

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