セレクト・コンボボックス・コマンドパレット
選択肢が多いとき、セレクト・コンボボックス・コマンドパレットのどれにする?
判断表
| 判断軸 | セレクト 一覧から1つ選ぶ | オートコンプリート 打って絞り、候補から選ぶ | コマンドパレット 画面のどこからでも呼び出して実行 |
|---|---|---|---|
| 選択肢の数 | 5〜15個。全部見て選べる範囲 | 数十〜数千。打たないと探せない | 画面の機能すべて。10個でも100個でも同じ操作 |
| 利用者が知っていること | 何があるか知らなくてよい(見て選ぶ) | 名前の一部を知っている(都道府県・駅名) | やりたいことの名前を知っている |
| 置き場所 | フォームの1項目 | フォームの1項目 | 画面全体に重なるオーバーレイ(⌘K で開く) |
| キーボード | 矢印・Enter・Esc で操作できる(見本あり) | ↑↓ Enter Esc に加え、打ち込みで絞る | ショートカットで開き、打って Enter で実行 |
| モバイル | ネイティブの select に任せる手もある | キーボードが出るので、候補は上に寄せる | 向かない。ショートカットが無くメニューで代替 |
迷ったらこれ
迷ったらセレクト。ただし選択肢が15個を超えたらコンボボックスにして打って絞れるようにし、機能や画面へ飛ぶ「操作の入口」を探させるなら、慣れた利用者向けにコマンドパレットを足す(通常のメニューは残す)。
複数選んでチップに積む型は combobox、結果のプレビュー付きの検索モーダルは search-modal-preview を参照。カスタムのセレクトを作るなら、まずネイティブ select で足りないかを確かめる。