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

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

Расположение иконки

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

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

Клик по иконке отнимает больше времени, потому что сама иконка маленькая. Чем меньше элемент, тем больше точности и меткости нужно, чтобы по нему кликнуть. Также визуальное сканирование происходит слева направо. Когда иконка располагается справа от ярлыка, ее место оказывается завершающим в процессе сканирования. Взгляд пользователя проходит слишком большое расстояние на пути к целевому объекту.

Расположите иконку слева от ярлыка

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

Выбираем иконку

Исследования также показали, что тип иконки влияет на ожидания пользователей. Если вы используете в меню-аккордеоне иконку стрелки, посетитель ожидает, что нажатие приведет его на другую страницу. Если вы используете иконку со знаком «+», пользователь ждет что после нажатия меню изменится.

Большее количество пользователей понимают правильно иконку «+», в отличие от стрелки. Это происходит потому, что мы привыкли видеть стрелки на кнопках, которые уводят нас на другую страницу. Когда такая же стрелка оказывается в меню, мы все равно ждем схожего действия.

Выберите иконку «+»

Иконка «+» правильнее всего описывает действие с точки зрения ожиданий пользователя. Еще одно исследование говорит о том, что пользователи чаще кликают по иконкам «+» чем по стрелкам.

В этом есть смысл, ведь «+» является математическим символом сложения. Когда происходит сложение, вы увеличиваете число или уровень. Пользователь увеличивает количество пунктов меню, когда кликает по иконке «+» в меню-аккордеоне.

Сворачивание меню

Раскрывающееся меню также должно сворачиваться. Меню-аккордеон также нуждается в иконке, означающей сворачивание. Она должна располагаться на месте иконки «+» после того как пользователь раскроет меню.

Есть две общепринятые иконки для отображения действия сворачивания: «-» и «Х». Пользователь может неправильно трактовать иконку «-», потому что этот символ часто означает удаление. Пользователям не должно казаться что они теряют пункты меню, когда оно сворачивается.

Иконка «X» лучше описывает сворачивание, потому что мы привыкли закрывать с ее помощью модальные окна. Когда пользователь кликает по этой иконке в меню, он закрывает его, но не теряет. В этом случае ожидания пользователя вполне соответствуют реально происходящему на странице.

Стандарты для меню типа аккордеон

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

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

Дизайнерам нужен единый стандарт внешнего вида меню-аккордеона. Основываясь на исследованиях, можно с уверенностью сказать, что таким стандартом в иконках должен быть символ «+» слева от ярлыка.

Автор статьи anthony

Перевод — Дежурка

Смотрите также:

• 5 популярных ошибок в дизайне кнопок навигации
• 4 простых шага для улучшения веб-навигации
• Когда использовать переключатели, а когда чекбоксы