web-dev-qa-db-ja.com

モーダルダイアログウィンドウとは何ですか?

モーダルダイアログウィンドウとは正確には何ですか?いつ使用する必要がありますか?使用を控えるべき場合はありますか?

37
Matt Rockwell

モーダルダイアログは、親アプリケーションの使用に戻る前に、ユーザーにダイアログとの対話を強制するウィンドウです。この良い例は、保存のプロンプト、または「ファイルを開く」ダイアログです。

enter image description here

これらは、ユーザーが重要な決定を迫られるときによく使用されます。 Microsoft Wordで文書を処理していて、保存する前にWordを終了することを選択したとします。モーダルダイアログがポップアップし、保存、保存しない、キャンセルのいずれかを要求します。決定するまで、アプリケーションを使用することはできず、アプリケーションは終了しません。

41
Matt Rockwell

ファイルダイアログはモーダルダイアログでなければならないという点について、マットに同意します。

モーダルダイアログは、ユーザーが追加情報を正しく入力する必要があるアクションを実行するときに使用する必要があります。印刷ダイアログも良い例です。または、ロードされたプログラムの「オプション」ダイアログ。

モーダルダイアログを使用するタイミングを定義するのは少し難しいですが、私には控えめに使用し、可能な限り避けてください。 FraserのFacebook画像ローダーの例を見てください。非同期で実行できるため、これは必要ありません。

経験則:アクションを完了するために追加情報が必要な場合。

13
GUI Junkie

マットはすでにモーダルダイアログとは何かと述べました。

いつ使用するかについて:経験則は「ユーザーがそのダイアログを完了するまで他のアクションが意味をなさない場合」です。注意深く読んでください、それはあなたがユーザーに何をしたいのかについて話していません! Macの多くのダイアログはモーダルではなく、Windowsのダイアログはモーダルです。これは、Macの方が優れていると言っているのではなく、多くのダイアログデザイナーが、ユーザーが準備ができるまで延期したいアクションを強制的に完了させていると言っています。

例:1)SSHプログラムでは、サーバーに接続するためにパスワードが必要です。そのmayはモーダルダイアログを介して実装されますが、ユーザーが接続しているかどうかに関係なく、オプション構成を開くことは理にかなっていると主張できます。判決は本当に。

2)マルチタブブラウザは、モーダルダイアログを介してHTTP 401基本認証を実装する必要がありますnot。ユーザーは別のタブを開いて、アクティベーションメールからパスワードを読み取ることもできます。

3)マルチドキュメントインターフェイスの印刷ダイアログはモーダルであってはなりません。ユーザーが1000ページのドキュメントと5ページのドキュメントの2つのドキュメントを印刷したいが、1000ページのドキュメントで間違って開始する場合、小さい方を印刷できるように、ダイアログ(およびユーザーが指定したすべての設定)をキャンセルする必要はありません。最初の仕事。

11
Erion

マットはそれが何であるかという質問に答えました。いつ使用するかについては、ユーザーが1つのタスクと1つのタスクだけに集中する必要がある場合に役立ちます。 Webでは、モーダルは多くの場合、画面の中央に配置され、ページの残りの部分は灰色になっているため、注目が集まり、このモーダルタスクを完了するまで背景が使用されないことが視覚的に示されます。

それらを使用すべきでない場所は、特定のプロジェクトのコンテキストにかなり依存します。私がそれが悪用されたのを見たのは、それが通常のページフローの代わりとして使用されたときです。ユーザーがメインページでタスクをトリガーしてモーダルを起動し、次にAJAXフォームをロードしてフォームをロードし、終了する前に3つのモーダル画面をステップスルーする)例。この例では、別のページへのユーザーはおそらくより良いオプションでした。

3
DA01

モーダルダイアログは、メインダイアログで開くセカンダリウィンドウです。一連のタスクをさらに進めるには、ユーザーがメインウィンドウに戻るために、そのタスクを操作する必要があります。

参照: https://uxplanet.org/5-essential-ux-rules-for-dialog-design-4de258c22116

http://uxmovement.com/forms/best-practices-for-modal-windows/

0
NB4