開閉時のピント位置確認
キーボードでダイアログ ボックスを開き、すべてのコントロールを操作してから閉じます。ダイアログ ボックス内でフォーカスを維持します。閉じると、開かれたノードを返し、背後のコンテキストを保持します。
モーダルダイアログ デザインシステム
意思決定に焦点を当て、最終決定ラインを見つけやすくします。
チェックリストの内容
確認の進捗
01
構造と意味
使用状況に応じて情報とプレゼンテーションを比較します。
02
インタラクションとユーザビリティ
操作を試し、ステータスを変更して作業を続行します。
進捗はこのブラウザーに自動保存されます。
ガイド
確認方法
使用例
使用例
下書きの削除を確認する
ダイアログボックスには下書きに名前が付けられ、「下書きを保持」、「下書きを削除」が表示されます。キャンセル後は元の削除ボタンにフォーカスが戻ります。
バリエーションと利用場面
ダイアログボックスのアクション
メインアクション、キャンセル、危険なアクションには、結果を説明するラベルを付けてください。
各ノードを個別に読み取ります。ユーザーは、データが保存されたのか削除されたのかを知る必要があります。
例 確認ボックスには「下書きを削除」ボタンと「下書きを保持」ボタンがあります。
閉め方と戻し方
終了条件を説明し、必要なデータを保持し、開いた位置にフォーカスを戻します。
許可されている場合は、閉じるボタン、エスケープボタン、背景ボタンを使用します。各方法では一貫した結果が得られる必要があります。
例 Esc キーを押してキーワード検索を閉じて、[検索] ボタンに焦点を当てます。
小さな画面上のダイアログ ボックス
キーボードが開いているときでも、タイトル、スクロール コンテンツ、ボタンを表示したままにします。
320 ピクセルの画面と 200% のズームを試してください。確認をクリックするために水平にスクロールする必要はありません。
例 プロファイル編集ボックスは、モバイルでは全画面パネルに変わります。