Ультимативное руководство по IA
Как сделать сайт более удобным для пользователей
Автор оригинальной статьи Кэмерон Чэпмен.
Информационная архитектура (IA) — это в равной степени наука и искусство. Конечно, вы можете пойти по пути «где-то здесь будет контент», но с другой стороны — можете сделать проект продуманным, с хорошо организованной контент-структурой. Это поможет сделать сайт бесконечно более удобным для конечных пользователей.
Хотя не каждый проект может позволить себе разработку индивидуальной информационной архитектуры, знание ее базовых принципов поможет делать сайты с максимально доступным контентом.
Хотя не каждый проект может позволить себе разработку индивидуальной информационной архитектуры, знание ее базовых принципов поможет делать сайты с максимально доступным контентом.
Что такое информационная архитектура?
Информационная архитектура включает в себя несколько связанных понятий.
Во-первых, это структура доступной информации. Это то, как контент на сайте, в интранете, интернет-сообществе или любом другом интернет-пространстве организован и размечен.
Во-вторых, это искусство и наука упорядочивать и размечать. Информационная структура, в которой найти нужный контент не составляет труда для пользователя, — это конечный продукт информационной архитектуры.
В третьих, это сообщество, состоящее из практикующих преподавателей, их цель — сделать так, чтобы хорошая информационная архитектура вышла на первый план в UX.
Во-первых, это структура доступной информации. Это то, как контент на сайте, в интранете, интернет-сообществе или любом другом интернет-пространстве организован и размечен.
Во-вторых, это искусство и наука упорядочивать и размечать. Информационная структура, в которой найти нужный контент не составляет труда для пользователя, — это конечный продукт информационной архитектуры.
В третьих, это сообщество, состоящее из практикующих преподавателей, их цель — сделать так, чтобы хорошая информационная архитектура вышла на первый план в UX.
Аналогия с архитектурой
Выяснить, какие стратегии IA нужны конкретному проекту, можно на примере архитектурных чертежей, используемых в строительстве.
Среднестатистический дом на такой же улице в среднем городе может быть очень хорошо построен по типовому плану. Есть десятки, сотни других домов, построенных по тем же наборам чертежей по всей стране. Они выполняют свои функции. Они экономичны.
Конечно, каждый из таких домов отличается: у них разная отделка, они стоят на разных участках, в них живут разные люди, которые по-разному их используют.
Из шаблонного решения можно сделать сайт, который будет отвечать потребностям широкого круга заказчиков. Незначительные косметические изменения — вот все, что будет нужно для окончательной адаптации таких проектов. Фронтенд-разработчик может легко внести все эти изменения, а никакой IA и не понадобится.
Среднестатистический дом на такой же улице в среднем городе может быть очень хорошо построен по типовому плану. Есть десятки, сотни других домов, построенных по тем же наборам чертежей по всей стране. Они выполняют свои функции. Они экономичны.
Конечно, каждый из таких домов отличается: у них разная отделка, они стоят на разных участках, в них живут разные люди, которые по-разному их используют.
Из шаблонного решения можно сделать сайт, который будет отвечать потребностям широкого круга заказчиков. Незначительные косметические изменения — вот все, что будет нужно для окончательной адаптации таких проектов. Фронтенд-разработчик может легко внести все эти изменения, а никакой IA и не понадобится.
Другой сценарий — когда дом нуждается в капитальном ремонте. Часто дома строят «с запасом», чтобы изменения можно было вносить без ущерба постройке. Жильцы могут добавлять и убирать комнаты, переносить кухню, сносить перегородки. Привлекается архитектор: ведь ремонт подразумевает серьезные структурные изменения.
Эти виды решений применимы также к миру IA. Общий шаблон информационной архитектуры может быть близок к тому, что нужно. Но, возможно, потребуется капитальный ремонт? Может быть, нужно добавить модуль, чтобы потребности пользователей покрывались полностью. А может, проект нуждается в упрощении. Информационный архитектор определяет изменения, которые должны быть сделаны на проекте, разрабатывает план по претворению этих изменений в жизнь.
На другом конце спектра находится полностью индивидуальный проект. По аналогии с архитектурой это будет разработанный с нуля комплект чертежей. Архитектор будет оценивать потребности будущего жильца, а затем поговорит с инженером и строителем, чтобы убедиться, что эти желания осуществимы. Это наиболее дорогостоящее решение, но в некоторых случаях только оно может удовлетворить потребности клиента.
То же самое происходит с большими веб-проектами. Например, стартапы просто не могут обходиться решениями из коробки, даже адаптированными под их нужды. Им нужно решение, полностью соответствующее их бизнес-модели, масштабируемое (ведь стартап будет расти). Это тот случай, когда информационный архитектор (или команда таковых) может проявить себя на все сто.
Конечно, бывают и уникальные случаи. Так небольшой проект может нуждаться в IA, а большой может легко поместиться в коробочное решение. Вот почему стратегия IA должна быть разработана с самого начала, вместо того, чтобы потом пытаться втиснуть хороший контент в существующую разметку сайта.
Эти виды решений применимы также к миру IA. Общий шаблон информационной архитектуры может быть близок к тому, что нужно. Но, возможно, потребуется капитальный ремонт? Может быть, нужно добавить модуль, чтобы потребности пользователей покрывались полностью. А может, проект нуждается в упрощении. Информационный архитектор определяет изменения, которые должны быть сделаны на проекте, разрабатывает план по претворению этих изменений в жизнь.
На другом конце спектра находится полностью индивидуальный проект. По аналогии с архитектурой это будет разработанный с нуля комплект чертежей. Архитектор будет оценивать потребности будущего жильца, а затем поговорит с инженером и строителем, чтобы убедиться, что эти желания осуществимы. Это наиболее дорогостоящее решение, но в некоторых случаях только оно может удовлетворить потребности клиента.
То же самое происходит с большими веб-проектами. Например, стартапы просто не могут обходиться решениями из коробки, даже адаптированными под их нужды. Им нужно решение, полностью соответствующее их бизнес-модели, масштабируемое (ведь стартап будет расти). Это тот случай, когда информационный архитектор (или команда таковых) может проявить себя на все сто.
Конечно, бывают и уникальные случаи. Так небольшой проект может нуждаться в IA, а большой может легко поместиться в коробочное решение. Вот почему стратегия IA должна быть разработана с самого начала, вместо того, чтобы потом пытаться втиснуть хороший контент в существующую разметку сайта.
Что информационный архитектор делает весь день?
Хотя чаще всего информационный архитектор выполняет в компании несколько ролей сразу, бывают случаи, когда это отдельный специалист. Итак, чем же он занят?
Прежде всего архитектор выполняет роль связующего звена между дизайнером сайта и разработчиками. Они должны убедиться, что дизайнер создали правильную организацию контента, а разработчики все правильно интерпретировали. И, конечно, отвечает за то, как информация на сайте будет организована и подана, чтобы наилучшим образом соответствовать потребностям пользователя. Это очень важная миссия, ибо в случае ее провала пользователя ждет разочарование.
Последнее, что делают многие информационные архитекторы, — это разработка прототипов сайтов. С помощью прототипа можно продемонстрировать, как ведут себя пользователи на сайте, а также как должны функционировать некоторые элементы.
Прежде всего архитектор выполняет роль связующего звена между дизайнером сайта и разработчиками. Они должны убедиться, что дизайнер создали правильную организацию контента, а разработчики все правильно интерпретировали. И, конечно, отвечает за то, как информация на сайте будет организована и подана, чтобы наилучшим образом соответствовать потребностям пользователя. Это очень важная миссия, ибо в случае ее провала пользователя ждет разочарование.
Последнее, что делают многие информационные архитекторы, — это разработка прототипов сайтов. С помощью прототипа можно продемонстрировать, как ведут себя пользователи на сайте, а также как должны функционировать некоторые элементы.
Карта сайта, созданная на этом этапе может стать частью готового сайта. Или же остаться внутренним техническим документом.
Принципы информационной архитектуры
Дэн Браун практикует информационную архитектуру более 20 лет. Он разработал 8 принципов IA, которые могут послужить хорошей базой для любого проекта.
Все эти принципы в большей или меньшей степени будут применимы к тому или иному проекту. Как начать работу над информационной архитектурой?
- Принцип объектов. Принцип предписывает рассматривать контент как развивающуюся сущность, которая имеет собственный жизненный цикл. Разный контент будет иметь разные атрибуты и поведение, и это нужно учесть при проектировании дизайна.
- Принцип выбора. Принцип означает, что вы должны предлагать вашим пользователям осмысленный выбор. Тем не менее, вы должны убедиться, что выбор будет сосредоточен на чем-то конкретном: слишком много вариантов может дезориентировать пользователя. Информацию тоже стоит подавать в виде иерархии, категорий и суб-категорий, вместо того, чтобы приводить ее просто длинным списком.
- Принцип раскрытия. Важно дать пользователю необходимую ему информацию Однако стоит убедиться, что это действительно то, что ему нужно, а не то, что вам захотелось дать. Принцип говорит также о том, что нужно сразу давать пользователю информацию, необходимую для понимания: что он сможет найти на других страницах сайта, а что нет. Информацию нужно подавать постепенно, от страницы к странице, а не пытаться вывалить все и сразу.
- Принцип примеров. Использование принципа существенно улучшает пользовательский опыт. Например, когда вы заходите в определенную категорию товаров на Amazon, на сайте выводятся примеры товаров, которые попадают в эту категорию. Это помогает пользователю быстрее сориентироваться, особенно, если он не до конца понимает, что значит название категории.
- Принцип парадного входа. Половина посетителей попадают на ваш сайт не через главную страницу. Это значит, что любая страница должна содержать необходимый минимум текстовой информации — чтобы пользователи поняли, где они находятся. Также это лишний раз подтверждает пункт 3, не нужно пытаться уместить всю информацию на домашней странице сайта.
- Принцип множественной классификации. Этот принцип говорит о том, что разные пользователи используют ваш сайт по-разному, у них могут быть разные методы для нахождения одной и той же информации. Например, одни будут пользоваться поиском, другие предпочтут поблуждать по сайту. Контент нужно адаптировать к различным сценариям пользовательского поведения.
- Принцип целенаправленной навигации. Не так важно, где находится меню, важно то, что на нем написано. Постарайтесь, чтобы ваше меню и панель навигации показывали, где находится пользователь сейчас и куда он может попасть с текущей страницы.
- Принцип роста. На подавляющем большинстве сайтов контент — текучая, изменчивая сущность. Количество контента у вас на сайте сегодня может быть лишь малой долей того, чтобы там может быть завтра. Организуйте контент таким образом, чтобы позволять ему расти в будущем. Причем не только в плане расширения какого-то блока с текстом: контент может добавляться совершенно разных типов.
Все эти принципы в большей или меньшей степени будут применимы к тому или иному проекту. Как начать работу над информационной архитектурой?
C чего начать
С чего стоит начать — так это с выяснения цели и миссии проекта. Причем нужно понять, какова его миссия сегодня, и какой она может быть в будущем. Попробуйте узнать у клиента, как они видят проект через полгода или пару лет.
И наконец, вы должны думать, как конечные пользователи. У подкованных технически пользователей и новичков — совсем разный стиль пользования сайтом.
Выяснили эти два момента — можно планировать контент-стратегию детально.
И наконец, вы должны думать, как конечные пользователи. У подкованных технически пользователей и новичков — совсем разный стиль пользования сайтом.
Выяснили эти два момента — можно планировать контент-стратегию детально.
Как пользователи находят контент
Есть четыре разных способа, как пользователи ищут информацию на веб-сайте. Классификация дает хорошую отправную точку для проектирования информационной архитектуры.
Известная цель
В этом случае пользователь точно знает, что он ищет, знает, как это описать, и даже может знать, где начать это искать. Это мечта IA-профессионала.
Таких пользователей не нужно водить за ручку, они, скорее всего, воспользуются поиском или нырнут в меню. Если ваш поиск возвращает информативные результаты, то проблем не будет.
Таких пользователей не нужно водить за ручку, они, скорее всего, воспользуются поиском или нырнут в меню. Если ваш поиск возвращает информативные результаты, то проблем не будет.
Исследование
Когда пользователь знает, что искать, но не представляет, как. Решение — модуль поиска, который сам предлагает термины, позволяющие сузить круг поиска. Такой поиск окажет пользователю неоценимую услугу.
Неизвестность
Пользователь имеет смутное представление, он думает, что знает, что ему нужно. Особо актуально для сложных отраслей: финансовых, юридических. Универсального решения нет, но как подтолкнуть пользователя к правильному результату — нужно придумать обязательно.
Повторный поиск
Пользователь уже видел нужный ему контент, но не знает, как найти его снова. Есть два варианта: сделать раздел «вы недавно просматривали эти страницы» и функцию добавления в закладки. Первый работает пассивно, второй требует участия пользователя, но зато не ограничен по объему «памяти».
Модели для организации контента
Есть шесть основных моделей для организации и структурирования контента на сайте. Иногда они могут сочетаться, как правило, в разных разделах проекта. Но могут использоваться и независимо друг от друга.
- Одна страница. Подходит для сайтов с очень ограниченным содержимым, узкой целью. Подходит для продуктовых сайтов, суб-сайтов больших компаний или персональных страничек.
- Плоская структура. Плоская структура чаще всего применяется на сайтах менее, чем на 10 страниц. Цепочка навигации сквозная, не имеет ответвлений. Такую структуру часто можно видеть в портфолио агентств, на простых бизнес-сайтах или маленьких площадках e-commercre.
- Индекс. Структура, похожая на плоскую. Однако на главой странице есть список всех страниц. Примеры аналогичны предыдущей структуре.
- Ромашка. Такая структура чаще всего встречается в веб-приложениях, на образовательных сайтах. После выполнения целевых действий на определенной странице пользователю предлагают перейти на главную. Например, в приложении «список дел» после создания, редактирования или завершения задачи пользователь возвращается к списку.
- Строгая иерархия. В строгой иерархии переход на следующую страницу можно сделать только со страницы-родителя. Это отличная структура для сайтов, авторы которых не хотят, чтобы пользователи пропускали страницы. Например, если на сайте выложен последовательный учебный курс.
- Многомерные иерархии. Одна из наиболее распространенных структур, во многом из-за простоты реализации в плане IA. В такой структуре наибольшее количество элементов навигации, каждая страница доступна отовсюду.
«Конвенция о маркировке»
Названия некоторых страниц очень важно писать определенным образом. Например, когда пользователь ищет контактную информацию, он в первую очередь будет искать ссылки на раздел «свяжитесь с нами», «контакты» или что-то подобное. Но если вы назовете страницу «достучаться» или «обратная связь», то пользователю придется дополнительно потрудиться. Или вообще уйти на сайт конкурента.
Аналогично — страница «о компании» или «команда» лучше воспринимается, когда названа примерно так.
Аналогично — страница «о компании» или «команда» лучше воспринимается, когда названа примерно так.
Большой сайт против маленького сайта
Хорошая организация контента важна для любого сайта, большого и маленького, но чем больше контента у вас на сайте, тем важнее роль структуры.
Представьте, что в статьях Википедии не было бы ссылок на другие статьи. Пришлось бы каждый раз пользоваться поиском.
Представьте, что в статьях Википедии не было бы ссылок на другие статьи. Пришлось бы каждый раз пользоваться поиском.
UX против IA
Многие дизайнеры и разработчики думают, что IA является лишь частью работы UX-дизайнера. Да, эти области неразрывно связаны, но это не одно и то же.
Хорошая информационная архитектура является ключом к позитивному пользовательскому опыту.
Конечно, ваш UX-дизайнер может выполнять роль IA, но на крупных и сложных проектах лучше все же иметь выделенного специалиста.
Хорошая информационная архитектура является ключом к позитивному пользовательскому опыту.
Конечно, ваш UX-дизайнер может выполнять роль IA, но на крупных и сложных проектах лучше все же иметь выделенного специалиста.
IA против вашей CMS
Независимо от того, насколько хороша ваша информационная архитектура, если под проект не подобрать адекватную CMS, не сделать простым процесс создания контента для его авторов, все пройдет прахом.
Спросите себя: кто будет взаимодействовать с CMS, какой у этих людей уровень технических знаний и опыта. Техничная и сложная CMS, хоть и позволят выполнять больше задач, но может оказаться непосильной для контент-менеджеров.
Спросите себя: кто будет взаимодействовать с CMS, какой у этих людей уровень технических знаний и опыта. Техничная и сложная CMS, хоть и позволят выполнять больше задач, но может оказаться непосильной для контент-менеджеров.
Инструменты
Многие инструменты для IA являются аналоговыми, несмотря на цифровое происхождение самой науки.
Доски, сортировка карточек — очень популярные методы IA, особенно помогают на начальных этапах.
Цифровые инструменты
Эти инструменты набирают популярность, потому что все больше команд работает удаленно.
Приложения-доски отлично помогают провести брейншторм вместе с удаленной командой или клиентов. Самые лучшие представители таких сервисов функционируют как реальные доски, но на них можно легко давать ссылки.
Инструменты:
Инструменты:
Инструменты для прототипирования — ключевые в наборе информационного архитектора.
Инструменты:
Заключение
Информационная архитектура — жизненно важная часть создания хорошего user experience. Хорошо организованный и структурированный контент делает сайт более легким в использовании (и более полезным для посетителей). Даже если вы дизайнер и работаете в паре с информационным архитектором на некоторых проектах — такое сотрудничество улучшит ваши дизайнерские навыки.