ユーザーインターフェース設計において、モーダルウィンドウ(略してモーダル)[ 1 ] [ 2 ]は、アプリケーションのメインウィンドウに従属するグラフィカルコントロール要素です。
モーダルウィンドウは、メインウィンドウとのユーザーインタラクションを無効にしつつ、メインウィンドウを前面に表示したままにするモードを作成します。ユーザーは、親ウィンドウに戻る前にモーダルウィンドウを操作する必要があります。これにより、メインウィンドウのワークフローが中断されるのを防ぎます。モーダルウィンドウは、ダイアログボックスを表示することが多いため、ヘビーウィンドウまたはモーダルダイアログと呼ばれることもあります。
ユーザーインターフェースは通常、モーダルウィンドウを使用してユーザーの注意を喚起し、緊急状態を表示しますが、インタラクションデザイナーは、その用途には効果的ではないと主張しています。[ 3 ]モーダルウィンドウはモードエラーが発生しやすいです。[ 3 ] [ 4 ] [ 5 ]
ウェブ上では、 Lightboxライブラリで実装されているもののように、画像を詳細に表示したり、ホバー広告に使用したりすることが多い。[ 6 ] [ 7 ]
モーダルの反対はモードレスです。モードレスウィンドウはメインウィンドウを遮らないため、ユーザーはパレットウィンドウのようにフォーカスを切り替えることができます。
モーダルウィンドウの一般的な用途には以下のようなものがあります。
モーダルウィンドウで通常表現される多くの機能は、Mac OS X では「シート」[ 11 ]と呼ばれるモーダルな一時パネルとして実装されています。一時ウィンドウはモーダルウィンドウと同様の動作をします。常に親ウィンドウの上に表示され、ウィンドウリストには表示されませんが、アプリケーション内の他のウィンドウの使用を妨げません。シートはウィンドウのタイトルバーからスライドアウトし、通常はユーザーがウィンドウで作業を続ける前に閉じる必要がありますが、アプリケーションの残りの部分は引き続き使用できます。したがって、シートはそれらを含むウィンドウ内にモードを作成しますが、アプリケーションの残りの部分に対してはモードレスです。
モーダルウィンドウは、ユーザーのワークフローをガイドするための GUI ツールキットでよく使用されます。アラン・クーパーは、ユーザーに重要な問題に注意を払うよう求めることの重要性は、ユーザーの自由を制限することを正当化し、代替案はユーザーの不満を増大させると主張しています。[ 12 ]
予期しないアラートダイアログは、深刻な結果を招く可能性のあるモードエラーの特に原因です[ 3 ] 。ユーザビリティの専門家は、危険な操作は可能な限り取り消し可能であるべきだと提唱しています。予期せず表示されたり、慣れによって閉じられたりするアラートボックスは、危険な操作からユーザーを保護しません。[ 13 ]モードレスインフォバーは、ユーザーのアクティビティを中断せず、ユーザーが自分のペースで追加情報を読むことができるため、ダイアログボックスよりも好ましいとますます考えられています。
提案されているアプローチの一つは、各入力要素を、アプリケーション全体のグローバルな状態ではなく、それぞれの固有の要件に基づいて動作する、自己完結型のタスク指向のインタラクションとして設計することです。例えば、必須要素にはアスタリスクを付け、無効なデータを含む要素には赤い枠線を表示するなどです。このアプローチでは、ユーザーは多くの入力要素を一度に見ることができるため、実際にはメリットがあります。事前に定義されたデータ入力シーケンスが完了するまで他の無関係な要素がすべてブロックされるのではなく、ユーザーにとって意味のある方法でデータを入力できるからです。
モーダルウィンドウは、モーダルウィンドウが閉じられるまで、トップレベルプログラムの他のすべてのワークフローをブロックします。これは、ユーザーが他のウィンドウを操作できるモードレスダイアログとは対照的です。 [ 14 ]モーダルウィンドウは、ユーザーの注意を完全に引きつけることを目的としています。[ 15 ]ユーザーは、モーダルウィンドウが注意を必要としていることに気づかない場合があり、メインウィンドウが応答しないという混乱が生じたり、メインウィンドウに入力しようとしたユーザーのデータが失われたりする可能性があります(モードエラーを参照)。深刻なケースでは、モーダルウィンドウが同じプログラムによって制御される別のウィンドウの背後に表示され、モーダルウィンドウを手動で見つけるまでプログラム全体が応答しなくなる可能性があります。
しかし、最近では多くのインターフェースデザイナーが、ウィンドウの背景を暗くしたり、モーダルウィンドウの外側をマウスでクリックするとモーダルウィンドウが閉じるようにしたりすることで、モーダルウィンドウをより目立たせる対策を講じています。これはライトボックスと呼ばれるデザインです[ 7 ]。こうして、これらの問題が軽減されています。ヤコブ・ニールセンは、モーダルダイアログの利点として、ユーザーの認識を高めることを挙げています。「何かを修正する必要がある場合は、ユーザーがそれを認識していることを確認する方が良い」。この目的のために、ライトボックスデザインは、ダイアログとその他のビジュアルとの間に強い視覚的コントラストを提供します。ライトボックス技術は現在、Webサイトデザインで一般的なツールとなっています。
モーダルウィンドウは、移動、最小化、アイコン化、または背面へ移動できないように実装されることが多く、入力フォーカスを占有するため、システムの切り取り、コピー、貼り付け機能が使用できなくなることがよくあります。これは、特にモーダルウィンドウが、そのウィンドウが覆っているウィンドウのいずれかにのみ存在する情報をユーザーに入力させる場合、同じアプリケーション内の他のウィンドウやデータへのアクセスをブロックすることで、親アプリケーションの使用を妨げる可能性があります。
実際の画面よりも大きな仮想作業領域を使用しているユーザーの場合、モーダルウィンドウによって、現在表示されていない仮想画面の一部にモーダルウィンドウが作成されたり、ユーザーが作業していた画面からまったく別のセクションに突然表示が切り替わったりするなど、さらに望ましくない動作が発生する可能性があります。
モーダルウィンドウは、特に他のプログラム向けに入力されたテキストを、突然モーダルウィンドウに誘導する傾向があります。さらに、モーダルウィンドウは通常、Enterキーの押下(またはまれに、貼り付けられた入力に改行が含まれている場合)を、入力を受け入れて処理する合図と解釈します。また、まれに、突然モーダルウィンドウに覆われた別のアプリケーション向けだったマウスのクリックを傍受することもあります。このような傍受はフォーカススティール(またはフォーカスの奪取)と呼ばれ、プライバシーやセキュリティを侵害するだけでなく、不適切な、文脈にそぐわない入力を捕捉し、モーダルウィンドウを生成したプログラムで予期せぬ、恣意的な結果を引き起こす可能性があります。
実装の詳細によっては、モーダルウィンドウは最小驚きの原則に違反する可能性があります。
モーダルダイアログはタスクフローの一部であり、そのフローの中でフォーカスがある場所に配置することが推奨されます。たとえば、ウィンドウは、そのアクティブ化をトリガーするグラフィカルコントロール要素の近くに配置できます。[ 16 ]
半透明の暗い背景を使用すると、メインウィンドウの情報が隠れてしまう可能性があるため、その情報が邪魔になる場合にのみ使用するのが最適です。半透明の背景は、背景領域全体を閉じるボタンとして機能させることで、邪魔にならないようにすることができます。これはほとんどのモバイルオペレーティングシステムで標準的に採用されている機能であり、ユーザーが閉じ込められているような感覚を避け、モーダルウィンドウが悪意のあるポップアップのように感じにくくします。
デザインは、プログラムが実行されるプラットフォームの一般的な慣習に従うべきです。Microsoft Windows では、モーダルウィンドウ ダイアログに標準のコントロールが使用され、肯定的なアクション ボタンはパネルの右下に配置されます。Mac OS X では、モーダル シートが使用され、肯定的なアクション ボタンは最も右側のコマンドになります。[ 17 ]