web-dev-qa-db-ja.com

折りたたみ可能なコンテンツの折りたたみインジケーターの最適な位置

折りたたみ可能なコンテンツに折りたたみ/展開ボタン/インジケーターを配置するための規則/標準/ベストプラクティスは何ですか?

左側(LTR言語ではタイトルの左側)の配置の例をたくさん見ました。 enter image description here

これは、商用アプリケーションやオープンソースツールキットでは非常に一般的です。

「標準」はタイトル領域の右側にあると言われました。 enter image description here

これは実際に標準ですか(または確立された慣習)?これに関するドキュメントはどこにありますか?

どちらか一方を実証する文書または調査を探しています。ドキュメンテーションがない場合、私はいくつかのサポートまたは証拠を持つ意見をお願いします。

8
mawcsco

2番目の例のように、ユーザーが右揃えの矢印を見つけるのに苦労しているのを見てきました。私はそれが理由だと思います:

  • タイトルからは程遠い
  • それはすべて一人で、小さいです(見つけにくい)
  • 場合によっては、ウィンドウの端や画面からはみ出していることもあります。

対照的に、タイトルに近い場合、コントロールを見つけるのがはるかに簡単になります(それが>または[+]またはv)。

また、矢印が小さいため、他の矢印とはかけ離れているため、矢印をクリックするのが難しくなります。 (フィッツの法則を参照)

これらのユーザビリティテストは、前者の後者に対する事例証拠のみを提供しますが、これまでのところ、それで十分です。

8
Alex Feinman

右上隅がこの種のものに対して「従来の」ものであると人々が考えた理由として考えられるのは、Windowsがその隅にウィンドウ管理ウィジェットを配置していることです。

Screenshot of a Windows 7 window with labels describing its features

Microsoft.comのこのページから取得した画像

このボックスの扱い方(たとえば、ドラッグ可能か、完全に閉じる/非表示にできるか)によっては、一部のユーザー(少なくとも問題を発生させた人)に、コンテナがウィンドウのように動作するように感じさせることができます。単純な折りたたみセクションとは対照的に。

マイクロソフトがこれらのコントロール(「シェブロンボタン」と呼ぶ)をヘッダーブロックの左側および右側にさまざまに提供していることも注目に値します。

たとえば、次のMicrosoftは左側にあるシェブロンを使用しています(一般的な「詳細」動作の場合):

Screenshot of the Windows UAC dialog

Microsoft.comのこのページから取得した画像

そして、ここで彼らはそれを右側で使用します(完全なグラデーションの背景はセクションの開閉を切り替えるためにクリック可能です):

Screenshot of the Windows Vista Security Center window

Microsoft.comのこのページから取得した画像

6
Kit Grose

私は両方のオプションがよく理解されていると思います。多くのUIは、ヘッダーがクリック可能な(ボタン)の外観を提供するだけなので、矢印も必要ありません。右側に矢印を配置すると、タイトルをテキストの前に置くよりも読みやすくなります。

0
Anna Rouben

この問題に関する研究資料は見つかりませんでした。しかし、私は最初のものは共通のツリーからの派生物だと思います。これは、最初のプリンシブルがより一般的である理由です。しかし、それは私の仮定です。

0
sysscore

IMO、これらは規則です:

1)セクション展開矢印とセクション折りたたみ矢印は、テキストのすぐ左に移動します。 2)メニューを開く矢印は、テキストのすぐ右に移動します。

これらの規則を維持すると、インターフェイスの視覚的な文法で2種類の矢印を区別するのに役立ちます。

矢印をテキストから遠くに配置すると、見つけにくくなり、回避する必要があります。

0
Raxin