EverProduct
UX-дизайн

Этап 03 · Спроектировать

Где бы ты стал это искать: информационная архитектура

Хомут лежит в сантехнике, в автотоварах и в крепеже — все три логичны. Структура не про правоту, а про совпадение с тем, куда человек смотрит первым.

Ты в хозяйственном магазине ищешь хомут для шланга. Сантехника? Автотовары? Крепёж? Все три варианта защитимы. Магазин выбрал один — по логике того, как товар приходит от поставщиков, — и ты пройдёшь два ряда, прежде чем найдёшь его или спросишь.

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

Структура — это не меню

Об информационной архитектуре говорят как о «панели навигации» — это примерно как назвать несущие конструкции здания «входной дверью». Ричард Сол Вурман дал области имя; Луис Розенфельд и Питер Морвиль придали ей рабочую форму, и их разбиение до сих пор самое полезное:

  • Организация — как вещи сгруппированы и связаны.
  • Наименование — как каждая группа называется.
  • Навигация — как между ними перемещаются.
  • Поиск — как попадают куда-то напрямую.

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

И ИА — самый дорогой слой для изменения задним числом. Цвета — это таблица стилей; перестройка структуры — это адреса, редиректы, код, документация, мышечная память и все ссылки, которые кто-либо когда-либо сохранил.

Слова на дверях

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

Их слова, а не твои. Вторая эвристика Нильсена — «говорите на языке пользователя», и только что законченный этап исследования выдал тебе словарь: слова из интервью, слова из обращений в поддержку, слова из пустых поисковых запросов. Если люди говорят «счёт», а продукт говорит «расчётный документ», неправ ты — независимо от того, как это называет финансовый отдел.

Не выкатывай оргструктуру. Меню, разбитое на «Продукты / Сервисы / Решения», почти всегда отражает внутренние отделы. Люди не знают, в каком из них живёт их нужда, — да и вообще никто за пределами компании никогда не понимал разницы между продуктами и решениями.

Выдуманные названия дорого стоят. Придуманное имя функции нужно сначала выучить, а потом уже искать. Изредка оправдано для чего-то центрального и запоминающегося; никогда — для страницы настроек.

Проверяй подпись, а не своё отношение к ней. Единственная настоящая проверка — может ли человек предсказать, что за ней, не нажимая.

Схемы организации

Два семейства, и понимание, в каком ты находишься, снимает большинство споров.

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

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

Одно предупреждение из этого списка: навигация по аудиториям — «Студентам / Бизнесу / Разработчикам» — выглядит аккуратно и проваливается регулярно, потому что люди сплошь и рядом не знают, в какой они корзине, или попадают в две. Применяй, только когда аудиториям действительно нужен полностью разный контент и они опознают себя без раздумий.

Широко или глубоко

Любая иерархия торгует шириной против глубины: много вариантов на уровне и мало уровней — или мало вариантов и много уровней.

Данные в целом за широкое и мелкое. Исследования, идущие с 1980-х и подтверждённые для веб-навигации Ларсоном и Червински в 1998 году, показали: более плоские структуры дают более быстрый и точный поиск, чем глубокие, хотя глубокие предъявляют меньше вариантов за раз. Каждый лишний уровень — новый шанс угадать неверно плюс цена возврата.

Отсюда всплывает правило трёх кликов — утверждение, что до чего угодно нужно добираться за три клика. Это миф. Анализ Джошуа Портера 2003 года не нашёл связи между числом кликов и ни успехом, ни удовлетворённостью; люди спокойно шли дальше трёх, пока чувствовали, что приближаются. Уход предсказывает не число кликов. Его предсказывает сомнение.

Люди считают не клики. Они считают свою уверенность.

Запах информации

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

Для дизайнера это превращается в одно конкретное требование: каждая ссылка обязана предсказывать то, что за ней.

  • «Подробнее» не пахнет вообще — вести может куда угодно.
  • «Цены» пахнут сильно.
  • «Ресурсы» пахнут слабо; «Шаблоны и примеры» — сильно.
  • Страница раздела, которая просто повторяет название раздела и абзац маркетинга, убивает след: человеку нужно было подтверждение, что он ближе, а он не получил ничего.

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

