Поделиться , , Google+, Pinterest,

Опубликовано в:

Раздвигающееся меню: результат тестирования иконок и их положения

Раздвигающееся меню или аккордеон (accordion menu) — рабочая лошадка среди интерфейсных паттернов, которая превращает длинные списки объектов в короткие списки групп. Хорошо работает в навигационных меню и особо хорошо — в поисковых фильтрах.

Раздвигающееся меню: результат тестирования иконок и их положения

1-y3lAHhDtGFeXYgkQsx6-ig

Анимированный GIF показывает семь вариантов посадочной страницы. Каждый протестирован на 20 респондентах.

После решения задействовать раздвигающееся меню я обычно задумываюсь о его конкретной реализации:

  • Какую иконку использовать?
  • Расположить её слева или справа от названия пункта меню?
  • И вообще, нужна ли иконка?

Чтобы получить достоверные ответы на эти вопросы, я провёл тестирование.

Методология

Чаще всего я встречал иконки уголка, плюса (в паре с минусом) и треугольника. Они располагались слева или справа от названия пункта меню. В общей сложности предстояло проверить 7 вариантов дизайна, включая вариант без иконки.

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

У меня были 2 вопроса с несколькими вариантами ответа. Для контекста — скетч простой посадочной страницы продовольственного магазина, где основная навигация строилась на раскрывающемся меню. Первое впечатление я протестировал с помощью Chalkmark. 140 респондентов (по 20 на каждый вариант дизайна) нанял в Mechanical Turk.

Результаты

До начала задания респондент отвечал на вопрос о том, какую операционную систему он использует. 124 из 140 использовали Windows.

Затем он видел одну из 7 посадочных страниц. Его спрашивали, куда он нажмёт, чтобы найти курицу.

1-Shrm67ycf4npAWTCTxaPyw
Сводка тепловых карт нажатий по всем вариантам дизайна. В варианте «уголок слева» 10% респондентов нажали слишком далеко от пункта меню.

На карте нажатий видно, что почти все респонденты нажали на пункт меню «Мясо». Когда иконка раздвигающегося меню была справа на расстоянии от текста, около 25–30% нажали именно на иконку.

1-OuURPS-wa2n94KP9FAq5aA
Медианное время на выполнение задания и распределение индивидуальных результатов.

Усреднённо респонденты потратили от 3,6 до 5,2 секунд на то, чтобы нажать на пункт меню.

1-mPe6zmMdtTE9Kp_MWkKNgw
Результат опроса пользовательских ожиданий. Малая часть респондентов выбрала «При нажатии товар попадёт в мой список покупок» или «Другое» — на схеме они не показаны.

И наконец, респондента спросили, как он думает, что произойдёт после клика. Большинство посчитало, что меню изменится. Небольшая часть — что откроется новая страница, товар добавится в список покупок или произойдёт что-то другое.

Заключение

Убедительнее всего выглядят данные о расположении иконки. Когда она была справа, многие респонденты нажимали на иконку, а не на текст. При этом страдала скорость выполнения задания.

Возможно, участники считали, что нажатие на текст и иконку приведёт к разным результатам. На скорость мог повлиять небольшой размер иконки и расстояние от текста (смотрите закон Фиттса).

Сложнее интерпретировать данные об иконках. Меню с плюсом слева показало самую высокую скорость выполнения задания, и 90% респондентов предсказали, что после нажатия меню изменится. Однако, время выполнения большинства заданий не отличается статистически. И во всех случаях пользователи достигли результата.

Стоит отметить, что на результаты могла повлиять операционная система респондента. Раньше Windows использовали комбинацию плюса и минуса для навигации по файлам. В последних версиях используется треугольник, как и в Mac OS. Я упоминал ранее, большинство респондентов использовало Windows, но конкретные версии мне неизвестны.

Рекомендации

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

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

Источник: medium.com

Оригинал статьи: Testing Accordion Menu Designs & Iconography 

comments powered by HyperComments