コーチマーク
Coach marks
別名: コーチマーク、スポットライト、フィーチャーコールアウト、Coach marks、Spotlight、Feature callout
生態(さわってみる)
一言定義
アプリ初回起動時などに、画面上の特定の要素だけを切り抜いて強調し、短い説明を添えて操作方法を教えるオーバーレイUI。
分類
使う場面
- 特定の1つのUI要素(新機能のボタン等)にユーザーの注意を絞って知らせたいとき
- 初回起動時、必要最小限のヒントだけをその場で短く見せたいとき
避ける場面
- 複数の要素を順番に、ひとつのストーリーとしてめぐらせたいとき(→ガイドツアー)
- 頻繁に表示されると妨げになる、恒常的な説明が必要なとき(→インラインヒント)
近縁種との比較
研究ノートの同義語表が「初回案内」カテゴリとして一括りにするCoach mark / Spotlight / Tour / Walkthroughは、本図鑑では「1点を強調するか、連続してめぐるか」という基準で2エントリに分けている。1つの要素だけを切り抜いて強調するコーチマーク(本エントリ、Spotlightは同義語として吸収)と、複数の要素を順番に案内するガイドツアー(Walkthroughは同義語として吸収)である。コーチマークは案内すべき要素が1つ、あるいは互いに独立した単発のヒントであるときに向き、複数の機能をひとつづきのストーリーとして順に見せたい場合はガイドツアーを使う。ツールチップとは、要素に説明を添える点が似ているが、ツールチップが恒常的にホバーで呼び出せる補足情報であるのに対し、コーチマークは初回案内という文脈でのみ一時的に表示され、ユーザーの操作を経て二度と現れないのが原則という違いがある。
実例リンク
アクセシビリティ
- role
- 強調対象の説明はrole="dialog"に準じた吹き出しで提示し、aria-describedbyで対象要素と関連付ける
- キーボード操作
- Escapeでいつでも終了でき、終了後はきっかけとなった要素へフォーカスを戻す。「次へ」「スキップ」ボタンはTabで操作可能にする
- 補足
- 背景を暗転させつつ対象要素だけ切り抜く(cutout)表現が定番。強調対象が変わるたびにフォーカスも一緒に移動させ、暗転部分をクリックしても直下の要素を誤操作しないようにする