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

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

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

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

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

Располагайте иконки слева от ярлыков

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

Выбор иконки

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

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

Выбирайте иконку с плюсиком

Значок плюсика делает меню более ожидаемым и привлекательным для нажатия. То есть человек понимает, что надо сюда нажать, чтобы открыть меню. Еще одно исследование «аккордеонов» подтверждает, что пользователи чаще нажимают иконки с плюсиками, чем те, что со стрелочками.

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

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

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

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

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

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

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

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

Автор - anthony  

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

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

• Как стандарты расположения кнопок влияют на привычки пользователей
• Зачем напоминать пользователю о смене старого пароля
• 7 причин отказаться от бесконечного скроллинга