accordion 1160x620 - Исследование. Какую иконку выбрать для обозначения аккордеонов?
https://dribbble.com/shots/8937499-Accordion-UI-Design

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

Вопрос, который часто задают на наших курсах Mobile UX и Application Design: какую иконку следует использовать, чтобы лучше всего сигнализировать о том, что контент может разворачиваться? Другими словами, какая иконка лучше подходит для аккордеонов?

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

  • Карет или символ вставки (стрелка, направленная вниз)
  • Плюс
  • Стрелка, указывающая вправо
  • Отсутствие иконки

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

ux research big - Исследование. Какую иконку выбрать для обозначения аккордеонов?

Профессиональная подготовка UX-исследователей

Научитесь определять потребности пользователей! 3 месяца обучения, ведущие эксперты, удостоверение о повышении квалификации НИУ ВШЭ, менторство
Узнать подробнее
png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Исследование. Какую иконку выбрать для обозначения аккордеонов?
Jennair: Accordion signaled by caret icon Аккордеон, обозначенный значком вставки
png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Исследование. Какую иконку выбрать для обозначения аккордеонов?
Bolé Road Textiles: аккордеон, обозначенный значком плюса
png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Исследование. Какую иконку выбрать для обозначения аккордеонов?
Ferrari: аккордеон обозначен значком стрелки
png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Исследование. Какую иконку выбрать для обозначения аккордеонов?
Braun: нет иконки для обозначения аккордеона

Мы провели количественное исследование, чтобы выяснить, какая из этих иконок наиболее эффективно сигнализирует о том, что она открывает аккордеон.

Методология

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

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

Мы также создали 5 разных вариантов для каждого прототипа; в каждом варианте использовалась одна из 4 возможных иконок (стрелка, символ вставки, плюс, foil) или иконка вообще отсутствовала. Мы создали иконку foil (которая раньше не использовалась для аккордеонов), чтобы увидеть, имеет ли значение тип иконки вообще или ее наличия рядом с названием аккордеона было достаточно, чтобы сигнализировать об аккордеоне (но сама иконка не имела значения).

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Исследование. Какую иконку выбрать для обозначения аккордеонов?
Иконки, протестированные в этом исследовании, включали направленную вниз стрелку (символ вставки), плюс, стрелку вправо, бессмысленный значок foil (используемый для сравнения) или пустое пространство. Иконки были назначены случайным образом для каждой задачи, это означает, что участники увидели случайный ассортимент и порядок этих пяти иконок
png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Исследование. Какую иконку выбрать для обозначения аккордеонов?
Пример одного из прототипов, показанный во всех 5 вариантах иконок

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

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

Мы также провели несколько пилотных исследований, чтобы убедиться, что показатель успешности задачи был высоким (более 90%) и чтобы люди могли легко определить «правильную» категорию меню, которую нужно было выбрать для выполнения задачи. После каждого пилотного исследования мы уточняли формулировку задач и названия пунктов меню. Таким образом, мы фактически провели несколько исследований юзабилити  информационной архитектуры наших прототипов, прежде чем собрать количественные данные. Этот процесс гарантировал, что определение правильной категории было относительно тривиальным для большинства участников – так как целью нашего исследования было протестировать иконки аккордеонов, а не сложность поиска информации в задачах, которые мы давали пользователям.

Участники. В нашем исследовании приняло участие 136 человек. Все участники видели экземпляры всех иконок (в разных прототипах и в разном порядке).

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

Мы собрали данные по:

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

Где участники нажимают

Нажатий вне области, связанной с аккордеоном, было относительно немного (5-8%), и большинство нажатий приходилось либо на метку, либо на иконку, связанную с аккордеоном (а не на пространство между ними).

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Исследование. Какую иконку выбрать для обозначения аккордеонов?
Участники с одинаковой вероятностью нажимали либо на текстовую метку, либо на иконку, за исключением символа вставки, где наблюдалась статистически значимая тенденция касаться иконки над текстовой меткой. Когда иконка отсутствовала, пользователи с гораздо большей вероятностью нажимали на текстовую метку, чем на пустое пространство, где обычно находилась иконка

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

Ни с одним из вариантов иконки не было статистически значимой тенденции нажатия на иконку чаще, чем на метку, за исключением символа вставки (p <0,01) – другими словами, когда о наличии аккордеона сигнализировал символ вставки, люди чаще нажимали на иконку, чем на метку. Для остальных иконок не было статистически значимого предпочтения.

