モーダル vs. ポップオーバー
短い答え
モーダルは、作業が終わるまでページをストップさせるよ。ポップオーバーはボタンの横にあって、ページはそのまま動かせるよ。
最初に完了させる必要がある1つのタスクにはモーダルを使用します。追加の詳細や小さなアクションにはポップオーバーを使用します。
各パターンが何をするかを見る
それぞれの例を試してみる。その後、それが作られた仕事について読む
Modal Dialog
↗ モーダルダイアログ
モーダルダイアログは、集中するためのウインドウだよ。誰かが閉じるか完了するまで、今の画面をブロックするよ。
アカウント削除の場合、キーボードフォーカスはダイアログ内に留まります。キャンセルした場合、フォーカスはそれを開いたボタンに戻ります。
- 以下の場合に使用します
- 完全な注意が必要な短い選択肢や小さなタスクに使用します。
- 以下の場合は使用しないでください
- 一つのダイアログを別のダイアログの上に開いたり、通常の低リスク情報に使ったりしてはいけません。
- コードで使用する名前
<dialog> / role="dialog" aria-modal="true"
Popover
↗ ポップオーバー
ポップオーバーは、開いたコントロールにくっついた小さなパネルだよ。ページをブロックせずに、まとまったコンテンツやアクションを置けるよ。
popover attribute / Popoverアバターを選択して、小さいプロフィールを開きます。役割、連絡先情報、フォローアクションが表示されます。
- 以下の場合に使用します
- コンテンツがトリガーの横に属し、人々がページを使い続けることができる場合に使用します。
- 以下の場合は使用しないでください
- 短いラベルだけのヒントには使用してはいけません。その代わりにツールチップを使用してください。
- コードで使用する名前
popover attribute / Popover
クイック比較
| UIパターン | 最適 | のためではない | コードで使用する名前 |
|---|---|---|---|
| モーダルダイアログModal Dialog | 完全な注意が必要な短い選択肢や小さなタスクに使用します。 | 一つのダイアログを別のダイアログの上に開いたり、通常の低リスク情報に使ったりしてはいけません。 | <dialog> / role="dialog" aria-modal="true" |
| ポップオーバーPopover | コンテンツがトリガーの横に属し、人々がページを使い続けることができる場合に使用します。 | 短いラベルだけのヒントには使用してはいけません。その代わりにツールチップを使用してください。 | popover attribute / Popover |
出荷前に
- 01
その人が何をする必要があるかを書き留めてください。
- 02
キーボード、フォーカス、タッチ、ズーム、読み込み、空、エラー状態をテストしてください。
- 03
人々がホバーや動作なしで同じ情報を得られるようにしてください。
- 04
小さい画面と大きい画面の両方で実コンテンツを使ってテストしてください。
04
比較リクエストをコピーできます
パターンを選ぶ際にチームが助けを必要とする場合、これをコピーしてください。
実際のユーザーフローに最適なパターンをモーダルダイアログ (Modal Dialog)、ポップオーバー (Popover)から選んでください。このルールを使用してください: モーダルは、作業が終わるまでページをストップさせるよ。ポップオーバーはボタンの横にあって、ページはそのまま動かせるよ。 タスク、コンテンツ量、フローを停止するコストを書き出してください。キーボード、タッチ、読み込み、エラー、動作軽減の挙動を確認してください。選択理由を説明し、その後、プロジェクトのデザインシステムで最小限でアクセシブルなバージョンを作成してください。