web-dev-qa-db-ja.com

どのアコーディオン識別子が最も効果的ですか?

どのアコーディオン識別子がより意味がありますか?

  • プラスとマイナス

OR

  • 上下矢印山形

誰かがこれらの概念について分析や証明を行っているかどうかを知りたいと思います。いつものように、意見も大歓迎です。

Accordion Example

11
whatsnewsaes

私はオプション3を選択します。矢印を使用しますが、矢印を閉じると右向きになり、開くと下向きになります。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

これは、矢印が常に関連するコンテンツを指しているためです

上向きの矢印がある場合、前のコンテンツを指していると誤って解釈される可能性があります(これはユーザーテストで確認済みです)。

24
JonW

少し調査した後、私はこの記事に導かれました: https://viget.com/inspire/testing-accordion-menu-designs-iconography?ref=hackingui

彼は、2つの異なる位置で3つの異なるアイコンをテストし、アイコンの選択は、どちらの側に置いてもそれほど重要ではないと結論付けています。

結論必要なアイコンを使用しますが、テキストの左側に配置します。

2
whatsnewsaes

@whatsnewsaesの提案に従って、識別子を左側に配置しますが、+記号と-記号を使用します。その理由は次のとおりです。

  • 上下の矢印よりも視覚的に区別されます
  • プラスとマイナスはすでに多かれ少なかれとの意味的関連を持っています
  • タイトルとコンテンツの視覚的な関連付けは、コンポーネントの視覚的なスタイルで管理する必要があります。「ここをクリック」と言うリンクよりも、コンテンツやタイトルを指す矢印は必要ありません。

もう一つ。例で行ったように、「+」はクリック可能なアイテムとして使用する必要があります-リンクはリンクがどこに移動するかをユーザーに知らせるために書かれているため、このような記号は同じ規則に従う必要があります。

2
Peter