Секреты юзабилити: разница между информационной архитектурой и навигацией сайта
Краткое резюме: информационная архитектура сайта (Information Architecture, IA) — это информационная основа любого многоуровневого веб-сайта.
Навигация веб сайтов (navigation) — набор элементов пользовательского интерфейса (UI, user interface), позволяющий посетителю найти и получить конкретную информацию на веб-ресурсе, вступить в маркетинговую интеракцию, совершить конверсионное действие.
Этот пост продолжает серию публикаций о юзабилити в блоге SaaS-платформы LPgenerator.
Практикующие веб-дизайнеры и маркетологи иногда совершают ошибку, считая понятия «информационная архитектура» и «навигация» практически синонимами. Нет, это не так: хотя 2 этих термина (точнее сказать, концепции веб-дизайна) тесно связаны меж собой, они, однако, неравнозначны.
Структура навигации сайта зависит от IA — это безусловно, но «информационная архитектура» — гораздо более глобальное понятие, выходящее далеко за рамки просто навигации сайта.
Натаниэль Дэвис (Nathaniel Davis), специалист по оптимизации пользовательского опыта (UX) и проектированию пользовательских интерфейсов, еще в далеком 2011 году выложил в блоге UXmatters концептуальную статью «Основы практического использования информационной архитектуры» (Framing the Practice of Information Architecture), в которой предложил относиться к веб-навигации как видимой надводной части условного айсберга, имя которому — Information Architecture.
Содержание
Что такое информационная архитектура сайта?
Information Architecture любого веб-ресурса включает в себя 2 основных компонента:
- идентификацию и определение (дефиницию) контента и функциональности;
- лежащие в основе ресурса иерархию, структуру и номенклатуру, которые определяют взаимоотношения между контентом и функциональностью.
Информационная архитектура (IA) не является частью пользовательского интерфейса, видимого на экране, — скорее, IA конфигурирует и обуславливает внешний вид и набор опций user interface.
Information Architecture состоит из электронных документов, таблиц, диаграмм, отнюдь не из макетов или прототипов веб-страниц.
Вот блок-схема, наглядно отображающая взаимосвязь между отдельными составляющими контента на ресурсе nngroup.com. Синие узлы представляют информационные объекты 1 уровня, зеленые — второго, желтые — третьего.
Даже если IA не видна собственно в пользовательском интерфейсе, она определенно влияет на пользовательский опыт. Напомним, что пользовательский опыт есть сумма всех впечатлений, возникающих у посетителя во время интеракции с веб-ресурсом.
А теперь очень важный момент: в отличие от UI, информационная архитектура как основа структуры сайта не видна пользователю. Однако маркетологи и дизайнеры надеются, что контент ресурса разделен по категориям и уровням в соответствии с ожиданиями и потребностями представителей целевой аудитории.
Несоответствие контента и функциональности запросам посетителей есть одна из основных причин их ухода как с многостраничных сайтов, так и автономных лендинг пейдж, пусть информационная архитектура последних много проще. Плохая структурная организация контента (в самом широком смысле слова — от статей или постов до диаграмм и электронных таблиц) — это причина «трения» на конверсионном пути.
Приведем аналогию: если вы не персонаж комиксов со сверхъестественными способностями (предположим, Супермен) или врач-рентгенолог, вы не увидите скелетов лошади или курицы, просто взглянув на них. Однако костная структура этих живых организмов предопределяет то, что эти животные — очень разные существа. Не пытайтесь оседлать курицу для верховой поездки: ее скелет просто не выдержит ваш вес.
Для определения архитектуры веб-ресурса проводятся следующие мероприятия:
- Инвентаризация контента (Content inventory): экспертное исследование сайта, которое проводят, чтобы найти и идентифицировать существующий контент.
- Аудит контента (Content audit): оценка полезности, точности, тональности подачи и общей эффективности контента.
- Группировка информации (Information grouping): определение степени клиентоориентированности соотношения «пользователь — контент».
- Разработка и усовершенствование таксономии контента (Taxonomy development): определение стандартизированной терминологии для классификации и систематизации содержимого веб-ресурса (например, товарные категории для офферов интернет-магазина).
- Создание описательной информации: определение метаданных, которые могут быть использованы для создания ссылок по теме, списков или других компонентов навигации, способствующих обнаружению необходимой информации, служащей активатором конверсионного действия.
- Юзабилити пользовательского интерфейса
Определение и описание навигации сайта
Навигация сайта представляет собой набор компонентов пользовательского интерфейса. Основная цель навигации — помочь пользователям найти контент и функциональные элементы ресурса (другими словами, «органы управления» UI), чтобы затем мотивировать к совершению запланированного маркетологом действия.
Типы навигации сайта и ее компоненты:
- глобальная навигацая (global navigation),
- локальная навигацая (local navigation),
- вспомогательная навигацая (utility navigation),
- фильтры категорий, ценовых границ и т. п. (filters),
- ссылки по теме (related links),
- «толстый» футер (fat footer), дублирующий элементы глобальной, локальной и вспомогательной навигации в собственно «подвале» страницы,
- и т. д.
Примеры навигационных компонентов: 1 — вспомогательная навигация; 2 — глобальная навигация; 3 — указатель местоположения («хлебные крошки», breadcrumb trail; буквально — «путь, помеченный рассыпанными хлебными крошками»); 4 — локальная навигация; 5 — ссылки по теме (в данном случае на статьи и сообщения в блоге); 6 — «толстый» футер.
Перед имплементацией элемента навигации на веб-страницу следует решить несколько вопросов.
Статистические приоритеты: сколько пользователей будут пользоваться этим навигационным элементом. Например, пользователи будут ориентироваться на ресурсе при помощи локальной навигации или предпочтут «привязанные» тематически ссылки?
Размещение: на каких страницах этот элемент должен располагаться? А где именно на макетной сетке: вверху, внизу, слева, справа?
Дизайнерский шаблон: что будет максимально способствовать юзабилити и положительному пользовательскому опыту — табы, выпадающие меню, «мегаменю» и т. д.?
Взаимосвязь между информационной архитектурой и навигацией
При проектировании нового многостраничного веб-ресурса многие дизайнеры и маркетологи игнорируют концепцию IA, обращая внимание только на навигацию как таковую. Такой подход чреват большими неприятностями и финансовыми потерями.
Навигация, не охватывающая весь контент сайта полностью и не раскрывающая весь функционал веб-ресурса, рано или поздно потребует тотального редизайна, а это дорогостоящее занятие.
Рассмотрим гипотетическую ситуацию: дизайнер решил использовать широко распространенную навигацию «в стиле перевернутой L» (верхний навигационный бар и левый сайдбар, как его еще называют на сленге, «рельс»).
Многим пользователям импонирует такое решение, оно довольно функционально. Но есть одно «но»: на перевернутой L можно разместить ссылки на контент, логическая иерархия которого не превышает 4 уровня в глубину.
Если уже в ходе эксплуатации выяснится, что контент раздела превышает этот запас (при том, что 5 и больше уровней — это вполне обычная глубина информационной архитектуры для современных ресурсов типа интернет-магазинов), — то останется 2 выхода:
- с нуля создавать новую навигационную структуру,
- пытаться втиснуть все содержимое в 4 иерархических уровня.
- Как повысить конверсию, или 5 способов преодолеть эффект трения
Определитесь с IA, прежде чем проектировать навигацию
Прежде чем приступить к разработке дизайна или редизайну веб-ресурса, следует, как говорится, «заглянуть под капот машины» и начать с определения или переопределения Information Architecture. Не нужно доводить ее до блеска, откладывая создание макета и прототипа ресурса в долгий ящик, но первый эскиз информационной структуры нужно сделать задолго до подготовки контента и заполнения им сайта.
Выбор компонентов навигации только на основе их визуальной привлекательности может сослужить вам плохую службу: вы можете разрушить идеальную инфоархитектуру, что не позволит удовлетворить потребности пользователей в вашем контенте. Тогда не ждите лидов или продаж!
Отметим, что при применении автономных целевых страниц, отличающихся простотой Information Architecture и «неглубокой» структурой при отсутствии глобальной навигации, все выше упомянутые проблемы грамотной иерархической организации контента просто не возникнут.
Некоторые особенности архитектуры веб-сайта
Вы узнаете о потенциале архитектуры веб-сайта и его особенностях. Также мы рассмотрим принципы их построения и степень влияния на процесс продвижения сайта. В статье рассматриваются такие параметры архитектуры веб-сайта, как: доступность, производительность, надежность и управляемость.
Введение в особенности архитектуры веб-сайта
Под архитектурой веб-сайта понимают структуру его страниц, которая ставит перед собой одну цель – облегчить поиск информации. Архитектура веб-сайта охватывает все информационное содержимое ресурса: заголовки, страницы, панель навигации, гиперссылки, поиск и т.д.
Качественная архитектура значительно упрощает работу с сайтом. Пользователь за несколько секунд может найти интересующую его информацию без ввода ключевых слов или обращения к поисковику сайта. Быстрая и удобная работа с сайтом способствует созданию положительного отношения пользователя к ресурсу.
Принципы строения архитектуры веб-сайта
- Доступность. Под доступностью веб-сайта понимают его отличную работоспособность. Важность этого параметра можно рассмотреть на примере большой компании. Только представьте, во сколько ей может обойтись простой, длительностью в несколько часов.
- Производительность. Архитектура веб-сайта в обязательном порядке должна приспосабливаться к быстрому удовлетворению поисковых запросов пользователей. Чем дольше вам удастся удержать аудиторию у себя на ресурсе, тем выше получите доход.
- Надежность. Система должна работать четко, без сбоев. Особенно параметр надежности архитектуры веб-сайта необходимо развивать на часто обновляемом ресурсе. Согласитесь, что у посетителей останется неприятное впечатление от сайта, где на поисковый запрос по новой информации им будет выдаваться неактуальная статья. Архитектура строится таким образом, чтобы обеспечивать максимально быструю и надежную выдачу информации.
- Способность к масштабированию. При создании архитектуры веб-сайта необходимо учитывать не только реальные размеры проекта, но и его перспективы в будущем. Если этот параметр не учитывать, то при расширении проекта вы не сможете справиться с большим количеством добавляемой информации, что в итоге приведет к путанице. Создавайте пустые информационные блоки, которые в будущем будут заполняться.
- Управляемость можно прировнять к масштабированию, однако, между ними есть несколько различий. Первое – управляемость обеспечивается за счет модификаций и обновлений; второе – при налаживании управления архитектурой веб-сайта необходимо учитывать его эксплуатационные качества.
- Стоимость. Для усовершенствования и поддержания ресурса архитектура веб-сайта должна учитывать стоимость программного и аппаратного обеспечения. Практика показала, что для создания качественной и продуманной архитектуры веб-сайта его владельцу придется расстаться с не одним десятком тысяч рублей. В вознаграждение он получит идеальную платформу, где пользователи смогут находить информацию в считаные секунды.
Заключительное слово об архитектуре веб-сайта
Эксперты уверены, что большинство владельцев крупных сайтов зря недооценивают мощь архитектуры веб-сайтов. Практика показала, что молодые сайты начали быстро набирать популярность за счет внедрения на свой ресурс качественной и продуманной до мелочей архитектуры. Статистика говорит, что пользователи с удовольствием заходят на удобные сайты, рекомендуя их своим знакомым и близким.
Оставляйте зявки на нашем сайте по всем интересующим Вас вопросам в области IT, мы обязательно свяжемся с Вами в ближайшее время и проконсультируем Вас.
Архитектура сайта: что это такое и на что она влияет
Архитектура сайта представляет собой структуру его страниц и программной части. Это определенная, четко оформленная система, организующая различные файлы, гиперссылки, заголовки, поиск, панель навигации и просто информацию, которая содержится на сайте. Именно логическое построение всех этих элементов, их местоположение и взаимосвязь определяют, насколько будет удобно и просто пользоваться данным ресурсом. Такая структура даёт возможность пользователю видеть абсолютно все разделы сайта, позволяет ознакомиться с различной информацией, представленной на нем, т.е значительно повышает юзабилити. Создание архитектуры сайта является первоочередным этапом в его проектировании.
Для чего нужна архитектура веб-сайта
Её основная цель – создание ресурса, который бы помог абсолютно любому пользователю находить нужную ему информацию, не затрачивая на это большого количества времени. Даже при условии, что он оказался на сайте впервые, пользователь должен быстро освоиться и понять, каким образом расположена информация на данной площадке. Современный человек маловероятно решит тратить на это слишком много времени, открывая бесконечное число ссылок в поисках нужной информации. В этой ситуации пользователю удобнее покинуть сайт и просто вбить запрос в любую поисковую систему.
Хорошо продуманная и прописанная архитектура как большого, так и маленького веб-сайтов способна значительно упростить индексацию страниц. Однако реализовывать эту концепцию намного удобнее на первоначальном этапе проектирования ресурса, когда вносить изменения еще не представляется чем-то сложным.
В чем суть оптимизации архитектуры
Любому веб-мастеру знакома ситуация, когда поиск нужной информации на созданном сайте представляет собой достаточно сложный и долговременный процесс, особенно, если ресурс многократно увеличил количество своих страниц. Частичным выходом из сложившейся ситуации может стать поиск по ключевым словам, однако такое решение никак не влияет на индексацию, да и является оптимальным далеко не для всех.
Поэтому оптимизация архитектуры сайта является в этом случае наиболее удобным решением. Это отнимет большое количество времени, но сделает сайт наиболее понятным простому пользователю, ему будет легче ориентироваться и искать необходимую информацию.
Что представляет собой процесс оптимизации структуры
Это систематизация всех страниц, грамотное распределение внутренних ссылок, работа с необходимыми тегами, которые незаменимы при поисковом продвижении. Основная цель оптимизации в этом случае – сделать сайт максимально полезным и привлекательным для пользователя, помочь ему находить нужную информацию, прилагая минимум усилий.
Если же дело касается коммерческого ресурса, то могут появиться другие требования, допустим, сделать так, чтобы для посетителей стали наиболее доступными ключевые страницы, которые приносят основную прибыль.
Какое значение имеет архитектура сайта для продвижения?
Успех раскрутки сайта зависит от двух основных моментов:
- Внешний фактор (количество внешних ссылок)
- Внутренний фактор (контент и структура страницы)
Основная часть архитектуры сайта в SEO — перелинковка документов. От того насколько верно она произведена, зависит скорость попадания страницы в базу данных поисковиков.
Перелинковка, безусловно, одна из значимых констант архитектуры сайта, однако ссылки, используемые посетителями для осуществления перехода по различным страницам друг на друга, являются главной её частью. Высота их нахождения является очень весомым фактором. Здесь стоит говорить о вложенности страницы, а не о месте её расположения. Таким образом, ссылки, ведущие напрямую к главной, считаются более важными. Расположенные на остальных страницах – менее значимы, следовательно, их показатели значительно меньше.
Хорошо разработанная архитектура сайта помогает выделить наиболее важные страницы для поисковиков, например, «Цены» или «Услуги».Такие ссылки, обычно, размещены на главной. Данный факт привлекает внимание различных поисковых систем, а значит, обеспечивает наиболее высокие позиции в результате поиска.
Разработка сайта. Какой должна быть архитектура сайта?
Создание веб-сайта — это как строительство дома, прочная основа и инфраструктура имеют решающее значение, хотя все внимание привлекают блестящие элементы (например, кухни и ванные, декор).
Что такое архитектура сайта?
Давайте начнем с определения. Архитектура веб-сайта — это способ организации контента и создания навигационных элементов управления, позволяющих посетителям сайта получать информацию, представляющую для них наибольшую ценность. Более кратко, архитектура сайта включает в себя структуру сайта, дизайн интерфейса, удобство использования и пользовательский опыт.
Однако реальный вопрос для нас, маркетологов, заключается в том, как мы думаем об архитектуре веб-сайта с точки зрения непрофессионала и как мы реализуем ее на наших собственных сайтах?
Прежде всего, убедитесь, что вы думаете с точки зрения ваших потенциальных клиентов. Это, пожалуй, самый важный фактор в создании веб-сайта, который привлекает вашу аудиторию и побуждает ее выполнять желаемое действие.
Организуйте сайт так, чтобы он отвечал на проблемы аудитории и использовал терминологию, которую они используют сами. Создайте центры для ваших ключевых сегментов аудитории. Это могут быть разные отрасли, разные типы организаций в отрасли, даже разные роли в организациях, с которыми вы стремитесь вести бизнес. Говорите на их языке как можно более конкретно, и вы привлечете их внимание.
Баланс между простотой юзабилити и плотностью контента
Вы эксперт в том, что вы делаете. У вас есть большой опыт. Естественно, вам есть, что сказать по поводу всего, что делаете. Проблема в том, что никто не хочет слышать все это, пока сам не вступит на этот путь.
Это означает, что вы должны знать о желаниях своей аудитории получать оперативную, общую информацию в быстрых, легко усваиваемых текстах, которые позволяют в дальнейшем копать глубже.
Таким образом, на главной странице необходимо разместить «тонкую нарезку» из всего, которая представляет интерес и рассказывает о том, что будет, если углубиться в изучение на 6–8 кликов.
В идеале вы должны создать свой сайт с удобными обзорными страницами, которые приведут к страницам, посвященным одному из аспектов предлагаемого вами решения. Дополнительный уровень может (и часто должен) быть доступен для тех, кто хочет углубиться в такие вещи, как базовые исследования, которые определяют их решение.
Архитектура сайта должна основываться на характере и структуре разговоров с потенциальными клиентами. Вы хотите позволить им легко перемещаться по вашему веб-сайту так же, как они хотят продолжить разговор с вами о покупке?
Думайте за клиентов
«Не заставляйте меня думать» — это часто имеют в виду клиенты, которые что-то ищут на сайте. В конечном счете, юзабилити, вероятно, является основным фактором при рассмотрении успеха архитектуры веб-сайта.
Суть в том, что вы хотите удивить и порадовать вашу целевую аудиторию своими идеями и опытом, а не навигацией и структурой вашего сайта. Это должно быть просто и естественно. Вот пример: если ваша аудитория не супер-хиппи, вы, вероятно, захотите назвать свою контактную страницу «Контакты», а не «Кликай сюда, чувак».
Если вы будете последовательны от раздела к разделу с точки зрения контента и простоты юзабилити, вы увеличите свои шансы увидеть положительную отдачу от инвестиций в ваш сайт.
Компания Futureinapps создает сайты, адаптивные под любые устройства и запросы любых клиентов!