あやね
レンジスライダーは、上限と下限のある値や範囲を動かしながら探したいときに役立ちます。一方、正確な数値に合わせにくい、どちらのつまみを動かしているか分からない、操作が終わる前に検索結果が変わるといった設計では、使いにくさにつながります。選択中の値をラベル付きで示し、範囲と刻み幅を定め、ドラッグ以外でも正確に入力できるようにしましょう。
例として、1日あたり20〜200米ドルの機材を扱うレンタルサイトを考えます。利用者が探したいのは、40〜120米ドルの機材です。この小さな操作にも、2つの数値の関係と、いつ検索結果に反映するかという判断が含まれます。PixsoのUIデザイン機能を使えば、実装に渡す前に、それぞれの動きを画面上で整理できます。
スライダーが向く数値入力を見極める
スライダーが得意なのは、範囲の中での位置を伝えることです。音量を小さくする、時間を長くする、予算の幅を狭めるなど、値どうしの関係をつかみながら調整する場面に向いています。初めから正確な数値が決まっているのに、つまみでその位置を探させる使い方には向きません。
レンタル料金の例では、スライダーで予算に合う範囲を探り、「最小」「最大」の入力欄で決まった金額を指定できます。どちらも実際に操作できることが重要です。入力欄の値を変えたら対応するつまみが移動し、つまみを動かしたら入力欄にも反映されるようにします。
指定する値が上限料金だけなら、つまみは1つで十分です。両端を指定する必要があるときにだけ、2つ使います。ほとんどの人が「120米ドル以下」を探したいのであれば、不要な下限のつまみは手間を増やし、安い商品を誤って除外する原因にもなります。
選択肢が少なく、それぞれに意味がある場合は、ボタンやラジオボタンの方が分かりやすいこともあります。「小・中・大」は分類であり、必ずしも連続した数値ではありません。正確な個数なら、数値入力やステッパーが適している場合もあります。配置できるスペースではなく、利用者が何を決めるのかを基準に選びましょう。
見た目より先に、範囲と精度を決める
この料金スライダーの全範囲は1日20〜200米ドルです。ラベルや値に単位を添え、週単位の料金や保証金と取り違えないようにします。現在選んでいる40〜120米ドルと、指定可能な20〜200米ドルは、別の情報として伝える必要があります。
この例では1米ドル刻みとし、両方の入力欄で整数を受け付けます。これは例の製品仕様であって、すべてのスライダーに共通するルールではありません。小数を扱う計測値なら必要な精度も変わります。目盛りが粗いという理由だけで、入力された値を黙って丸めないようにします。
1回の編集操作中は、範囲の両端を安定させます。上限のつまみを120米ドルまで動かした瞬間、スライダー全体の上端まで120米ドルに縮むと、同じ位置が別の値を表すようになります。検索範囲を広げ直そうとしても、200米ドルに戻す方法が分かりません。
機材のカテゴリーを変えた結果、指定可能な範囲が本当に変わるなら、その調整を説明します。新しいカテゴリーの最低料金が60米ドルなら、下限が変わったことと理由を示します。入力欄には40米ドルを残したまま、検索条件だけを60米ドルに変えてはいけません。
明確な理由がなければ、線形の目盛りを使います。20〜200米ドルの線形スライダーでは、同じ距離だけ動かすと金額も同じ幅だけ変わります。非常に広い範囲では非線形の目盛りが役立つこともありますが、値の変化量が異なるのに、等間隔のラベルで同じ刻み幅に見せないようにしましょう。
2つのつまみの役割を変えない
下側の値を指定するつまみは「1日あたりの最低料金」、上側は「1日あたりの最高料金」を表します。つまみが近づいたからといって、役割が入れ替わってはいけません。このフィルターでは、下限が上限を超えることはできず、ドラッグするともう一方の位置で止まる設計にします。
それでも、両方が80米ドルになる場合の扱いは決める必要があります。「ちょうど80米ドル」を意味するのか、一定以上の幅を必須とするのかを定めます。この例では同じ値を許可し、80米ドルちょうどの機材を探す条件とします。つまみが重なっても、入力欄のラベルから各値の意味が分かるようにします。
W3Cの複数つまみスライダーパターン（英語）では、各つまみにフォーカスできること、値の関係に応じた範囲、一定のタブ移動順を説明しています。2つを名前のない1つの図形として扱わず、それぞれの役割を保つ設計が必要です。
選択範囲の色だけに頼らず、操作中のつまみにキーボードフォーカスを表示します。重なっているときも、両方に移動でき、どちらを操作しているか分からなければなりません。見た目の衝突を解消するために、一方をキーボード操作から外すのは避けます。
直接入力でも安心して値を直せるようにする
トラックの下に「最小」「最大」の入力欄を置き、読む順番も左右の値の並びに合わせます。入力後もラベルを残してください。プレースホルダーに「40」とだけ表示しても、初期値なのか、入力例なのか、選択中の最小値なのかは分かりません。
利用者が最小値を40米ドルから140米ドルに変え、最大値は120米ドルのままだとします。入力値を残したうえで、「最小値は120米ドル以下にしてください」と伝えます。数値を黙って入れ替えてはいけません。利用者は、これから両方の欄を変更しようとしている途中かもしれないからです。値の組み合わせが有効になるまでは、トラックに直前の有効な範囲を残せますが、新しい範囲が未適用であることをメッセージで明確にします。
編集中に入力欄が一時的に空になることは許容します。欄から移動したときや「適用」を押したときなど、確定に適したタイミングで検証します。空にするたびに20米ドルへ戻してしまうと、普通に数字を打ち直すだけでも苦労します。
修正はその場で完結させます。最大値を160米ドルにすると140〜160米ドルが有効になり、エラーが消えます。他のフィルターまで初期化したり、検索の最初に戻したりする必要はありません。
選択中の範囲と検索結果への適用を分ける
このレンタルサイトでは、明示的な「適用」ボタンを使います。フィルターパネルを開いている間の40〜120米ドルは、まだ編集中の値です。「適用」を押すまでは、背後の一覧には以前の条件が反映されています。「キャンセル」では途中の変更を保存せず、適用済みの値に戻します。
即時反映にも利点はありますが、調整中の応答を分かりやすくする必要があります。ポインターが少し動くたびに重いリクエストを送り、一覧が点滅したり遅れたりする設計は避けます。つまみから指を離したとき、操作が少し止まったときなど、どの時点で結果を更新するかを製品・開発チームで決めます。
適用後は、検索結果の近くにも選択した料金範囲を示します。一致する機材がなくても範囲を残し、条件を広げられるようにします。リクエストの失敗と、検索に成功した結果の0件は別です。通信障害を解消するために予算を上げるような案内をしてはいけません。
絞り込み全体では、適用済み条件の表示や、複数条件をどう組み合わせるかも設計します。その中でスライダーが受け持つのは、他の条件と組み合わせる前に、数値の範囲を理解し、編集できるようにすることです。
キーボード、タッチ、小さな画面でも確認する
W3Cのスライダーパターン（英語）では、矢印キーによる値の調整や、Home・Endキーで指定可能な端へ移動する動作を説明しています。また、タッチ操作の支援技術については実機確認が必要です。つまみがドラッグできる見た目だけでは、アクセシブルな実装になりません。
見える円が小さくても、周囲には操作しやすい領域を確保します。数値入力欄をトラックに近づけすぎて、欄をタップしたつもりでつまみが動かないようにします。スマートフォンでは、数字キーボードが開いた状態、翻訳によってラベルが長くなった状態、両方の値が同じ端に寄った状態も確認します。
ドラッグ中に値を吹き出しで示すと役立ちますが、指で操作する場所を覆わないようにします。選択値の表示を吹き出しだけに頼るのも避けます。常時表示する入力欄があれば、吹き出しが消えた後も範囲を確認できます。同様に、つまみが端へ移動したとき、端点のラベルが切れないようにしましょう。
Pixsoで同じ料金フィルターを組み立てる
レンタル結果のフレームと、開いた状態のフィルターパネルを作ります。料金コントロールにはトラック、選択範囲、2つのつまみ、ラベル付きの2つの入力欄を配置します。入力欄の見た目は再利用できるコンポーネントにし、周囲のラベル、操作部分、メッセージはAuto Layoutでまとめます。
有効な40〜120米ドル、入力が矛盾する140〜120米ドル、修正後の140〜160米ドルを横に並べます。別の適用後フレームでは、フィルター概要にも同じ範囲を表示します。単に「最小」「最大」という仮の値を置くより、具体的な数字を使う方が食い違いを見つけやすくなります。
プロトタイプで「適用」と「キャンセル」をそれぞれの画面につなぎます。チームメンバーには、120米ドル以下の機材を探した後、最小値を140米ドルに変えて修正してもらいます。メッセージの意味が伝わるか、現在どの範囲が検索結果に反映されているかを理解できるかに注目します。
コンポーネントの横に、上下限、入力精度、両端が同じ値になる場合の扱い、更新タイミングを記します。プロトタイプはその判断を共有するためのものです。実装したスライダーでは、キーボード、タッチ、支援技術による確認が別途必要です。使いやすいレンジコントロールは、探索を楽にしながら、正確な数値を指定する自由も保ちます。
