スライダーは昔から身のまわりにあり、任意の値や範囲を選ぶためのUIとしては事実上最もスタンダードなものとなっています。選べる範囲をユーザーがすぐに把握できるので便利です。
本記事では、UI要素として馴染み深いスライダーのクリエイティブな例をいくつか見ていきましょう。
１. 設定値を視覚化する
スライダーは、ユーザーが特定の値や範囲を選べるコントローラーです。ユーザーはほとんどの場合、スライダーのラベルを読んでどのような値をコントロールできるかを知ります。それに加えて、データをスライダーと連動させて視覚化することで、より強い効果を生み出すことができます。
絵には言葉1000個分の価値があります。
購入する家の部屋数を選ぶもの。ユーザーがいくつの部屋を持つ家の購入をスライダーで選択するかに関わらず以下のように視覚化できます。
Gal Shir氏によるアニメーション。ソース：Codepen
個人用Webサイト向けの最適な背景色を選ぶもの。
ユーザーが選択した色を視覚化しているRogie King氏によるスライダー
どのような種類のハンバーガーがあるか調べるもの。
イメージ：Chris Gannon氏
製品やサービスに対するフィードバックを求めるもの。
ユーザーの意見への反応を感情で表す。イメージ：Arun Sajeev
視覚化によって、ユーザーが十分に理解して決断することが簡単になります。
視覚的なアウトプットなしに、十分な意思決定をすることはほとんど不可能なときもあります。Tylkoでは、スライダーで寸法を調整したときの家具の変化を視覚的なアウトプットとして提供することで、ユーザーは家具がどう変わるかを知ることができます。これはどの程度の寸法かを読むだけでは、理解することは難しいでしょう。
２. 設定値を選ぶ手助けをする
オプションを提供するスライダーもありますが、どの値を選ぶべきかユーザーが迷ってしまうときもあります。
優れたユーザーインターフェイスはユーザーを助け、手引きする
スライダーによって、ユーザーが十分な情報を得て決断を手助けできます。
AirbnbのWebサイトはひとつの良い例です。Airbnbは１泊の料金とその日ごとに平均価格の分布を示すヒストグラムを、料金スライダーとして組み合わせて使っています。この図のおかげで、ユーザーは価格帯によって登録者を選ぶのが簡単になります。
Airbnbの価格帯ヒストグラムではフィルターの結果がゼロになるのを防いでいます。
もうひとつの興味深い解決法がTruliaのWebサイトにあります。Truliaの住宅購買力計算器は、スライダーの色を変化させて借金の返済負担率の選択肢についてユーザーに伝えます。このスライダーのおかげでユーザーが危険な返済負担率を選ぶことを防げます。
３. 特定の値を設定できる
多くのスライダーが同じ問題を抱えています。スライダーで正確な値を選べないという問題です。入力の精度の点では、スライダーは入力欄には敵いません。そのため、もし正確な入力が必要であれば、入力欄とスライダーを一緒に使う方が良いでしょう。
SGSの住宅コスト計算器にはスライダーと入力欄の２通りの設定方法を提供しています。このテクニックを使いたければ、すべての設定方法を同期させることが重要です。つまりスライダーで値を変更したら入力欄の値も更新され、入力欄スの値を変更したらスライダーも更新されるようにしなければいけません。
４. 死角の問題を解決する
モバイルアプリのスライダーでは、死角の問題に悩まされることがよくあります。この問題は、重要なデータである選んだ値が指で隠れてしまうことで起こります。Virgil Pana氏が作った流動スライダーでは、スライダーの操作時に選んだ値がユーザーに見えるように浮き上がることでこの問題を解決しようとしています。
Virgil Pana氏のスライダー。このスライダーはRamotion社によってコード化されました（Githubのfluid sliderプロジェクト）。
