Организация контента на веб-ресурсе: плоская иерархия vs. глубокая иерархия

Posted on by riasevastopol

Резюме: информационная архитектура допускает организацию контента как в плоской (широкой), так и в глубокой иерархии. Оба метода имеют недостатки и свои преимущества.

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

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

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

Для анализа того, как структура будет трудиться, создадим иллюстрацию, показывающую с наибольшего уровня иерархии — основной/домашней страницы — как разные страницы сайта связаны между собой.Организация контента на веб-ресурсе: плоская иерархия vs. глубокая иерархия

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

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

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

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

Плоская (либо широкая) иерархия слева выглядит широкой и маленькой, по причине того, что она имеет лишь 3 уровня. Структура справа, с меньшим числом категорий и подкатегорий на каждом уровне, выглядит «выше» (правильнее сообщить, глубже) и уже.

  • Введение в юзабилити

Не смотря на то, что визитёры веб-ресурса ни при каких обстоятельствах наглядно не заметят эти визуализации иерархий (отметим, что в отличие от, к примеру, интерфейса пользователя (UI) информационная архитектура неизменно скрыта от глаз визитёра), форма иерархии имеет огромное влияние на опыт конечного пользователя по 2 обстоятельствам:

  1. Контент легче обнаруживаем (от англ. Discoverable — найти), в то время, когда он не погребен под несколькими прошлыми слоями содержимого. При всех других равных условиях глубокие иерархии тяжелее применять при поиске нужной информацим.
  2. Обособленные (специальные) категории, каковые не перекрываются ни с какими вторыми, являются самыми несложными для понимания. Но это палка о двух финишах: в глубоких иерархиях, в то время, когда на каждом уровне имеется лишь пара категорий, они имеют тенденцию быть более «родственными», неспециализированными, разрешая образовываться некоей путанице в определениях искомого контента.

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

  • Секреты юзабилити: отличие между навигацией сайта и информационной архитектурой

Сайты трех больничных учреждений, что находятся в штате Флорида, иллюстрируют преимущества и недочёты разных информационных иерархий. На сайте Главного военного госпиталя Тампы (Tampa General Hospital) в категории «Медицинские услуги» перечислены 32 отдельных групп болезней и избавляющих от них лечебных центров. Эта плоская иерархия выпадающего меню весьма легко разрешает найти какие конкретно виды лечения предлагает Основной госпиталь.

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

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

Но с аналогичной организацией меню связан риск, что пользователи смогут взять когнитивную перегрузку от количества «упавших» на них ссылок, не прочтут целый перечень пристально и пропустят хороший вариант. К примеру, посетительница, интересующаяся неонатальной помощью, легко отыщет ссылку на центр интенсивной неонатальной помощи Jennifer Leigh Muma, но в конечном счете по неточности кликнет на педиатрический центр в Healthpark.

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

Плоская иерархия: сайт Главного военного госпиталя Тампы показывает визитёрам долгий перечень из более чем 30 пунктов в категории «Медицинские услуги». Вместо того, дабы быть «погребенными» в нескольких широких категориях, отдельные лечебные услуги раскрываются на собственной странице, будучи дешёвыми из выпадающего меню в глобальной навигации.

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

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

Умеренно глубокая иерархия: сайт Баптистского Мемориального военного госпиталя предлагает пользователю лишь 16 территорий обслуживания; кое-какие конкретные темы не перечислены в этом меню, так что пользователи должны будут перейти на более низкие уровни иерархии, дабы отыскать их.

Сайт Университета здравоохранения Флориды, в отличие от упомянутых выше веб-ресурсов, показывает конкретную данные о болезнях лишь на низших уровнях иерархии сайта, ниже «Ухода за больными» (Patient Care), ниже «Медобслуживание» (Medical Care) и «Специальное обслуживание» (Specialty Care).

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

Глубокая иерархия: сайт «прячет» конкретную данные на 3 уровня ниже домашней страницы: ГлавнаяУход за пациентамиМедицинское обслуживаниеСпециализированное обслуживание.

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

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

Ярлыки, примененные в глубокой иерархии: «Уход за больными» (Patient Care) в раскрывающемся меню включает другие варианты навигации (перечисление болезней в алфавитном порядке и «Самые популярные запросы»), дабы оказать помощь сделать содержимое более низкого уровня более заметным.

  • ТОП-10 неточностей информационной архитектуры сайтов

Представление иерархии в пользовательском интерфейсе

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

Но чем глубже делается иерархия, тем выше шанс, что визитёры заблудятся. Для пользователей сайтов, имеющих более чем, предположим, 3 уровня в глубину, спасением смогут стать «хлебные крошки» (Breadcrumbs, в честь храброго и находчивого Гензеля из сказки братьев Гримм, что «все бросал и бросал на дорогу хлебные крошки»), показывающие связь между основной страницей сайта и текущей страницей, что окажет помощь «путешественнику» сориентироваться в структуре сайта.

Карты сайта являются еще одним незаменимым подспорьем в изучении веб-ресурса со сложной иерархией.

  • Юзабилити сайта: что такое прямой и последовательный доступ?

Вместо заключения: плоская либо глубокая иерархия?

Быть ли иерархии вашего веб-ресурса плоской либо глубокой? Как и на большая часть так называемых «дизайнерских вопросов», единственного верного ответа нет и на данный. Плоские иерархии прекрасно трудятся, в случае если у вас на сайте имеется определенные, узнаваемые категории.

В то время, когда пользователи знают, что им необходимо, они находят категорию товара, а после этого сам товар — всё, сделка закрыта.

Но из каждого правила имеется исключения. Кое-какие офферы так сложны, что подпадают под через чур большое количество категорий, дабы «приписать» его к какому-то одному товарному разделу. Ваше конкретное предложение возможно таким новаторским, что отнести его к одной категории — значит, ввести в заблуждение целевую аудиторию.

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

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

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

Высоких вам конверсий!

По данным nngroup.com, image source mammacult.com

Случайные статьи:

Война форматов: видео vs текст


Подборка похожих статей:

riasevastopol

More Posts