Карточная сортировка и тестирование дерева

Два дешёвых метода, и они дополняют друг друга, а не заменяют.

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

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

Тестирование дерева проверяет структуру. Убери всю графику, дай людям только текстовую иерархию и спроси: «куда вы пойдёте, чтобы сделать X?» Ты узнаёшь, работают ли подписи и группировка без всякой помощи раскладки, цвета и поиска. Это самая безжалостно честная проверка ИА из существующих, и занимает она вечер.

Порядок важен: сортировка — чтобы построить, дерево — чтобы проверить, и только потом проектирование навигации.

Навигация и тест багажника

Четыре вида навигации, и большинству продуктов нужны минимум три:

  • Глобальная — присутствует везде; главные разделы.
  • Локальная — внутри раздела; то, что рядом.
  • Контекстная — ссылки внутри содержимого, вбок, к связанному.
  • Служебная — аккаунт, помощь, поиск, настройки; отдельно, потому что она про инструмент, а не про содержимое.

Тест багажника Стива Круга проверяет всё сразу. Представь, что тебя высадили на случайную страницу продукта — как высаживают с завязанными глазами из багажника машины. Без прокрутки: можешь ли ты ответить?

  1. Что это за продукт?
  2. На какой я странице?
  3. Какие тут главные разделы?
  4. Какие у меня варианты на этом уровне?
  5. Где я в общей схеме?
  6. Как здесь искать?

Провалить этот тест — обычное дело, и чинится он дёшево: обычно хлебными крошками и честным заголовком страницы.

Поиск — это приговор твоей структуре

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

Отсюда две привычки. Читай логи поиска еженедельно — это самое дешёвое исследование на свете, добровольно написанное пользователями их собственными словами. И никогда не возвращай голое «ничего не найдено»: предложи ближайшие совпадения, вероятную опечатку, раздел, который человеку скорее всего нужен, и способ спросить живого человека.

На практике

Проведи закрытую сортировку по текущему меню. Десять человек по пятнадцать минут. Если существующая структура выстоит — ты дёшево купил уверенность. Обычно не выстаивает.

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

Переименуй каждую ссылку без запаха. Выследи «Подробнее», «Ресурсы», «Прочее», «Разное» и «Инструменты». Замени каждую на то, что за ней на самом деле.

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

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

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

Проверь себя

Закрой статью и ответь своими словами:

  1. Какие четыре составляющие у информационной архитектуры и как каждая ломается по отдельности?
  2. Почему ИА — самый дорогой слой для изменения задним числом?
  3. В чём разница между точными и неоднозначными схемами организации и где находится суждение?
  4. Почему навигация по аудиториям так часто проваливается?
  5. Что данные говорят о правиле трёх кликов и что на самом деле предсказывает уход?
  6. Что такое запах информации и как опознать ссылку, которая не пахнет?
  7. В чём разница между тем, что показывают карточная сортировка и тестирование дерева?

Коротко

  • Информационная архитектура — это организация, наименование, навигация и поиск. Каждая ломается независимо, а вся конструкция дороже всего меняется задним числом.
  • Подписи весят больше структуры: бери лексику пользователя, а не оргструктуру, и проверяй, могут ли люди предсказать, что за словом.
  • У точных схем есть правильные ответы; неоднозначные требуют суждения и несут ценность. Навигация по аудиториям обычно проваливается.
  • Широкое и мелкое выигрывает у узкого и глубокого. Правило трёх кликов — миф: люди уходят от сомнения, а не от числа кликов.
  • Запах информации: каждая ссылка обязана предсказывать пункт назначения. «Подробнее» не пахнет.
  • Карточная сортировка строит структуру, тестирование дерева проверяет её без графики. Сортировать, проверять, потом проектировать.
  • Тест багажника спрашивает, сообщает ли случайная глубокая страница, где ты находишься. Логи поиска и пустые запросы — бесплатное непрерывное исследование.