フィードバック
ユーザーに操作の結果を伝えるUIの基準を定義します。
ユーザーが行なった操作へのシステムからの応答をフィードバックと呼びます。メッセージを画面上に表示したり、コンポーネントの意匠を変更するなどの方法が取られます。
基本的な考え方
ユーザーが受動的に結果を認識できるようにする
フィードバックはユーザーが操作の結果を理解し、次の行動を判断するために重要です。ユーザーが何らかの操作をした際はその結果を受動的に認識できるように、素早く画面上にフィードバックのためのUIを表示してください。
フィードバックを省略できるケース
以下の例のように画面の変化から操作が成功していることが明らかに理解できる場合のみフィードバックのためのUIは省略します。
- ページの読み込みに成功したタイミング
- 新規追加したオブジェクトの詳細ページが自動で開かれる場合
操作部の近くでフィードバックする
ユーザーは画面の全領域の変化に常に気づくとは限りません。可能な限り、直前までユーザーが操作していた要素の近くか、コンポーネント自体の変化で操作の結果をフィードバックします。
特に拡大鏡を利用する弱視・ロービジョンのユーザーは、拡大表示範囲外の変化を認識できません。
関連リンク:弱視・ロービジョンのユーザーのウェブ利用時の課題と解決案
スクリーンリーダーでの読み上げ順序を考慮する
[WIP]
ライティング
エラー状態をフィードバックする場合、エラーメッセージの基本的な要素に沿ったメッセージを表示してください。エラー状態はユーザーの目的達成を阻害するため、回復方法が理解できるライティングが重要です。
種類
操作の結果をフィードバックする代表的な状況は以下のとおりです。
なお、非同期処理のフィードバックについては、バックグラウンド処理を参照してください。
- フォームを入力・送信するとき
- 同期的な処理を開始したとき
- 同期的な処理が完了したとき
- ページ・要素の読み込みを開始したとき
- ページ・要素の読み込みが完了したとき
フォームを入力・送信するとき
入力時に値が不正であることを判定する場合
入力要素からフォーカスが外れたタイミングで、入力要素に対してエラーメッセージを表示します。値が修正され、エラーの原因が解消された場合はエラーメッセージの表示を止めます。
入力要素に対するエラーメッセージは、FormControlかFieldsetのerrorMessages
で表示します。入力要素にもerror
状態を付加して意匠を変化させます。