モーダルダイアログを閉じるためのベストプラクティスは何ですか？
私はさまざまなモーダルダイアログを見回してきましたが、ユーザーにダイアログを閉じるための最良の方法について疑問に思いました。明らかに、Xはウィンドウを閉じるという標準的なユーザーの期待になっています。明らかに Esc キーもそれを行う必要があります。しかし、ユーザーが背景をクリックしてダイアログを閉じることができるものもあれば、できないものもあります。
モーダルには、ユーザー入力が必要なものと必要でないものの2種類があると思います。 1つのタイプのダイアログは、情報を提供する受動的なものです。たとえば、画像を閲覧したり、「これは起こりました」などです。別のダイアログタイプは、ユーザーが入力したトランザクションです。たとえば、データベースレコードとモーダルをクリックすると、そのレコードのフィールドを編集できます。
ユーザーに重要な情報を入力させ、誤ってダイアログの外側をクリックしてレコードを閉じ、変更を失うと、非常にイライラします。 「X」ボタンまたは「キャンセル」ボタンを明示的にクリックすると、モーダルを終了して作業を失うというユーザーの要望がどのように伝えられるかがわかります。実際には、人々は複数のウィンドウを開いており、ウィンドウ間でデータをコピーします。
パッシブの場合、結果がないのでダイアログを閉じるのを少し簡単にすることは大したことではありません。
アプリ内のすべてのダイアログが同じように動作することは明らかです。アプリは、有益なダイアログとトランザクションダイアログを組み合わせる場合があります。
重要なレコードを編集するためのトランザクションダイアログが多数あるWebアプリケーションでこれを行うためのベストプラクティスは何だと思いますか？あなたの考えをありがとう。
私はWebデザインにZurb Foundation Frameworkをあまりにも長い間使用しています。主にそれが最も軽量であり、明確でかなりシンプルなUXを提供するためです。
アクションのモーダルを確認するには、 Revealコンポーネント を参照してください。
モーダルは、モバイルからデスクトップ、さらにはタブレットまで、表示されているデバイスに基づいて異なる動作をする必要があります。
各環境には違いがあり、ユーザー入力を処理する方法があります。
デスクトップ;マウスやキーボードを使用するか（物事を複雑にしないために音声コントロールを含まない）、デスクトップ環境でウィンドウを閉じる最も一般的な方法は、ウィンドウの左上/右にあるXボタンをクリックすることです。それでもキーボードでは、ESC（エスケープボタン）は、コンピューターの黎明期からビューとウィンドウの非表示を処理してきたものです（履歴リソースを間違えない限り、訂正してください）。
携帯/タブレット;画面サイズが限られているため、Xボタンをタップしてモーダルを閉じるのは困難です。つまり、追加のメソッドが必要であり、画面の左側のスペースにあるオーバーレイをクリックするのが確実です。これは、ユーザーがモーダルを使用する必要がなくなったことを意味し、モーダルの元となったバックグラウンドページ/に移動したいと考えています（見た目が簡単に区別できるようにオーバーレイを使用しています）メインウィンドウとモーダルウィンドウは非常に重要です）
結論？モーダルは、さまざまな方法でそれを却下できるようにする必要があります。最も重要なものは次のとおりです。
- ESCボタン
- Xボタン
- オーバーレイをクリックして閉じます（タッチデバイスのXボタンよりも少し重要です）
上記のデモでは、Zurb Foundationは、ここで説明したすべてを明らかに使用しています。ページにアクセスして自分でテストしてください
アラート、確認、データ入力、画像ポップアップなど、すべてのモーダルポップアップで同じ動作が必要だと思います。
ほとんどのユーザーは、画像ポップアップをデータ入力モーダルと同じように扱うことを期待していないと思います。したがって、すべてのポップアップが同じように動作するわけではありません。この一貫性の試みはエクスペリエンスを簡素化しているように見えますが、このケースでは、実際に混乱やフラストレーションが発生します。 （これは、ユーザーをログインさせるために、まったく同じテキストボックスにユーザー名とパスワードのみを提供することにより、ユーザーがWebサイトにアカウントを登録するのと同じタイプの簡略化です。）
ほとんどのユーザーは、画像またはその外側の半透明のオーバーレイをクリックして、画像を非表示にできることを知っています。データを要求するフォームに対しては、自動的には行われません。
一貫性を保つために、すべてのモーダルポップアップの右上隅にxボタンを配置すると、最終的にダイアログが非表示になります。ただし、データ入力の場合、変更が保存されないことをユーザーに警告し、モーダルのままにするオプションをユーザーに提供する必要があります。
ユーザーがモーダルフォームの外側をクリックした場合は、何もしないでください。閉じるか開いたままにすることの確認でさえもです。繰り返しますが、ダイアログを明確にコミットまたはキャンセルする責任があることを知っているため、混乱することはありません。
アラートの場合、ユーザーにエスケープまたは入力の両方をクリックさせることができます。私は「OK」と言っているので、個人的に入るのが好きです。私へのエスケープは、アクションをキャンセルすることを意味し、アラートダイアログをキャンセルしても意味がありません。
個人的に...私は、あらゆる種類の「情報提供」モーダルを使用しないようにしています。状況に応じたページはめ込み表示は、ページコンテンツを隠したり、閉じたり戻ったりする必要がないというリスクなしに、はるかに効率的に機能します。
「キャンセル」または「確認」が明確なアクションモーダルは、ユーザーがタスクを中止したいというリスクがほとんどまたはまったくないはずです。
フォームやその他の複雑なやり取りにモーダルを絶対に使用する必要がある場合...キャンセルまたは閉じるボタンを右上に配置して、明らかな出口点を提示します。そうしないと、ユーザーが[戻る]をクリックして、入力したデータを失う可能性があります。 。
あなたがマルチステップのモーダルをしているなら...まあ、ただしないでください。 :)