モーダルダイアログは移動可能ですか？
Webアプリケーションでモーダルダイアログを使用して、続行する前にログインや何かの設定など、ユーザーがアクションを実行する必要があるアクションを実行します。
いくつかのレイアウトの問題を修正し、自動的に中央揃えとサイズ調整を行いました。これらは、ユーザーが操作の一部として移動することはできません。
私はこれについて混合感を持っています：
一方で、邪魔にならないようにそれらを移動できることは素晴らしいことです
しかし、その一方で、ダイアログのすべてのポイントは注意を促すことであり、それを邪魔にならないように移動することは、誤ったユースケースを示しているようです
そう..
モーダルダイアログをユーザーが移動できるようにする必要がありますか？
通常、マイナス面はプラス面を上回る
つまり、答えは通常「いいえ」です
移動可能なモーダルダイアログに関する一般的な考慮事項の一部を次に示します。これらのいくつかは実装の問題に差し迫っていることに注意してください。ただし、それらはすべてユーザビリティに影響を与えるため、とにかく含めました。
モーダルを移動するには、大量の認知的負荷が必要です。ユーザーはハンドルを見つけ、視覚的な奥行きを下のレイヤーに向け直し、情報を見つけてモーダルドラッグハンドルを見つけ、それを移動する必要があります（たとえば KLM-GOMS分析 を参照）。
ユーザーがモーダルを移動する必要がある場合、これは通常、デザインが悪いことが原因です。モーダルはブロッキングインターフェイスであり、そのように使用するためのものです。ユーザーがモーダルを移動して基礎となるコンテンツを表示する必要がある場合は、ユーザーに大きな認知税を課しています。通常、これはUXワークフロー/ IAの設計が悪いために発生します。次に例を示します。
- 基礎となるアプリは、モーダルトリガー/ポップアップに至るまで正しい視覚的フローを提供するように設計されていないため、モーダルが表示されたときにユーザーは正しい情報を持っていません。
- ダイアログを開くためのインタラクション（ボタンなど）が適切に伝達またはラベル付けされていないため、ダイアログが開いてユーザーに尋ねられたとき、ユーザーは驚いたり準備ができていません何か。
- ダイアログは、ユーザーがモーダルワークフロータスクを完了するのに十分な適切な情報を提供しません。
- ダイアログは、ワークフローの間違ったステージまたはシーケンスに設計されています。
- ダイアログはワークフローの正しいインターフェイス要素ではありません（たとえば、タスクがブロックされていないか、基になるフォーム/ウィンドウコンテキストの外部で実行されるべきではありません） 。
ユーザーがダイアログを部分的またはほとんどオフスクリーンに移動します。より多くの自由を与えることは良いように思えますが、ここでの結果は、ダイアログコンテンツが非表示になり、潜在的なユーザビリティの問題を提示することです（たとえば、1つのボタンが画面外にあり、ユーザーがそこに忘れた場合はどうなりますか？）。ここで解決するユーザビリティのトレードオフがあります。
ユーザーがダイアログを移動し、ブラウザウィンドウのサイズを変更します。ダイアログがオフスクリーンになっている可能性があるため、このケースを解決する必要があります。
レスポンシブレイアウトのスクロールのあいまいさ。コンテンツの考慮事項が原因で、ダイアログが画面からオーバーフローすることがあります（例： Material Designはこれを提供します ）。ダイアログが修正されると、スクロール操作が明確になります。ダイアログの一部が画面外にある場合、スクロール操作は非常に扱いにくくなる可能性があります。さらに、背景レイヤー自体をスクロールするかどうかを判断する必要があります。
これらの考慮事項はすべて、設計と実装の組み合わせによって解決可能です。しかし実際には、ほとんどのサイトでダイアログを移動可能にする価値がないことを納得させるのに十分なので、通常はそうではありません。
モーダルダイアログが表示されてアクションを確認するように求められ、はい、これが削除したいレコードであることを確認できる唯一の方法は、不動のダイアログの下の情報を表示することです。
私は通常、キャンセルして再確認し、もう一度クリックする必要があります。
または、次のシナリオを検討してください。
チームリーダー様、現在取り組んでいるケースがあり、XYZのためにどうすればよいかわかりません。
whaa-whaa-whaa
ケース番号？わかりません...動かないモーダルダイアログで覆われています。
whaa-whaa-whaa-whaaaaa
閉じることができません。私は7ステップに入っていますが、キャンセルするオプションを提供していません。
注意を喚起することは1つです（下のページをロックダウンすることもできます）。あなたが尋ねられているページを覆い隠すことは別のことです。ダイアログがページに表示されるデータと何の関係もない場合（セッションタイムアウトの警告など）は問題ありません。それ以外の場合は、ユーザーにダイアログを移動させます。
モーダルダイアログは、固定する正当な理由がない限り、移動可能でなければなりません。実際にモーダルダイアログを移動するユーザーはほとんどいないため、言及されている「危険」にぶつかる可能性は信じられないほどスリムです。しかし、ダイアログを移動するユーザーはそれを行う理由があります。これは通常、続行する前にダイアログが表示したい情報を覆い隠すためです。ダイアログを適切な位置に修正する場合は、何も隠していないことを確認してください。
モーダルダイアログを移動できないようにすることについての多くの議論は、それらを移動する必要性が不十分な設計に由来するという事実を中心にしています。
これは説得力があります。
つまり、-ifあなたは完璧なデザイナーです。
世の中の他のデザイナーにとって、あなたのデザインの見落としを通してユーザーをいらいらさせてくれる人は喜んでいますか？そうでない場合は、それらを移動可能にします（*）。
（*）：少なくともこれがかなりクリーンなことである場合。レスポンシブデザインの場合のように、問題は簡単に悪化する可能性がありますが、単純なデスクトップ設定では、失うことは多くありません。
固定ダイアログ
必須のアクションに使用する必要があることを強調するため、そのアクションを使用します。しかし、それは必要な情報を隠すべきではありません
可動ダイアログ
情報を非表示にしない限り、移動可能なダイアログボックスを使用できます。ほとんどのWebサイトは、移動と可視性を妨げるだけなので、最近は可動ダイアログボックスを使用しません
しかし、これらは単なるガイドラインです
新規ユーザーの場合、Pinterestは固定ログインダイアログボックスを表示します。サインイン/サインアップしないと、中に入ることはできません。クラブの外の警備員のようにそこに立っています（パスワードなし？仲間の中のどこにも行かない！）
しかし、観察すると、背景がぼやけてスクロールし続け、ユーザーにPinterestから期待できることをざっと見ることができます。これは好奇心を高めます。これは素晴らしいUXです。ダイアログは修正されていますが、それでも情報のヒントが表示されます。
同じシナリオで、より魅力的な可動ダイアログボックスを想像できます。
例：Pinterestは、移動可能なダイアログと同じログインを持ち、右側に別のボックスがあります。このボックスは、ログインダイアログがどこに移動しても、ぼかしを解除して背景を表示します。これは素晴らしいマイクロ相互作用になる可能性があります。大まかなコンセプト画像を添付。
結局のところ、ユーザーを引き付けるために、これらの要素を効果的かつ創造的に使用する方法についてです。
モーダルボックスが動かない場合、応答がボックスの背後にあるものに依存することが多いので、私はそれをイライラさせます。例えば。アプリケーションが「保存せずに閉じる？」というモーダルを表示する場合ボックス、私はボックスを移動して邪魔にならないようにして、背後にあるドキュメントを見て、保存したいものがあるかどうかを確認できるようにします。箱が開いている間、ドキュメントを前面に出して「読み取り専用」モードで読み取ることができないのは、残念です。
編集：ログインまたは構成が関係する状況では、ユーザーが背後のウィンドウを表示したいと思うことはあまりありません。ただし、ログインしているものや設定しているものを忘れた場合は、それを覚えておいてください。モーダルボックスを移動可能にしても害はありません。ユーザーがモーダルボックスをモーダルだと気づかない場合は、背景ウィンドウを暗くしても、ボックスを淡色の背景の上で移動できます。