focus-attention-design

集中と注意のデザイン

不要な注意散漫の要因を取り除き、ユーザーが注意を向ける環境を管理できるようにすることで、タスクへの集中を保てるインターフェースを設計します。

基本原則

画面上のすべての要素は、ユーザーが現在取り組んでいるタスクに役立つものであるべきです。 ビジネスの都合で存在していても、ユーザーのためにならないものは注意散漫の要因です。

デザインパターン

目的をひとつに絞る

• 画面またはセクションごとに、主要なアクションをひとつにします
• 二次的なアクションは視覚的な強調を抑えます（小さくする、控えめな色にする、テキストリンクにするなど）
• タスクに役立たない装飾要素は取り除きます
• 詳細オプションは「もっと見る」または「詳細設定」の背後に隠します
• 可能な場合は、選択肢を同時ではなく順番に提示します

割り込みの制御

• 音声や動画を自動再生しません
• ユーザーの操作で起動されないポップアップは表示しません
• ユーザーが通知を閉じたり、後回しにしたりできるようにします
• モーダルを表示する前に状態を保存します。モーダルを閉じても作業内容が失われないようにします
• ユーザーの操作なしに、画面からコンテンツを取り除いてはいけません
• バナーやアラートが必要な場合は、閉じることができ、操作を妨げないものにします

落ち着いた視覚表現

• セクション間に十分な余白を設けます
• カラーパレットを限定します（UI 要素には 3～4 色）
• 太い線ではなく、控えめな境界線や区切り線を使います
• 点滅や、コンテンツが急速に変化する表現は使いません
• アニメーションは機能的なフィードバック（読み込み、画面遷移）に限ります
• prefers-reduced-motion を常に尊重します

時間制限への配慮

• 絶対に必要な場合を除き、時間制限を設けません
• 時間制限がある場合は、期限のかなり前に警告します
• 簡単に延長できるようにします（複数の手順ではなく、ワンクリックで）
• 必須の判断には、少なくとも 20 秒の猶予を設けます
• 時間制限のある状況では、進行状況を自動保存します
• セッションがタイムアウトする場合は、状態を保存し、中断なく戻れるようにします

評価の質問

画面ごとに、次の点を確認します。

1. ユーザーがここで行うべきことは、何でしょうか？
2. その行動は、最も目立つ要素になっていますか？
3. この画面で注意を引き合う要素は何ですか？取り除いたり、目立たなくしたりできますか？
4. ユーザーは割り込み（通知、モーダル、自動再生）を制御できますか？
5. ユーザーのためにならない、作為的な緊急性はありませんか？

指摘すべきアンチパターン

• 時間制限のない操作に対するカウントダウンタイマー
• 「残り 2 点のみ！」という緊急性をあおるメッセージ
• 動画や音声の自動再生
• 互いに競合する複数の行動喚起
• ユーザーの操作なしにポップアップするチャットウィジェット
• タスク領域の近くに表示される、動く広告やアニメーション広告
• 注意をそらすレイアウトのずれ