ダイヤルとスライダー：物理的な入力装置から学ぶ数値入力UI

画面上のスライダーで「音量を37にしたい」とき、多くの人は何度か行き過ぎてから戻る。指やマウスの移動量と値の変化量が、うまく対応していないからだ。

特集「触れる数値」の関連取材として、音響機材メーカーで操作部の設計を担当してきた架空のエンジニア、黒田さんに話を聞いた。

1クリックの変化量は「迷わない最小値」

黒田さんによると、ダイヤルの1クリックあたりの変化量は「1回回して変化が確実にわかる最小の量」に設定する。小さすぎると何回回したかわからなくなり、大きすぎると狙った値に届かない。

クリック感がない無段階のダイヤルは、上級者向けです。初めて触る人には、手応えが目盛りの代わりになります。

画面のスライダーに移すと

Webのスライダーで同じ考え方を取り入れるなら、step属性で刻みを決め、矢印キーでは1刻み、Shiftと矢印キーでは10刻み動くようにする。キーボード操作でも、狙った値に少ない手数で届く。

値を声に出す

物理的なダイヤルは手応えで値を伝えるが、画面にはそれがない。スクリーンリーダー利用者にはaria-valuetextで「37パーセント」のように単位付きで読み上げさせると、数値だけより理解しやすい。

本誌の図表での応用

研究ページのグラフでは、指標の切り替えをスライダーではなくボタンにした。選択肢が3〜4個しかない場合、連続値のUIは過剰だからだ。どの入力装置を使うかは、値が連続か離散かで最初に決めるとよい。