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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3. По времени

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4 комментария

Забыли еще один способ: через жопу (как в Фейсбуке)

14

структурировали очевидное

2

Для углубления темы организации информации на сайте очень хорошо можно изучить принципы дизайна от UnBounce для повышения конверсии на страницах. Здесь есть перевод материалов: https://roman.ua/internet-marketing/kakoj-dizajn-mozhet-podnyat-konversiyu/

Отличный перевод очередной копипасты из Вурмана тридцатилетней давности. Предлагаю уже пойти дальше:
https://antonz.ru/no-more-latch/

ИТ-компании попросили у правительства поддержки на случай возвращения иностранных игроков — РБК

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

5454
88
11
11
О, дотационные додики заскулили… ничего не могут сделать в конкурентной среде.
OpenAI предложила разрешить обучать нейросети на защищённом авторским правом контенте

Иначе США «проиграет ИИ-гонку».

22
11
11
11
Искусственный интеллект и веб-трафик: как получать дополнительный трафик с помощью ИИ?
Искусственный интеллект и веб-трафик: как получать дополнительный трафик с помощью ИИ?
«Алмаз-Антей» выделил производство гражданского транспорта в отдельное направление — туда перешла команда проекта электрокара E-Neva

Они работают над производством грузовиков БАЗ.

Прототип E-Neva. Источник фото: Александр Демьянчук / ТАСС
1717
11
Перевожу с чиновичьего: Путин деньги выделил после того, как прочитал заметку на VC
Головная структура «Т-банка» открыла R&D-центр для разработки новых технологий

Вместе с вузами он будет изучать алгоритмы ИИ.

66
22
Досье на телефонных мошенников: Forbes узнал детали концепции государственной антифрод-системы

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

Фото «Интерфакс» 
44
44
Лучшие кулинарные мастер-классы для детей в Москве

Уникальные занятия с шеф-поварами.

ЦБ определил условия для получения статуса квалифицированного инвестора

Пока это проект. Регулятор планирует, что документ вступит в силу с 23 мая 2025 года.

100
2929
1010
66
33
11
П@дорасы
Видео: китайская UBTech показала своих роботов на заводе по производству электромобилей

Компания уже поставляет их на предприятия Volkswagen и Audi в Китае.

1111
55
Промышленные роботы давно используются на производствах, в том числе автопроизводители. Главный вопрос, зачем делать гуманоидообразными? Другие формы намного эффективнее сейчас работают.
День 1115: объём рынка e-commerce в России в 2025 году составит 16 трлн рублей

Собираем новости, события и мнения о рынках, банках и реакциях компаний.

День 1115: объём рынка e-commerce в России в 2025 году составит 16 трлн рублей
55
22
Мои клиенты зарабатывают больше меня, а я не могу перестать им помогать

Меня зовут Вячеслав. В 2014 году я был фрилансером и делал заказы за 3000 рублей. Сегодня развиваю платформу, где предприниматели запускают проекты без программистов: один создал HR-платформу, другой за 90 дней собрал мобильное приложение для торговли с Азией, третий прошел акселерацию ФРИИ и вошел в топ-25 из 150 заявок.

Вот тут считали сколько остается до запуска, наивные) 
88
Какие есть бонусы для продавцов? Вы точно не знали о них

Когда я рассказывал своим клиентам об этих бонусах, мне говорили “Сергей, а что, так можно было?”. Делюсь не популярными, но очень выгодными плюшками на ВБ, Озоне, Яндекс Маркете, Авито и Мегамаркете. P.S. по моему опыту о них не знает 80% селлеров.

Какие есть бонусы для продавцов? Вы точно не знали о них
2020
[]