contextual-help-design

コンテキストに応じたヘルプの設計

ユーザーが困っている画面で、理解できる言葉で、そこにたどり着くまでの経緯を思い出さなくても済むようなヘルプを設計します。

基本原則

ユーザーが困ったときは、今いる画面を離れずにヘルプを得られるようにします。

デザインパターン

インラインヘルプ

• 説明が必要なフィールドの横にツールチップまたは情報アイコンを表示する
• 入力フィールドの横に例を表示する（「例：15/03/2026」）
• 複雑なフィールドでは、ヘルプテキストをデフォルトで表示する
• 専門用語の定義をインラインで表示する（下線＋ツールチップ）
• 一般的でない概念には「これは何ですか？」のリンクを付ける

ガイド付きタスク

• 複雑なフォームに代わる選択肢として、ステップごとのウィザードを用意する
• 完了済みタスクの例を示す（入力済みのサンプルフォーム）
• 「最初から作成する」と並べて、テンプレートや事前作成済みの選択肢を用意する
• ユーザーの進行状況に応じて変化するヒントを表示する

問い合わせ先への移行

• 最初の選択肢としてセルフサービスのヘルプ（検索、FAQ）を提示する
• 次の選択肢としてチャットまたはメッセージングを提示する
• 3番目の選択肢として電話またはビデオ通話を提示する
• チャネルを切り替える際に、ユーザーに説明をやり直させない
• 人によるサポートの推定待ち時間を表示する
• ヘルプを受けるために受付番号を必須にしない

エラーからの復旧支援

• エラーメッセージには、何が起きたか、なぜ起きたか、次に何をすべきかを含める
• 修正が必要なフィールドまたはステップに直接リンクする
• 主な方法が失敗した場合に、別の方法を提示する
• 複雑なエラーの場合は、人によるサポートを直接案内する

ヘルプコンテンツのルール

• 小学校4〜6年生が読めるレベルで書く
• インターフェースと同じ用語を使う（別の言葉を使わない）
• 1つのステップにつき指示は1つにする
• 空間的または手順的な説明には、画像や図を含める
• ヘルプを検索可能にする
• 実際にその問題を抱えている人にヘルプコンテンツを試してもらう

評価の質問

1. ユーザーは作業から移動せずにヘルプを得られますか？
2. ヘルプは、インターフェースに合った平易な言葉で書かれていますか？
3. セルフサービスで解決できない場合、ユーザーは2クリック以内に人に問い合わせられますか？
4. ユーザーが実際に困る場面（想定していた場面だけではなく）に対応するヘルプリソースがありますか？