アコーディオンが拡張されていることをどのように示すべきですか？
アコーディオンを持っている場合、何らかの方法が必要です現在の状態を表示が展開されます。
これを処理するにはさまざまな方法があり、それぞれが多くの尊敬されるWebサイトやフレームワークで使用されています。したがって、どの方法がどの状況で使用するのが最適かは明確ではありません。
どの方法を使用するのが最適ですか？これに関する研究のボーナスポイント。
シンボルはまったくなく、展開を示す色のみ
AndroidのGmailではこれを使用していますが、以下にいくつかの明確な例を示します。
右側の左と下の山形
これらはBBCによって使用されます Global Experience Language ：
右側の山形の上下
これらは Androidデザインガイドラインのドキュメント およびSilverlightで使用されます。
左側の右と下の山形
右側のプラス（+）およびマイナス（-）記号
これはExtJSのデフォルトとして使用されます
左側のプラス（+）およびマイナス（-）記号
私はアコーデオンのさまざまなオプションを検討するのにかなりの時間を費やしています（一部は質問を書いています）。
左側vs右側
アコーディオンにcheckboxesがある場合、チェックボックスの反対側にインジケータを配置することは理にかなっています。これは主に、多くのインジケーターが互いに非常に近い状況を回避するためですが、ユーザーが他のオプションを選択するつもりだったときに、誤って1つのオプションを選択する可能性も低くなります。
これは、AndroidのGmailでスターセレクターとチェックボックスが反対側にある理由と同様です。
それ以外の場合、左側または右側にチェックボックスを配置することは、主に設計上の決定のようです。デザインについては、コンテンツに対するユーザーの注意を引き付けるため、私は権利を優先します。
アフォーダンス
インジケータとしてアイコンがない場合は、単純なリストではなくアコーディオンを表示していることを示すものはほとんどありません。これは多くの人にとって問題ではないかもしれませんが、私は何らかの形の指標を持つことをお勧めしますです。これにより、使用頻度の高い設計が必要になる（議論の余地がある）コストで、使いやすくなります。
スキャンと理解のしやすさ
上/下または左/右のシェブロンを使用すると、常に問題が発生します。上向きのシェブロンが状態なのか行動なのかは定かではありませんが、失読症の人が違いを見分けるのは困難です。 左/下（右側のインジケータ）または右/下（左側のインジケータ）は、スキャンが簡単でありながら、混乱を最小限に抑えるようです。
+ そして - 彼らは何をするかという点で最も明確ですが、彼らは（内部テストで）迅速にスキャンしている間、見分けが遅いことがわかっています。したがって、スキャン速度が重要な場合は、これらを回避します。
色と色相
これは、アイテムが展開されていることを示すために色（または色相）を使用することを常にお勧めする最も簡単な方法です。非常に微妙で、折りたたまれたアイテムと展開されたアイテムを区別できます。
GoogleはそのAndroid=設計ガイドラインで微妙ですが、違いをより明確にすることをお勧めします。
これらを組み合わせることをお勧めします：
- 右側の山形（より自然な、特にタッチ時、左側に残しても問題ない）-もちろん、山全体だけでなく、バー全体をクリックして拡大/縮小できます
- 下位レベルのインデント
- 背景色（低レベルの場合は明るい）
- 影（低いレベルが高いレベルの後ろ/下であることを示すため）
- オプション：右側のテキストを展開/縮小
組み合わせは本当にいいと思うので、どれか1つだけを選択しても意味がありませんが、すべてがユーザーにとってデザインをより明確にします。
ここに議論を展開するためのものがあります。私が見るのは、アコーディオンメニューでのシステム状態の最適な表現に関する質問です。 Nielsenの10のユーザビリティヒューリスティックスによるシステムステータスの可視性。以下は、各オプションの私の理論的根拠です。
シンボルはまったくなく、展開を示す色のみです。
色で表現された状態
最小限のデザインで、通常のWebユーザー（Webページのナビゲート方法を理解するのに十分な知識を持つユーザー）に適しています。 2番目の例（ブログツール）は、Gmailの例と同じではありません。 Gmailは、selection = green、メインメニューアイテム=ダークグレー、サブメニューアイテム=ライトグレーの3色を使用しています。一方、ウェブログは2色を使用しています。 3色システムの方が2色システムよりも行動を促すフレーズの方がいいと思います。
シェブロン：
シェブロン/矢印で表される状態
個人的には、右と下と上と下よりも左と下の方が好きです。
up＆downの理解には最も時間がかかります。アップとは、ヘッダーが上がって何かを明らかにすることを意味しますか？または、コンテンツがヘッダーで上にスライドしますか？
right＆downは（IMO）を理解するのが簡単です。右のポイントはタイトルに向かっており、下のポイントはタイトルバーのコンテンツに向かっています。
left＆downは私の好みの選択です。それらはright＆downと同じ単純さを持っていますが、必ずしもあなたの見解ではありません。右端の山形をちらっと見て状態を確認したり、左端のタイトルを読み続けることができます。
プラス（+）およびマイナス（-）：
記号+/-で表される状態
シェブロンと同じ議論、私は+/-記号の右端の配置が存在するため、それを優先しますが、周辺にあり、必ずしも私の注意を要求するわけではありません。
状態の二重強制、シェブロン/プラスマイナス記号と組み合わせて色を使用します。
シェブロン、+ /-、またはバーの色のどちらを選択するかは、私にとっては設計上の決定事項です。しかし、私はまず最初に、二重の執行が使用可能に見えるかどうかを確認してみます。そうでない場合は、シェブロン/プラスマイナスを使用して、より最小限のテーマ（多くの色を使用していない場合）を使用し、色を中心とした最小限のデザインが必要な場合は、色を使用します。/symbols。
私が個人的にこれらの中で一番好きなものはこれらですが、言及された理由のいずれかではありません
最初の例では、背景色は別にして、-サブアイテムはすべてインデントされているであるため、アイテムはそれらの上にあるアイテムからドロップダウンされています。
2番目の例では、他のすべての例とは異なり、それらの間に仕切りはありません繰り返しになりますが、アイテムとその下のテキストが一緒に属していることは明らかです。選択されていることを示します。
正直なところ、どの例に矢印が画面の上、下、または外にあるか、またはまったく矢印が表示されていないことに気づきませんでした。本当に重要なのは、どのアイテムがその上のアイテムのサブメニューとしてグループ化されているかが一目でわかることです。たとえば、これは次のとおりです。
ひどいです。サブアイテムは同じ背景、同じフォント、同じインデントなどを持っています。
+1左側の右と下の山形
これは一般的に使用されるUIシンボルであり、ほとんどの人は経験からそれを認識します。
左下向きの矢印が最も効果的だと思います。+ sと-sは煩わしく、頭を混乱させます。左側が好きですが、右利きなので影響があるかもしれません。そして、下向きまたは横向きの矢印はいいです。通常、それらの意味を簡単に理解できます。インデントも必要です。色は、open = whiteやclosed = light greyのように中程度のコントラストにする必要があります。
記事から： アイコンを配置する場所アコーディオンメニューアイコン
「折りたたみに使用される2つの一般的なアイコンがあります。マイナスアイコンとXアイコンです。マイナスアイコンは、削除または削除を表すことが多いため、ユーザーが誤って解釈する可能性があります。メニューを折りたたんだときに、メニューオプションが失われたように感じてはいけません。
Xアイコンは、モーダルウィンドウを閉じるためによく使用されるため、折りたたみが適切であることを表しています。ユーザーがメニューを折りたたむと、メニューは失われずに閉じられます。これは、ユーザーが行っていることやユーザーが期待していることとより一致しています。」
20年近くに渡って学んだ習慣をWindows、特にWindows Explorerで使用し、多くのツリーでWeb全体を表示します：[+]と[-]左側。
すべてのユーザーがそれらの人間工学に基づいた記号を認識できるようになります。
左の矢印に注意してください。モバイルインターフェースでは新しいページがあることを説明するので新しいので、この動作では矢印を維持してください。私はいくつかの文章に同意します、矢印の上下、または上下が混乱しています。 ..so少しずつ考える必要がある場合は、インターフェースを使用します。 ...選択は良くありません。
アコーディオンメニューとアイコンの位置について このUX記事 をご覧ください。これにより、次のオプションが最適であることがわかります。
