web-dev-qa-db-ja.com

いつモーダルダイアログボックスを使用する必要がありますか?

Webではモーダルダイアログボックスの使用が増加しているようですが、いつ使用すべきですか。インラインコントロールや別のページの代わりにそれらを使用することを選択するのはなぜですか、いつ完全に回避する必要がありますか?

50
Philip Morton

インライン編集、ソフトモーダル、フルモーダル、フローティングウィンドウを組み合わせて使用​​しています。

  1. インライン編集。可能であれば、常にこれを使用してください。コンテキストの切り替えが最小限で済みます。早いです。
  2. Soft modals。例:Windowsスタートメニュー。それらは豊富なコントロールであり、フォームを持つことができますが、単一のメニューからスポーンし、どこをクリックしても閉じることができます。これらはメニューから使用するのに適しています。
  3. フルモーダル。これらは画面全体をマスクし、モーダルとの対話のみを許可します。ユーザーを1つのタスクに集中させ、フォームに入力せずに続行しない場合に、これらを使用します。
  4. フローティングウィンドウ。これらはステータスメッセージに適しています。それらはUIに表示されますが、移動して最小化することができます。これらは、アプリケーション内を移動するときに永続化する必要があるものに使用します。

これがお役に立てば幸いです。

30
Glen Lipka

私が考えることができる最も一般的なルールは次のようになります:

  • モーダルダイアログは、フローを維持するのに役立つ場合に役立ちます(つまり、現在のページを離れる必要はありません)。

  • リンク可能または検索可能にする必要があるものにはモーダルダイアログを使用しないでください(URLは変更されないため、外部にリンクできず、検索エンジンも含まれます)。

編集:また、いくつかの例外を除いて、facebookも確認してください。

8
Phil

ユーザーによるアクションを分離しようとする場合、モーダルが最適であることがわかりました。モーダルを使用することで、ユーザーの焦点を捉えることができ、これにより、ナビゲーション、ユーティリティリンク、画像、またはユーザーに表示または体験させたいものから注意をそらす可能性のあるその他のコンポーネントなどの二次的な注意散漫を取り除くことができます。

モーダルを使用しない場合に関する限り、そのモーダルに対して最善の判断をする必要があります。あなたはそのようなものに厳しいルールを適用することはできないと思います。

6

私の経験則では、機能の行き止まりがある場合はモーダルウィンドウを使用します。例えば、プロフィール情報を更新する場合は、アカウントなどを設定してください。

5

一部の人々はダイアログボックスと警告ボックスを区別します(警告ボックスには通常1つまたは2つのボタンのみがあり、他の入力はありませんが、ダイアログにはある種の入力フィールドがあります)。また、モーダルアラートボックスを絶対に使用しないようにという考え方があります(「 アラートボックスは絶対に避けてください。 "。)

モーダルダイアログにフォームを配置すると、ダイアログボックスのコードを前のページに完全に含めることができるため、ネットワークトラフィックが発生しないため、フォームを別のページに配置するよりも応答性が高くなります。ただし、モーダルダイアログで混乱する多​​くのユーザーを見てきました。エンドユーザーでテストする必要があります。もちろん。 :)

3
Bennett McElwee

モーダルダイアログは、ユーザーが選択を行う必要がある場合、または続行する前に特定のことを知る必要がある場合にのみ使用してください。彼らがやろうとしていることについての警告は、問題(永久に何かを削除するなど)とそのようなことを引き起こす可能性があります。

サイトのセキュリティで保護されたセクションにアクセスする(またはページにコメントを投稿する)ためにログインすることも、正しく行う限り問題ありません。

1
Charles Boyung

これを別の質問に投稿しましたが、ここにも含めます。

柔軟なWebアプリのように感じる必要があるWebページの実装に取り​​組んでいます。ユーザーが入力できるフォームは複数あります。

私の目的とユーザーのために、ここにいくつかの仮定(利害関係者とSMEに同意されていますが、ユーザーテストで覆される可能性があります):

  1. このWebアプリにアクセスするユーザーは、自分が何をしたいのかを知っています。彼らは事前にわかっている特定のタスクを完了するために来ています。それがこのページの目的です。ユーザーは見に来ません。
  2. 彼らは何をしているのか知っているので彼らは必要なフォームに記入するために必要な情報を知っています。

ライトボックスフォームの使用を提案してきました。私は通常、モーダルウィンドウを使用することに反対していますが、単純な更新または追加を試みるたびにユーザーを新しいページに送信することにもまったく反対しています。そして、私はアコーディオンがここでの正しい解決策であるとは思いません(ただし、それらは代替オプションかもしれません)。

私たちのコンテキストでは、ライトボックスフォームはユーザーの要求に応じてのみ表示されます。 クイック、簡単なエスケープ/クローズを許可します。それらは、ユーザーをアクションだけに要求しますので、ページの変更に驚きはありません。ユーザーは、作業中のページ/アプリから削除されません。

フォームの1つは、3つの慎重なステップです。したがって、ライトボックスで進行状況の追跡を行うウィザードを使用しています。これは実際に、マルチパネルモーダルに断固として反対する(当然そうである)私たちのグループの1人にとって重要な挑戦ポイントでした。通常、私は全体的に同意しました。

この場合、ウィザードはこのタイプの対話に受け入れられるパターンです。ユーザーは、何をしようとしているか、それを行うために必要な手順を知っています。ライトボックスは、概要ページ(選択と以前のアクション入力に関する情報を提供する)を離れることなく、要求されたアクションにユーザーを集中させますが、すばやく閉じることができます。

モーダル/オーバーレイ/ライトボックスなどは控えめに使用する必要があることに私は同意しますが、それらは本質的に邪悪または貧弱なUXではありません。フォーカスされたタスクに対してユーザーが要求したバージョンは有効なユースケースであり、多くの状況で、慎重に実装された場合、他のバージョンよりも優れている場合があります。

1
Jeff