web-dev-qa-db-ja.com

モーダルダイアログを閉じる

モーダルダイアログに毎日出くわし、さまざまな実装が常に見られます。

ほとんどのモーダルダイアログには、ダイアログの右上隅に[X]と[キャンセル]/[閉じる]ボタンがあります。

非常に多くのオプションがありますが、モーダルダイアログを閉じるためのベストプラクティスは何ですか?また、何が好ましいかを示す参考文献の研究はありますか?

私が見た実装:

  • [X]が隅にあるキャンセル/閉じるボタン(右上/左、右下/左?)

  • モーダルの任意の場所をクリックして閉じます

  • 角の[X]だけ(右上/左、右下/左?)

  • ただキャンセル/閉じるボタン

  • モーダルの外側をクリックします

  • [X]の有無にかかわらずEscキー/キャンセル/閉じる

23
rick schott

最良の実装は、ダイアログのタイプと必要な対話モードに依存すると思います。

アクションが必要なダイアログ私の意見では、それらを閉じるための[X]は必要ありません(アクションボタン以外の場所をクリックしても閉じられません)。
それらのほとんどには、「保存」と「キャンセル」のボタンセットがあるため、「閉じる」が「キャンセル」を意味するかどうかを、ユーザーは(一瞬でも)考えたままにします。

情報ダイアログ私の意見では、「閉じる」ボタンと[X]の両方が必要です。
情報がユーザーの希望するものである場合操作(たとえば、テキストを選択してコピーする)の場合、もちろん、内部をクリックしてダイアログを閉じることはできません。
ユーザーに注意を払う情報を必要とする場合、ユーザーがダイアログを閉じて閉じる必要がある可能性が高くなるため、外側をクリックして閉じることも許可しません。 (うまくいけばそこに何かを読んでください)。

16
Dan Barak

[〜#〜] escape [〜#〜](Escキー)を忘れて一部を閉じる(キャンセル(OK/Cancel)、または[〜#〜] ok [〜#〜]シングルOK )モーダルウィンドウ

6
igor

I never隅の十字をクリックします。ボタンが省略されている場合、それがまだウィンドウであることを思い出すまで、私は通常混乱しています。 OK /キャンセルボタン( 'yes/no'、 'save/do n't save'などの他の単語がより適切である場合を除く)と、キャンセルボタンと同じように機能する角の十字形を使用します。他の「隠された」アクションはありません。

4

終了ボタンは、ユーザーがクリックするかどうかに関係なく、常に必要です。それがないと混乱を招くからです。閉じるリンクは役立ちますが、「X」を付ける必要があります。常にすべての終了オプションを提供することをお勧めします(「x」、リンク、任意の場所をクリックして閉じる)。

私は現在、このトピックを参照している研究については知りませんが、モーダルウィンドウの適切な使用に関する興味深い記事con Smashing Magazineがあります: http://www.smashingmagazine.com/2009/ 05/27/modal-windows-in-modern-web-design /

4
Pam Rdz

明示的なダイアログボタンも重要なアクセシビリティ機能であることがわかります。私は GNOMEヒューマンインターフェイスガイドライン に長年取り組んできましたが、それらを更新するたびに、ダイアログ内の「冗長な閉じるボタン」を削除することにより、「混乱を減らす」ための呼び出しがあります。ウィンドウフレームコントロールとそれに関連するキーボードショートカット(Alt-F4、MS Windowsと同じ)を使用して、明確に閉じることができます。

ただし、GNOMEアクセシビリティコミュニティに提案するたびに、ウィンドウ自体の内部に有形のボタンを保持することについての好みを再表明しています。

2
calum_b

私はおそらく両方のコントロールで行くでしょう:

(X)-右上隅

理論的根拠:ウェブでは非常に一般的で、Macユーザーでさえ慣れていると思います。 [X]は、ユーザーがよく認識し、(閉じる)を持つことは冗長に見える記号です。

[OK /閉じる]-コンテンツ内

合理的:ユーザーがテキストを読み飛ばした場合、目がテキストの下に非常にうまく行き、カーソルが閉じるボタンに近づく可能性があります。特に、ボタンも大きいので、ボタンを押すのが速くなる可能性があります。ユーザーがEnterキーを押すだけでダイアログを閉じることができるように、閉じるボタンにフォーカスを置くこともできます。

0
Anna Rouben