モーダルウィンドウの背後にある暗い背景をいつ使用するのですか？
現在のフォームにサインインするようにユーザーに指示するモーダルウィンドウを作成しています。モーダルウィンドウの背後の画面も暗くする必要があるのか、それとも「障害」のように感じるのかについて、私は議論しています。
モーダルウィンドウの背後で画面を暗くするのはいつがいいですか。
回答に関する注記：
将来の読者のために、必ず以下のすべての回答にアクセスしてください。1つだけ選択する必要がありますが、そこには多くの素晴らしい回答があります。私が選択したものだけに固執しないでください！
親ウィンドウを暗くすることは、本質的に、ウィンドウが非アクティブであることをユーザーに視覚的に示します。モーダルが表示されているときに親ウィンドウが視覚的に変化しない場合、ユーザーは背後の画面がまだアクティブであると考えます。ユーザーが何かをクリックすると、明らかな理由もなく機能しないことにイライラします。
モーダルダイアログとは何か、その目的について考えてください。設計では、モーダルは親ウィンドウからすべてのフォーカスを取得することを意図しており、ユーザーは他のことを行うことを意図していません。したがって、親ウィンドウの状態を変更して、これが事実であることを通知することをお勧めします。最近の最も一般的な方法は、親ウィンドウを少し灰色にすることです。
一般的なポイントとして、ユーザーが親ウィンドウで情報を表示し、同時にモーダルウィンドウを使用する必要がある場合、ユーザーがこれを簡単にするために別の方法で対話を実行することを検討する必要があります。
モーダルウィンドウコンベンションの背後にある暗い画面は映画館から来たと思います。映画が始まると、ライトは暗くなり、明るい画面に自然に注意を向けます。
モーダルの関数が主要なコンポーネント（サインアップ、警告など）である場合は、問題ないと思います。私はこの扱いを重要な機能のためだけに予約し、やりすぎないようにします。すべてを強調すると、何も強調されません。
現在、このサイトでこの処理を使用して、URLまたは画像をリンクしています。それがどのように機能するかを自分でテストできます。
不透明度の量％はあなた次第です。親ページの情報がモーダルに関連している場合は、暗くしすぎたり、暗くしたりしないでください。また、ユーザーがモーダルをドラッグできると、よりユーザーフレンドリーになります。
これは、情報を提供するポップアップウィンドウと、まったく異なる画面を表示する突然の変化の中間にあるメカニズムです。
画面を暗くすることなく、「これは一時的なダイアログワークフロー内であり、いつでもメインウィンドウに戻ることができます '。これは標準です。
画面を暗くすることで、フォームにほぼ別の環境を提供します-「ちょっと待ってください-続行する前に、必要なためワークフローから外します」これを行うには、しかし、私たちはあなたをポップしますあなたがいた場所のすぐ後ろ完了したら '。
ライトボックスなどのメカニズムは、画面が乱雑になることなく画像を適切にフレーム化するためにも役立つため、画像の暗い画面は少し異なります。
私達は最近同じ議論をしました：私達の古いウェブサイトは暗い背景を使用しています、私達はそれを取り除いてより親しみやすく、よりきれいな外観を実現したかったのですが、1つの問題がすぐに現れました：ダイアログのボタンは注意を奪っていましたページのボタン。そして、そのため、再び暗い背景を使用しました。
私の知る限り、知覚的/認知的な観点から、ある状況が他の状況よりも好ましい理由を示す研究はありません。
しかし、同僚との会話の後、直感的に次のように感じています。
モーダルウィンドウが親ウィンドウに表示されるデータに直接影響し、親ウィンドウが動的に更新されない場合は、モーダルウィンドウの背後にある画面を暗くするとよいでしょう。
ユーザーが親ウィンドウからデータをすばやく読み取れるようにする必要がある場合は、当然、シェーディングを行わないことが適切です。
他のほとんどの場合、シェーディングを行わない方がおそらくデフォルトとしてはより良いオプションです。
その効果が「障害」のように感じる場合。
モーダルウィンドウ/ポップアップ/アラートの背後にある画面を暗くすること（何にでも呼びたい！）は、私の経験では、ほとんどどこにでもあるウェブサイトです。自問してみてください-あなたはそれを「障害」にしたことがありますか？個人的にはしていません。
「ライトボックス」タイプの機能の使いやすさ、およびすでにここにある多くのポイントに関して、より大きな議論があります。私にとって、背景を暗くすることは1つのことを実現しますが、その重要性はコンテキストによって異なります-フォーカス。ユーザーは視覚的にポップアップを見て、そこに含まれているもの（情報であろうとアクションであろうと）に焦点を合わせます。それはあなたにとって正しいことかもしれませんし、そうでないかもしれません（サインインについては、そうだと思います）。
この種類のライトボックス機能は、ユーザー間違いなくが注意を払う必要があるものに残しておきますが、とにかくそうしているようです。
その効果は「障害」のように感じられます。
もしそうなら、モーダルダイアログは効果ではなく障害です。
それが障害であることにさえ同意しません。平均的なオタクにとって、選択は良いです。平均的なユーザーにとって、ガイダンスはより重要です。
暗い背景は明確なシグナルを提供します：私はあなたの注意が欲しいここ。大きな友好的なキャンセルボタンは、満足するためにログインしたくないユーザーに必要な唯一のものです。
暗い背景に対して構築できる2つの引数を打ち消します。
1。ユースケースがあります：ユーザーAが[ログイン]をクリックして続行します。ユーザーBは[ログイン]をクリックしますが、[最新情報]リンクをクリックすることに気づきました。
ユーザーBにとって、暗い背景は良好です。「新着情報」をクリックする前に「キャンセル」をクリックする必要があることを知っています。モーダルの場合、背景はインタラクティブではありません。
ユーザーAはこの制限に気付くことはありません。ただし、彼女の場合でも、あなたは彼女の焦点をログインコントロール（上記の「ガイダンス」引数）に導きます。
2。背後にあるものを見る。モーダルダイアログがあり、それを完了するには、メインウィンドウの/下にあるものを確認する必要があります。しかし、これは使い勝手が悪い。ユーザーがモーダルフォームに入力するために必要なアプリケーションデータは、フォームから利用できる必要がある。あなたが見る必要がある場合グラフは、通常、並べて配置した方が優れています。
モーダルウィンドウの背景を変更することは非常に役立ちます。
しかしdarkening背景は常に私を脅かしています：なぜ嵐の雲は突然突然ですか？代わりに、テキストの色を0x333333（真っ黒ではない）から0xd0d0d0（非常に薄い灰色）に変更して、背景をlighteningと考えることをお勧めします。 ）。このようにして、モーダルは明確に表示され、ユーザーは何をすべきかを知っています。暗い背景ほど退屈ではありません。
テキストを明るくする方が、不透明度をいじるよりも簡単です。メインページの特定の要素のクラスを変更するだけです。
.text {
color: 0x333333;
}
.text-faded {
color: 0xd0d0d0;
}
私の意見だけですが、私にはもっと魅力的に見えます。