モーダル ウィンドウ

Modal_window
コンピュータ アプリケーションのユーザー インターフェイス設計では、モーダルウィンドウは、アプリケーションのメイン ウィンドウに従属するグラフィカル コントロール要素です。
モーダル ウィンドウは、メイン ウィンドウを無効にするが表示されたままにするモードを作成し、モーダル ウィンドウをその前の子ウィンドウとして表示します。ユーザーは、親アプリケーションに戻る前に、モーダル ウィンドウを操作する必要がこれにより、メイン ウィンドウでのワークフローの中断が回避されます。モーダル ウィンドウは、しばしばダイアログ ボックスを表示するため、ヘビー ウィンドウまたはモーダル ダイアログと呼ばれることが
ユーザー インターフェイスは通常、モーダル ウィンドウを使用してユーザーに注意を喚起し、緊急状態を表示しますが、インタラクション デザイナーは、モーダル ウィンドウはその用途には効果がないと主張しています。モーダル ウィンドウはモード エラーが発生しやすいです。
Web では、Lightboxライブラリによって実装されたものや、ホバー広告に使用されるものなど、画像を詳細に表示することがよく
modal の反対はmodelessです。モードレス ウィンドウはメイン ウィンドウをブロックしないため、ユーザーは、それらをパレット ウィンドウとして扱い、それらの間でフォーカスを切り替えることができます。
コンテンツ
1 関連性と使用法
1.1 ユースケース 1.2 Mac OS X のモーダル シート
2 対話フローの制御
2.1 予期しない中断 2.2 問題 2.3 推奨事項
3 こちらもご覧ください
4 参考文献
関連性と使用法編集

ユースケース
モーダル ウィンドウは、次のように頻繁に使用されます。
重要な情報に注意を引く。この使用法は、ユーザーがあまりにも多くのダイアログ ボックスにさらされ、メッセージを読んだり理解したりせずに単に 、、または をクリックすることに慣れているため、効果がないと批判されています。
ログインプロセスのパスワードなど、続行するために必要な情報が入力されるまで、アプリケーション フローをブロックします。もう 1 つの例は、アプリケーションでファイルを開いて保存するためのファイル ダイアログです。
一元化されたダイアログでアプリケーション構成オプションを収集します。このような場合、通常、ダイアログを閉じると変更が適用され、編集中はアプリケーションへのアクセスが無効になります。
現在のアクションの結果は元に戻せないという警告。これはモーダル ダイアログの頻繁な対話パターンですが、一部のユーザビリティの専門家は、慣れのために意図した使用 (破壊的なアクションでのエラーからの保護) に対して効果がないと批判しています。代わりに、アクションを元に戻すことができるようにする (「元に戻す」オプションを提供する) ことをお勧めします。

Mac OS X のモーダル シート
「シート (コンピューティング)」はこの項目へ転送されています。スプレッドシートと混同しないで
通常、モーダル ウィンドウによって表される多くの機能は、 Mac OS X では「シート」と呼ばれるモーダルトランジェントパネルとして実装されています。トランジェント ウィンドウは、モーダル ウィンドウと同様に動作します。ただし、アプリケーション内の他のウィンドウの使用を無効にするわけではありません。シートはウィンドウのタイトル バーからスライドして出てきます。通常、ユーザーがウィンドウで作業を続けるにはシートを閉じる必要がありますが、アプリケーションの残りの部分は引き続き使用できます。したがって、それらはそれらを含むウィンドウ内にモードを作成しますが、アプリケーションの残りの部分に関してはモードレスです。

対話フローの制御
モーダル ウィンドウは、ユーザー ワークフローをガイドするための GUI ツールキットで一般的です。Alan Cooperは、ユーザーに重要な問題への対応を要求することの重要性は、ユーザーの自由を制限することを正当化するものであり、代替案はユーザーのフラストレーションを増大させるだろうと主張しています。

予期しない中断
予期しないアラート ダイアログは、モード エラーの特定の原因であり、重大な結果をもたらす可能性がユーザビリティの専門家は、危険なアクションは可能な限り元に戻せるようにすべきだと規定しています。予期せずに表示されたり、慣れによって無視されたりする警告ボックスは、危険な行動から保護されません。モードレスインフォバーは、ユーザーの操作を中断せず、ユーザーが自分の時間に追加情報を読むことができるため、ダイアログ ボックスよりも好ましいと見なされることが増えています。
提案されているアプローチの 1 つは、すべての入力要素を、アプリケーション全体のグローバルな状態ではなく、独自の特定の要件によって導かれる、自己完結型のタスク指向の相互作用として設計することです。たとえば、必須要素の前にアスタリスクを付けたり、無効なデータを含む要素に赤い境界線を付けたりすることができます。このアプローチを使用すると、実際には、ユーザーは多くの入力要素を一度に表示できるというメリットが定義済みのデータ入力シーケンスが完了するまで、他のすべての無関係な要素がブロックされるのではなく、意味のある方法でデータを入力できます。

