#508
UI設計パターン
#508おーとこんぷりーと
オートコンプリート
別名・表記:Autocomplete入力補完オートサジェストTypeahead予測入力
UIXHERO Definition
UIXHEROでは、オートコンプリートを「入力途中の文字列から候補を提示し、ユーザーの入力量と記憶負荷を肩代わりするUIパターン」と定義する。
概要
オートコンプリートは「思い出して正確に打つ」作業を「見て選ぶ」作業に置き換える。再生(recall)より再認(recognition)のほうが認知的に楽であるという原則を、入力フォームに適用したパターンである。
テスラーの法則(複雑性保存の法則)の観点では、住所表記の正規化や商品名のゆれ吸収といった複雑さを、ユーザーではなくシステム側が引き受ける実装だと言える。
UXでの活用
- 入力エラーの削減: 候補から選ばせることで、表記ゆれやタイプミスに起因するバリデーションエラーが減る。
- 探索の補助: 検索サジェストは、ユーザーが自分の言葉を持っていない領域で「どう検索すればよいか」を示す役割も持つ。
- 速度: 入力文字数が減ることで、特にモバイルでの離脱が下がりやすい。
誤用・混乱
- 候補の押し付け: 候補が入力欄を覆う、Enterで意図しない候補が確定するなどの実装は、かえって入力を遅くする。確定は明示的な操作に紐づける。
- 候補ゼロ状態の放置: 候補が出ないと「この値は登録できない」と誤解される。自由入力や新規登録の導線を残す。
- アクセシビリティの欠落:
role="combobox"とaria-expanded/aria-activedescendantを伴わない独自実装は、キーボードや支援技術から候補を操作できないことがある。 - 検索サジェスト=人気順とは限らない: サジェストの並びは実装依存で、ユーザーの需要順を表すとは限らない。分析の根拠には使えない。
💡 使いどころ
選択肢が多く一覧表示に向かない項目(住所、駅名、商品名、タグなど)や、正確な表記をユーザーが覚えていない項目の入力時。
⚠️ 注意点・誤用
候補が出ることに依存すると、候補にない値を入力したいユーザーが行き詰まる。自由入力を必ず残すか、候補がない場合の導線を用意する。またスクリーンリーダー利用時は候補の出現と件数が読み上げられる実装(combobox パターン)にしないと、変化に気づけない。
具体例
- 検索窓に数文字入れるとクエリ候補が並ぶサジェスト
- 郵便番号を入れると住所欄が補完される入力フォーム
- タグ入力で既存タグを候補表示し、表記ゆれを防ぐ
出典・参考文献:
- WAI-ARIA Authoring Practices — Combobox Pattern (W3C)
- Forms(Web Form Design の実務知見)Luke Wroblewski