Организация информации на сайте по принципу «пяти шляп»

Vc.ru 1

На что стоит ориентироваться при расположении элементов на странице — советы UX-дизайнера Антона Николова.

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

Среди множества способов отображения информации лишь один выдержал испытание временем и отлично работает по сей день. Он называется «пять шляпных полок» («Five Hat Racks»).

Эту концепцию предложил Ричард Сол Вурман в книге «Information Anxiety». Позже в работе «Information Architect» (1996) он пересматривает идею «пяти шляпных полок», чтобы сформировать принцип под названием LATCH.

Информация может быть бесконечной, однако способы её организации ограничены концепцией LATCH: Местоположение (Location), Алфавит (Alphabet), Время (Time), Категория (Category) или Иерархия (Hierarchy).

— Ричард Сол Вурман

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

Я тысячу раз пытался найти другие способы, но всегда использую один из этих пяти.

Рассмотрим эти способы поподробнее.

1. По местоположению

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

Положение в пространстве важно при различном происхождении и местонахождении вещей.

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

Pokemon Go – одно из приложений, организующих информацию по местоположению

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

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

Где это использовать

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

2. По алфавиту

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

Например, словарь или большая телефонная книга в цифровом или печатном виде.

Экран контактов от Яо Лю

Где это использовать

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

3. По времени

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

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

Приложение прогноза погоды от Хави Переза

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

Где это использовать

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

4. По категориям

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

Этот метод организации информации используется как в физическом, так и в цифровом мире: от товаров и отраслей торговли до категорий на Pinterest и хэштегов в Twitter.

Выбор категорий в дизайне от Пола Флавиуса Нечиты

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

Где это использовать

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

Следует помнить, что люди не всегда одинаково группируют вещи, особенно когда свойства информации попадают под несколько категорий. К примеру, водонепроницаемый Bluetooth-динамик: к какой категории его следует отнести — аксессуары для ванной комнаты или аудиотехника?

Убедитесь, имеют ли условия, определяющие категории, смысл для пользователя.

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

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

5. Иерархия или континуум

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

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

Размерная линейка от Дэнна Петти

Где это использовать

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

Как надеть все пять «шляп» одновременно

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

Сразу несколько способов просмотра — это то, чего в современном цифровом мире многие пользователи ожидают по умолчанию. Для этого придётся носить все пять «шляп» и использовать их наилучшим образом.

Статья вдохновлена книгой Уильяма Лидвелла «Универсальные принципы дизайна».

Присылайте свои колонки и интерфейсные кейсы на interface@vc.ru.