Как сделать удобный каталог на сайте или в приложении

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

Вариант первый — низкое количество продаж, негативные отзывы в поддержке или в самом сервисе, связанные с тем, что каких-то позиций нет (хотя они есть) или их тяжело найти.

Второй вариант — низкие поведенческие метрики: глубина просмотра, время на сайте и так далее.

Если хоть что-то из этого вызывает подозрения и нет возможности проверить метрики, то вот несколько способов того, что можно сделать

Если сервис уже запущен, то проще всего провести тестирование с пользователями. Это может быть как полноценное юзабилити, так и конкретно тестирование навигации (tree testing). Далее подробнее об этом методе.

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

Для этого требуется минимальное количество подготовки и ресурсов: структура каталога/меню (дерево), можно даже без дизайна или на примере функционирующего сервиса, от 5 респондентов вашей целевой аудитории и задание для участников.

Тестирование можно проводить офлайн или онлайн с помощью, например, Useberry или Treejak

Для того, чтобы протестировать навигацию:

1. Зафиксируйте структуру, которую хотите проверить

2. Перенесите ее в инструмент (Useberry или Treejak)

3. Сформулируйте задачу

4. Проведите тестирование и задайте вопросы

5. Проанализируйте результаты

Примеры заданий

Задания могут варьироваться в зависимости от ваших целей и звучать, например, так:

1. Найти ключевой продукт

2. Найти второстепенную информацию

3. Изучить «проблемные» категории

4. Сравнить названия или местоположение элементов

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

✅ Инструкции могут содержать контекст или мотив вместо конкретного названия того, что нужно найти

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

Для качественного исследования понадобится хотя бы 5 респондентов, для количественного (то есть для статистического подтверждения результата) 50 и больше. Я рекомендую в любом случае провести несколько качественных тестирований с модератором, так вы сможете получить ценные инсайты по поводу навигации, а затем закрепить их количественно.

Что важно учитывать:

✅ Респонденты должны быть из целевой аудитории

✅ Качественное тестирование даст идеи, как улучшить навигацию, но оно не гарантирует, что вся ваша ЦА думает так же, как выбранные несколько пользователей

✅ Количественное позволит сравнить несколько вариантов и подтвердить результат статистически (это можно сделать и на основе метрик)

Когда использовать: Перед началом редизайна или после карточной сортировки в новом проекте, до дизайна.

Плюсы:

✅ Позволяет оценить, насколько легко пользователям будет легко найти элемент каталога в реальной жизни

✅ Может проводиться задолго до отрисовки макетов

Минусы:

❌Лабораторные условия — вне реального интерфейса могут искажать результат

❌Инструменты для тестирования имеют ограничение: пользователи могут выбирать в дереве только элементы нижнего уровня в качестве ответа, хотя в реальной жизни это не всегда так

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

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

Так же как и tree trest, можно проводить это исследование офлайн или онлайн с помощью, например, того же Useberry или OptimalSort

Для того, чтобы провести исследование:

1. Создайте карточки-элементы навигации

2. Попросите респондентов сгруппировать их

3. Попросите дать название каждой группе

4. Задайте вопросы

5. Проанализируйте результаты

✅ Оптимальное количество карточек 30-50

✅ Не используйте одинаковые слова в названиях карточек (иначе могут сгруппировать по ним)

Карточная сортировка может быть закрытой и открытой:

В открытой количество групп и их названия определяют сами респонденты. В закрытой группы заранее определены, но вместо этого лучше провести tree testing.

Для проведения тестирования понадобится хотя бы 15 респондентов.

✅ Респонденты должны быть из целевой аудитории

Может быть модерируемой и немодерируемой:

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

О чем важно предупредить респондентов:

— размеры групп могут быть разными;

— количество групп может быть любым;

— можно в любой момент переместить карточку;

— если карточка не понятна, ее нужно отложить в сторону.

Что можно спросить после:

— Насколько было легко или сложно сгруппировать карточки?

— Были ли карточки, которые подходят под две или более группы?

— Что думаете о карточках, которые остались неотсортированными?

Что делать с результатом:

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

Плюсы этого метода:

✅ Позволяет сделать навигацию соответствующей ожиданиям пользователей до старта проекта

Минусы:

❌Лабораторные условия — вне реального интерфейса могут искажать результат

❌Можно проверить только один уровень категоризации за раз, без вложенностей

❌Ограниченное количество карточек

❌Сложность анализа результатов

Отличие от tree test:

— карточная сортировка помогает понять, как пользователи видят категории и названия для них, но не показывает лучшую структуру навигации;

— tree testing проверяет, насколько легко пользователи могут найти нужную информацию в уже созданной структуре сайта.

Подписывайтесь на мой Телеграмм, там полезные посты выходят чаще)

И делитесь в комментариях, с какими неудобствами меню или каталогов сталкивались вы)