メッセージが処理後も関連性があるかどうかを確認する
推奨されるアクションを実行して、画面に戻ります。問題が解決したら、バナーを更新するか非表示にする必要があります。古い情報がユーザーに不安を与え続けないようにしてください。
バナー デザインシステム
重要な情報を適切な文脈に配置します。
チェックリストの内容
確認の進捗
01
構造と意味
使用状況に応じて情報とプレゼンテーションを比較します。
02
インタラクションとユーザビリティ
操作を試し、ステータスを変更して作業を続行します。
進捗はこのブラウザーに自動保存されます。
ガイド
確認方法
使用例
使用例
アカウント情報を追加する必要があります
「続行するには情報を完了してください」バナーには、不足している正しいセクションに移動するボタンがあります。追加後、バナーは再度表示されなくなります。
バリエーションと利用場面
メッセージのレベル
情報、警告、エラー、成功を同じ色のラベルまたはアイコンで区切ります。
色を削除するときはバナーをお読みください。ユーザーは依然として、注意を払う必要があるのか、それとも単に詳細を知る必要があるのかを理解しています。
例 「支払いが完了していません」には警告アイコンとチェックアクションが表示されます。
メッセージ構造
何が起こったのかを最初に述べ、次にその影響と簡単な治療手順を説明します。
長い形式のメッセージと動的なメトリクスを試してください。モバイル上で重要なアクションを非表示にすることは避けてください。
例 「セッションの有効期限が近づいています。再度ログインする前に下書きを保存してください。」
アクションが含まれています
正しいイベント処理アクションを優先し、メッセージが不要な場合は閉じるオプションを追加します。
アクションをクリックしてから戻ります。問題が解決すると、エラー バナーは表示されなくなります。
例 接続切断通知の「再接続」ボタンを押してもホームページにアクセスできません。
ページとの対比
ページのメインコンテンツを損なわずに、メッセージを目に留まるように目立つようにします。
暗い背景とテーマにバナーを配置します。テキスト、リンク、ボタンは読みやすい必要があります。
例 境界線とアイコン付きの警告バナー。説明文は引き続き読みやすいフォントサイズを使用しています。
意味に応じた記号
アイコンを使用してメッセージの種類を表し、テキスト ラベルを主な情報源として保ちます。
アイコンを非表示にしてもう一度読んでください。メッセージは独立したものであり、意味を失わないようにする必要があります。
例 鍵のアイコンには「まだ編集権限がありません」という文が表示されます。
通知場所
通知は、影響を受ける領域の近くに配置します。セッション全体のお知らせはページの上部にあります。
ページをスクロールしてキーボードを開きます。バナーは、関連する領域の処理ボタンを覆わないようにしてください。
例 フィルタエラーは結果の隣にあります。サービスのメンテナンスが最上位にあります。