Чего ожидают участники

Чтобы проанализировать ответы на вопрос после задания (ожидали ли они, что останутся на странице) мы определили ожидание перехода на новую страницу, как двоичную переменную, количественно определяющую, ожидали ли участники остаться на той же странице (0) или перейти на новую страницу (1). Показатель более 50% для определенного признака означает, что в целом люди ожидали перехода на новую страницу. Для аккордеона, при нажатии на который страница не изменится, в идеале показатель должен быть менее 50%.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Исследование. Какую иконку выбрать для обозначения аккордеонов?
Ни одна из стандартных иконок существенно не отличалась от показателя в 50%, что указывает на отсутствие каких-либо серьезных ожиданий, связанных с ними – люди не ожидали, что останутся на странице или покинут ее. Однако с иконкой foil и при отсутствии иконки многие пользователи ожидали, что покинут страницу

Пользователи не связывали стандартные иконки аккордеона (символ вставки, плюс и стрелка) с переходом на новую страницу (так как коэффициент ожидания новой страницы незначительно отличается от 50%, p> 0,05). Среди стандартных иконок с символом вставки люди чаще ожидали, что останутся на странице, чем с иконкой foil (p <0,05) или при отсутствии иконки (p <0,05), а плюс показал лучшие показатели, чем foil (p <0,05), но не при отсутствии иконки. Показатель стрелки вправо статистически не отличается от иконки foil или при отсутствии иконки, поэтому ее не следует использовать для аккордеонов.

Основные выводы

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

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

  • Люди, как правило, с одинаковой частотой нажимают на метку и на большинство стандартных иконок. Единственное исключение – символ вставки, тогда пользователи чаще нажимают на иконку, но все равно 29% нажатий приходится на метку. Это говорит о том, что нельзя использовать сплит-кнопки для аккордеонов – текстовая метка указывает прямо на целевую страницу, а иконка открывает аккордеон.
  • Создание новых иконок для обозначения аккордеонов или их отсутствие – не лучшая идея, поскольку они нарушают ожидания пользователей (которые заключаются в том, что они перейдут на новую страницу).
  • Ни один из стандартных указателей не имеет прочной связи с пребыванием на странице. Следовательно:
    • Использование символа вставки определенно лучше, чем отсутствие иконки или нестандартная иконка.
    • Использование стрелки или плюса не лучше, чем отсутствие иконки.
  • Когда иконка отсутствовала, пользователи имели тенденцию нажимать на текстовую метку, а не на пустое место в этой строке. Несмотря на очевидность подобного вывода, это еще одно свидетельство того, что пользователи склонны взаимодействовать с сильными и понятными указателями.
  • Интересно, что использование иконки со стрелкой вправо (в отличие от плюса или символа вставки) НЕ было связано с ожиданием перехода непосредственно на новую страницу. Хотя многие дизайнеры могут подумать, что стрелка вправо означает «перейти на новую страницу», а стрелка вниз, означает «открыть аккордеон на этой странице», наши исследования не подтвердили эту гипотезу.

Дизайн-рекомендации

  • При использовании аккордеонов в мобильных меню символ вставки является наиболее безопасным вариантом.
  • Отсутствие иконок и текстовых меток, связанных с различными действиями (например, метка перехода на новую страницу, иконка открытия аккордеона). Результаты исследования также подтверждают наши предыдущие рекомендации не использовать для аккордеонов сплит-кнопки. Наше исследование показало, что пользователи с одинаковой частотой нажимали как на текстовую метку, так и на иконку, и ожидали, что получат идентичный результат.
  • Решите, будут ли пункты вашего меню открывать аккордеон подменю или переходить непосредственно на страницу обзора категорий. Если вы решили, что пункты меню будут ссылаться непосредственно на целевую страницу, не используйте иконку с выравниванием по правому краю.

Вывод

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

Оригинал: nngroup.com

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Добавить комментарий
Похожие записи

Тренды UI/UX дизайна на 2020 год

Подборка основных трендов UI/UX дизайна, которые мы увидим в 2020 году

47 важных советов для UI и UX дизайнеров

Эта статья – список важных советов для UI / UX дизайнеров, дизайнеров взаимодействия или продуктовых дизайнеров любого уровня

Паттерн нижней панели навигации на мобильных веб-сайтах, исследование

Гамбургер-меню? Есть ли лучшая альтернатива? В этой статье я попытаюсь рассмотреть эти вопросы