web-dev-qa-db-ja.com

矢印は折りたたみ可能なアコーディオンでどの方向を指すべきですか?左/下…下/上?

要素のアコーディオンスタイルを開閉できることを示す最良の方法は何ですか?

左向き矢印/下向き矢印
下向き矢印/上向き矢印
プラス記号/マイナス記号
… または、他の何か?

40
kuakeli

規則は、矢印が折りたたまれたときに右を指し、展開されたときに下を指すことです。

この例を見てください。

example collapsing arrows

22
Petrus Theron

決定的な答えがまだあるかどうかはわかりません。オプションの表示方法は次のとおりです。

矢印の表記法

ツリーは、閉じた場合は右向きの矢印を使用し、開いた場合は下向きの矢印を使用しており、FreshCodeが彼の回答で述べているように、エキスパンダーに一般化されています。これは、十分に確立された慣例であり、WindowsではVistaに、Macでは1990年代半ばにまで遡ります(これらは「小さな矢印」として知られていました)。

混乱を招く恐れがあります。カスケードメニュー、スプリットメニュー、メニューボタン、ドロップダウンリストなどの矢印の他の用途では、矢印は一部のオプションの一時的な表示のみを示唆し、明示的に閉じる必要があるペイン全体の固定された開口部を示唆しません。また、これらの他の矢印の使用法では、矢印の方向は必然的にユーザーの動きを示しますgetsアクティブ化時。対照的に、ツリーまたはエキスパンダーでは、右向きの矢印が下向きの動きを引き起こし、下向きの矢印が上向きの動きを引き起こします。私はこれが問題であることを目撃していません(たとえば、ユーザーが下向きの矢印が「さらに拡張する」ことを意味していると考えているなど)が、エキスパンダーの使用の多くを目撃していません。

ウィンドウコントロールの規則

おそらく、下向きの矢印を使用して閉じていることを意味するので、少なくとも矢印の方向は、それが作成するモーションや他のコントロールでの使用と一致しています。開いたエキスパンダーには「閉じる」Xアイコンがあり、ウィンドウの使用を活用します。ただし、おそらくユーザーは「エキスパンダーに入力したすべての入力をクリアする」のように「X」は削除を意味すると考え、ユーザーはエキスパンダーを閉じることを恐れています。

おそらく、ウィンドウコントロールを使用するより適切な方法は、開いた状態と閉じた状態のエキスパンダーにそれぞれ最小化アイコンと最大化アイコンを使用することです。ただし、ウィンドウコントロールの規則を使用することは、コントロールがWindowsのように右側にある場合におそらく最も効果的です。これは、入力コントロールが左揃えになる傾向があるため、余分なマウスの回転を引き起こす可能性があります。また、エキスパンダーをウィンドウの上部にスクロールしたときに、ユーザーがエキスパンダーコントロールとウィンドウコントロールを混同しているのではないかと心配になります。

その他のツリー規約

「+」を使用して閉じていることを意味し、「-」を使用して開いていることを意味するのは、Vista以前のツリーコントロールでは、矢印の方向の矛盾を回避する代替手段です。大丈夫なようですが、これまで説明したほとんどのオプションと同様に、一部のユーザーは、記号がactionを表すことになっているのかどうかについて混乱しているのではないかといつも思っていました。または、エキスパンダーの現在のstate(「-」は、エキスパンダーが閉じている、または少なくとも完全に開いていないことを想定しています)。

もう1つ検討する価値があるのは、Java Swingで使用される「タップ」アイコンです。

Handle pivots from horizontal to vertical for opened. Image from Java Look and Feel Guidelines.

どういうわけか、彼らはアクション/状態の問題を曖昧に扱うことが少ないように感じます。

トグルボタン

私がアクション/状態の問題に対処することをお勧めする通常の方法は、回答で説明したようにボタンの切り替えを使用することです アイコンは現在の状態または次の状態を表示する必要がありますか? このアプリケーションでは同じ「これを開く」ことを意味するアイコン(プラス記号は最も曖昧ではないと思います)both閉じて開いたエキスパンダーですが、アイコンのボタンは閉じたエキスパンダーと開いたエキスパンダーの落ち込んだ外観。

私は明確な答えがないことに言及しましたか?

非常に多くの問題があるため、ユーザーのテストを行わなければ、どれが最適かわからないと思います。それがそれほど大きな違いをもたらさないことは完全に可能です。テストが終了したら、結果をここに投稿してください。

14

VidgetのLance Gutinがこれについていくつかのユーザー調査を行いました 。私の唯一の注意点は、アイコンを使用しないことは悪い考えであり、アイコンを右側に配置するとタスク時間が増加することです。問題はこれは良い解決策がない問題だと思います。

結果を分析すると、最も説得力のあるデータにはアイコンの位置が含まれていました。メニュー項目の右側にアイコンが表示されるため、多くの参加者はテキストラベルではなくアイコンをクリックすることを好みました(図2)。さらに、いずれの場合も、アイコンが右側にあるデザインでは、作業時間が長くなります(図3)。

9
Holli Smith

私がよく目にするのは、下向き矢印または矢印なしです。 (グラマーは右矢印の例外ですが、コメントの別のページに移動し、アコーディオンとして動作しないことを期待していたことを認めなければなりません。)

Facebook
facebook accordion link

NYTimes
nytimes accordion link

ワシントンポスト
washpost accordion link

グラマー
glamour accordion link

Stackexchange
stackexchange accordion link

3
Taj Moore

私はツリー/ファイル構造を探索するときに矢印を使用することにかなり夢中です。しかし、アコーディオンの内容は対話のようなものだと感じています。具体的には、木を期待していません。

アコーディオンの右側には展開/折りたたみスイッチがあり(左/下のシンボルを配置していると思います)、ツリーは左側にあります。それぞれ+/-または矢印記号を使用します。

Windowsエクスプローラーvsビジュアルスタジオのようなフォルダーペインと機能パネルを考えています。

しかし、あなたの質問に答えて、私がアコーディオンで矢を使うとしたら、Upは閉じて通信しなくなり、壊れて通信します。私見では。

2
saybeano

私の意見では、ウィンドウのツリーパターン(左/下)は意味がありませんが、多くのユーザーがそれを使用することを学んだようです。

(ダウン/アップ)私にはもっと理にかなっていますが、私はあなたのユーザーではないと思います。

(プラス/マイナス)Michael Zuschlagが述べたように混乱が少ない

おそらくA/Bテストを行うのでしょうか?

0
Iuzzef