ディスクロージャー

ひとまとまりのコントロールが配置された領域を、ユーザーが任意に開閉して、一度に見えるコントロールの量を調節できるようにする。
理由:スペースを節約して画面をシンプルに保ちながらも、隠されたコントロールにユーザーがすぐアクセスできるようにするため。

図例
オプションの入力項目を追加表示するディスクロージャー

効能

  • 提示するコントロールが多く、すべてを一度に見せると画面が複雑になり面積も大きくなりすぎるような場合に、ユーザーが任意に表示を調節して不要なものを隠しておくことができる。
  • ほとんどのユーザーには必要のないコントロールをデフォルトで隠しておき、操作をシンプルに見せることができる。また簡単な操作で残りのコントロールを表示させることができ、必要がなくなればまたすぐに隠すことができる。

用法

  • 一連のコントロールが配置されたブロックの表示/非表示を切り替えられるようにする。例えば多くの項目を含んだメニューリストやプロパティシートなどにおいて、カテゴリーごとに折り畳んで不要な部分を隠すことができるようにする。
  • 多くのコントロールを持つ設定(Configurator)画面や検索(Retriever)画面において、重要なコントロールと補助的なコントロールとで配置を分け、初期状態では重要なものだけを見せるようにする。残りの部分は必要に応じてユーザーが自由に開閉できるできるようにする。
  • 開閉のトリガーとなる部分には、三角形のマーク(ディスクロージャートライアングル)や「+」マークなどと、開閉領域に対するラベルを配置する。その部分をクリックするとトグル式に開閉が起きるようにする。マークは、領域が閉じている時と開いている時で変化するようにし、現在どちらの状態にあるのかが分かるようにする。
  • 領域が開かれると、隠されていた要素が、トリガーの下方向もしくは右方向に表示される。開かれる前にそこにあった要素は、追加領域の分だけ右または下にずれる。領域が閉じられると、元の状態に戻る。この振る舞いによって、「開閉」の感覚がユーザーに与えられる。
  • 領域の追加表示ではなく、差し替えの場合には、フォームの部分切替を用いる。
  • 複数のディスクロージャーを連ねてもよい。
  • 複数のディスクロージャーを連ねて、一度にひとつのブロックだけが開くようにする場合はアコーディオンを用いる。

図例
複数のディスクロージャーを連ねたプロパティシート

蘊蓄

ディスクロージャーのトリガーには、慣習的に「+」「−」のマークがよく用いられる。しかしこれらは、混乱の原因となる場合がある。「+」「−」のマークは、トリガーをクリックした際の動作を表すものであり、現在の状態を表すものではないからである。より少ない要素しか表示されていない時のマークが「+」であり、より多くの要素が表示されている時のマークが「−」となってしまう。このように、トグル式に変化するサインというものは、「現在の状態」を示しているのか「操作後の状態」を示しているのか分かりにくくなることが多い。こういった表現をフリップフロップと呼ぶ。「ON/OFF」とラベルが変化するボタンなども同じでユーザーを混乱させやすい。一方、ディスクロージャートライアングルは「現在の状態」を表すものである。ディスクロージャートライアングルを使って、閉じている時には三角が右向き、開いている時には下向きになるようにすると、上記の混乱がない。二つの状態を正反対の関係ではなく並列の関係で扱うことになるからである。しかし、たとえディスクロージャートライアングルを使っても、上向きと下向きで開閉を表現してしまうと、やはりフリップフロップとなってしまい、分かりにくくなる。