M-V-E 展開

一覧操作(Manipulator)“画面で一項目を選び、次の”閲覧(Viewer)“画面で詳細を表示し、必要に応じてそこからさらに”編集(Editor)“画面を開くようにする。
理由:一項目に含まれる情報量が多くて “M-E 展開“ではうまくレイアウトできない場合に、詳細の閲覧画面と編集画面を分けることで、情報の一覧性と入力しやすさを両立させるため。”DBマネージャ“を構成する画面展開。

図例
画面Aで一覧を見せ、画面Bで詳細を見せ、画面Cで編集させる。

効能

  • 詳細情報について、まず一覧性の高いレイアウトで内容全体を見せて、編集の必要がある場合には編集画面に進むようにし、その編集画面では入力しやすいようなレイアウトでコントロールを見せることができる。例えば、閲覧画面では表形式で一度に沢山の情報を提示し、編集画面ではタブやメニューによって階層化された入力フォームを提示するなど。

用法

  • 最初の画面(A)では一覧操作の機能を提示する。そこで一項目を選んで「詳細」といったボタン押すと、次の画面(B)に遷移するようにする。
  • 画面(B)では、項目の詳細情報を出力のみの状態で表示する閲覧機能を提示する。一覧性を重視したレイアウトにする。
  • 画面(B)で、必要に応じて「編集」といったボタンを押すと、次の画面(C)に遷移するようにする。
  • 画面(C)では、編集機能を提示する。入力のしやすさを重視したレイアウトにする。
  • 画面(C)で行った変更を「保存」といったボタンで確定すると、画面(B)に戻るようにする。当然、変更した内容を反映した内容をそこに表示する。

図例
M-V-E のモデル

注意書き

  • そもそも閲覧画面と編集画面を分けなくて済むのなら、分けない方が操作が単純化できてよい。
  • バリエーションとして「M(一覧操作)-E(編集)-V(閲覧)」という流れも考えられる。編集部分が”ウィザード(Wizard)“になっている場合など。