Статью «Testing Accordion Menu Designs & Iconography» написал Ленс Гатин 18 февраля 2015 года.
Раздвигающееся меню или аккордеон (accordion menu) — рабочая лошадка среди интерфейсных паттернов, которая превращает длинные списки объектов в короткие списки групп. Хорошо работает в навигационных меню и особо хорошо — в поисковых фильтрах.
После решения задействовать раздвигающееся меню я обычно задумываюсь о его конкретной реализации:
- Какую иконку использовать?
- Расположить её слева или справа от названия пункта меню?
- И вообще, нужна ли иконка?
Чтобы получить достоверные ответы на эти вопросы, я провёл тестирование.
Методология
Чаще всего я встречал иконки уголка, плюса (в паре с минусом) и треугольника. Они располагались слева или справа от названия пункта меню. В общей сложности предстояло проверить 7 вариантов дизайна, включая вариант без иконки.
Сильнее всего я хотел узнать, как пользователи взаимодействуют с каждым раздвигающимся меню и какой ожидают реакции сайта на нажатие. Я надеялся найти достаточно респондентов, чтобы получить количественные результаты.
У меня были 2 вопроса с несколькими вариантами ответа. Для контекста — скетч простой посадочной страницы продовольственного магазина, где основная навигация строилась на раскрывающемся меню. Первое впечатление я протестировал с помощью Chalkmark. 140 респондентов (по 20 на каждый вариант дизайна) нанял в Mechanical Turk.
Результаты
До начала задания респондент отвечал на вопрос о том, какую операционную систему он использует. 124 из 140 использовали Windows.
Затем он видел одну из 7 посадочных страниц. Его спрашивали, куда он нажмёт, чтобы найти курицу.
На карте нажатий видно, что почти все респонденты нажали на пункт меню «Мясо». Когда иконка раздвигающегося меню была справа на расстоянии от текста, около 25–30% нажали именно на иконку.
Усреднённо респонденты потратили от 3,6 до 5,2 секунд на то, чтобы нажать на пункт меню.
И наконец, респондента спросили, как он думает, что произойдёт после клика. Большинство посчитало, что меню изменится. Небольшая часть — что откроется новая страница, товар добавится в список покупок или произойдёт что-то другое.
Заключение
Убедительнее всего выглядят данные о расположении иконки. Когда она была справа, многие респонденты нажимали на иконку, а не на текст. При этом страдала скорость выполнения задания.
Возможно, участники считали, что нажатие на текст и иконку приведёт к разным результатам. На скорость мог повлиять небольшой размер иконки и расстояние от текста (смотрите закон Фиттса).
Сложнее интерпретировать данные об иконках. Меню с плюсом слева показало самую высокую скорость выполнения задания, и 90% респондентов предсказали, что после нажатия меню изменится. Однако, время выполнения большинства заданий не отличается статистически. И во всех случаях пользователи достигли результата.
Стоит отметить, что на результаты могла повлиять операционная система респондента. Раньше Windows использовали комбинацию плюса и минуса для навигации по файлам. В последних версиях используется треугольник, как и в Mac OS. Я упоминал ранее, большинство респондентов использовало Windows, но конкретные версии мне неизвестны.
Рекомендации
Несмотря на этот поиск определённости, я допускаю, что тесты не могут ответить раз и навсегда на вопрос, каким должно быть раздвигающееся меню. Иконка и её расположение — всего лишь 2 переменные среди множества других. Принимая решение, дизайнер должен руководствоваться контекстом и здравым смыслом.
Лично я решил, что покажу пользователям аффорданс с помощью любой из протестированных иконок и расположу её слева. Но если окажется, что в конкретной ситуации лучше расположить иконку справа, я буду готов к возможно более медленной реакции пользователей. И проверю, что весь блок (текст, иконка, пространство вокруг) при наведении курсора ведёт себя как единый элемент.
…
Также опубликовано на Медиуме.
Шутка: тестировали вёрстку, порвали два аккордеона.
Технологии цифрового маркетинга — книга, где я был соавтором (параграф про создание сайта) и литературным редактором (привёл текст к единой стилистике и упростил формулировки). От 249 рублей.