問題
参照:コンピュータ インターフェイスのモードの評価
モーダル ウィンドウは、ユーザーが他のウィンドウで操作できるモードレスダイアログとは対照的に、モーダル ウィンドウが閉じられるまで、最上位プログラムの他のすべてのワークフローをブロックします。モーダル ウィンドウは、ユーザーの注意を完全に引くことを目的としています。ユーザーは、モーダル ウィンドウに注意を払う必要があることを認識できず、メイン ウィンドウが応答しないことについて混乱したり、メイン ウィンドウに意図されたユーザーのデータ入力が失われたりする可能性があります (モード エラーを参照)。重大なケースでは、モーダル ウィンドウが同じプログラムによって制御される別のウィンドウの背後に表示され、モーダル ウィンドウを手動で見つけるまで、プログラム全体が応答しなくなる可能性が
しかし、多くのインターフェイス設計者は最近、ウィンドウの背後の背景を暗くしたり、モーダル ウィンドウの外側でマウスをクリックしてウィンドウを強制的に閉じたりできるようにすることで、モーダル ウィンドウをより目立たせ、ユーザー フレンドリーにするための措置を講じています。これはライトボックスと呼ばれるデザインです。 – したがって、これらの問題を軽減します。Jakob Nielsen は、モーダル ダイアログの利点として、ユーザーの認識が向上することを次のように述べています。この目標のために、ライトボックスのデザインは、残りのビジュアルに対してダイアログの強い視覚的コントラストを提供します。ライトボックス テクニックは、現在 Web サイト デザインの一般的なツールです。
モーダル ウィンドウは、通常、そのウィンドウの移動、最小化、アイコン化、または押し戻しの可能性をブロックする方法で実装され、入力フォーカスを取得します。これにより、多くの場合、システムの切り取り、コピー、および貼り付け機能の使用が妨げられます。これにより、同じアプリケーション内の他のウィンドウやデータへのアクセスがブロックされるため、親アプリケーションの使用が妨げられる可能性が特に、モーダル ウィンドウで、カバーされているウィンドウの 1 つだけで利用可能な情報をユーザーが入力する必要がある場合です。
実際の画面よりも大きな仮想作業領域を使用しているユーザーの場合、モーダル ウィンドウは、現在ディスプレイに表示されていない仮想画面の一部にモーダルを作成したり、ユーザーが作業していた画面から突然画面を切り替えたりするなど、さらに望ましくない動作を引き起こす可能性がまったく別のセクション。
モーダル ウィンドウは、テキスト入力、特に他のプログラム用に入力された入力を突然自分自身に転用する傾向がさらに、モーダルは通常、入力を受け入れて処理するためのキューとしてエンター キー(またはまれに貼り付けられた入力に改行が存在する場合)を解釈します。突然カバーされたアプリケーション。フォーカス盗用(またはフォーカス盗用) と呼ばれるこのような傍受は、プライバシーとセキュリティの実践を危うくするだけでなく、モーダル ウィンドウを生成したプログラムで未定義の恣意的な結果を引き起こす可能性のある不適切なコンテキスト外の入力をキャプチャする可能性が
実装の詳細によっては、モーダル ウィンドウが最小の​​驚きの原則に違反する可能性が

推奨事項
参照:モード (ユーザー インターフェイス) § デザインの推奨事項
モーダル ダイアログはタスク フローの一部であり、そのフロー内で焦点が置かれている場所に配置するように推奨されます。たとえば、アクティブ化をトリガーするグラフィカル コントロール要素の近くにウィンドウを配置できます。
半透明の暗い背景を使用すると、メイン ウィンドウの情報がわかりにくくなる可能性があるため、その情報が邪魔になる場合にのみ使用することをお勧めします。半透明の背景は、背景領域全体を閉じるボタンとして機能させることで邪魔にならないようにすることができます。これはほとんどのモバイル オペレーティング システムで標準的な機能であり、ユーザーが閉じ込められていると感じることを回避し、モーダル ウィンドウが悪意のあるポップアップのように感じないようにします。
設計は、プログラムが実行されているプラ​​ットフォームの一般的な方法に従う必要がMicrosoft Windowsは、モーダルウィンドウ ダイアログに標準コントロールを使用し、パネルの右下に肯定アクション ボタンを配置します。Mac OS Xはモーダル シートを使用し、アファーマティブ アクション ボタンが一番右のコマンドになります。

こちらもご覧ください
適用姿勢
ポップオーバー (GUI)

参考文献
^ “元に戻す場合は警告を表示しない” . alistapart.com 。2015 年10 月9 日閲覧。
^ ラスキン、ジェフ（2000）。人道的なインターフェイス。米国：アディソン・ウェズリー。ISBN 0-201-37937-6.
^ 「Nitpicker / The Humane Interface」 . nitpicker.pbworks.com。ルール 1a . 2015 年10 月9 日閲覧。
^ Quince UX パターン エクスプローラー。「モーダルパネル」 . 2010-02-27にオリジナルからアーカイブ。人気の Lightbox JavaScript ライブラリは、モーダル パネル アプローチを使用して画像を表示します。
^ ヤコブ・ニールセン、アラートボックス。「10 の最高のアプリケーション UI」 .
^ Joel Spolsky著、プログラマー向けのユーザー インターフェイス デザイン:生活をより良くするためのデザイン
^ Raymond Chen著、The Old New Thing:すべてのダイアログ ボックスに対するデフォルトの回答は「キャンセル」です。
^ Jeff Atwood、Coding Horror:ユーザーに読み方を教える
^ 「シート – プレゼンテーション – コンポーネント – ヒューマン インターフェイス ガイドライン – デザイン – Apple Developer」 . アップル開発者。2022年9月7日閲覧。
^ クーパー、アラン （2003 年 3 月 17 日)。Face 2.0 について: インタラクション デザインの要点. ワイリー。ISBN 0-7645-2641-3.
^ ラスキン、ジェフ（2000）。人道的なインターフェイス。アディソン・ウェズリー。ISBN 0-201-37937-6.
^ 「ダイアログでモダリティを使用する方法」 . オラクル社。
^ 「モーダルパネル」 . quince.infragistics.com。2013-05-06のオリジナルからのアーカイブ。
^ 「モーダル パネル – 実装」 . quince.infragistics.com。2013-05-06のオリジナルからのアーカイブ。
^ Inc.、アップル。「テーマ – macOS – macOS – ヒューマン インターフェイス ガイドライン – Apple Developer」 . developer.apple.com 。2018年9月18日閲覧。