Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Правила использования иконок для меню типа «аккордеон»

26 марта 2016 | Опубликовано в статьюшечки | 3 Комментариев »

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

 

 

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

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

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

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

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

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

Выбор иконки

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

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

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

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

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

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

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

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

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

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

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

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

Автор - anthony  

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

 

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

 

 




Комментарии

  1. accordeon
    Thumb up Thumb down 0

    Не со всем можно согласиться.

    Аккордеон — это, по сути, аналог стандартного поп-ап меню. Принципиальное отличие только в том, что дочерние элементы тут «встраиваются» в ряд родительских.

    В остальном ожидаемое поведение такое же. То есть:

    а) При разворачивании одного пункта, остальные сворачиваются. Если же надо свернуть единственный развернутый (что делается крайне редко), то люди просто повторно кликают на него;

    б) Если говорить об иконках, то они могут быть 2 типов — картинка-символ и значок меню. Картинка должна быть слева. А вот значок меню (стрелочка вниз, v) — справа. Стрелка и только стрелка говорит, что мы можем развернуть меню. Плюс, как советует автор — это функция добавления, ввода новых данных. Про минус сказано верно — это удаление.

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

    Ответить

  2. Xtray
    Thumb up Thumb down 0

    Без разницы, слева или справа будет иконка, если раскрываться список будет как по нажатию иконки, так и по нажатию ярлыка (ссылки же, почему «ярлык» написали?).

    Ответить

Оставить ответ


один + 7 =

Вставить изображение