Какие аккордеонные идентификаторы работают лучше всего?

, какие значки аккордеона имеют больше смысла?

Плюс и минус

ИЛИ

up & вниз стрелка шевронов

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

 Пример аккордеонации

11 голосов | спросил whatsnewsaes 18 PM00000030000003931 2015, 15:36:39

3 ответа


24

Я бы выбрал вариант 3. Используйте стрелки, но стрелка указывается прямо при закрытии и вниз, когда открыта.

mockup

скачать источник bmml - Каркасы, созданные с помощью Макеты Balsamiq

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

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

ответил JonW 18 PM00000030000000031 2015, 15:49:00
1

После небольшого исследования я был направлен в эту статью: https://viget.com/inspire/testing-accordion-menu-designs-iconography?ref=hackingui

Он тестирует 3 разных значка в двух разных положениях и делает вывод о том, что выбор знаковой материи не имеет значения, на какой стороне вы их накладываете.

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

ответил whatsnewsaes 18 PM00000080000000731 2015, 20:56:07
1

Я буду следовать рекомендациям @whatsnewsaes, чтобы иметь идентификатор слева, но будет идти с символами + и -. Причины таковы:

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

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

ответил Peter 18 PM000000100000001431 2015, 22:02:14

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132