web-dev-qa-db-ja.com

対数および/または線形スケールスライダーを使用する場合

私は、対数およびリニアスケールスライダーの使用に関して、職場の誰かと話し合っています。 jsfiddle *の例を次に示します。

問題の背景

現在、消費者がシムのみのプランを比較できるようなものを構築しています。オランダでは、250 MBから無制限のデータプランまでの範囲のデータプランがあります。

Example of the current header

スライダーの使用方法について簡単な例を示しました。ユーザーはスライドして最小データ量/分を選択できます。 「無制限」の前の最大のオプション(例では「Onbeperkt」)は20.000 MBです。

討論

議論は私たちが使用するべきスケールを中心に展開します。私は対数目盛と言うと、ユーザーは「平均」データプランを選択する前にたくさんドラッグする必要があります(各ステップ間の量が増えるので、最初は250 MB-> 500 MBのステップで、後で1000 MBになります)および5000 MB)。

開発者は、500 MBのステップで、線形スケールを使用する方が良いと考えています。彼の推論は、対数スケールがスライダーの目的全体を打ち負かすというものです。私は彼の推論を理解していますが、対数目盛の方が歩数が減るので、うまく機能します。

私の質問

線形/対数スケールのスライダーの使用に関する経験則または一般原則はありますか?.

追加情報

ジョンのコメントで尋ねられたように、ライブバージョンでは3452を選択することは実際には不可能です。線形と対数を使用したより良い単語がないため、既に「ステップ」を使用しています。つまり、線形スライダーではステップは500のままで、「対数」スライダーでは、値が大きくなるにつれてステップサイズが大きくなります(最初の250以降は500、1000、5000のステップになります)。

英語への翻訳

  • Belbundel =分数
  • Databundel = Dataplan
  • Onbeperkt =無制限

*フィドルは私のコンピューターで動作しますが、Cookieが原因である可能性があります。フィドルが機能しない場合は、セイリアのbootstrap slider を使用します。例1と15は、それぞれ線形と対数を示しています。

2
Kevin M.

それはあなたが直面している非常に興味深い挑戦です。私は最近解決すべき同様の問題があったと言わなければなりません。

あなたの質問に答えるためにそれは依存します選択しているデータの性質とユーザーのニーズに依存します- https://ux.stackexchange.com/a/121406/98561

データに線形または対数スケールを使用するかどうかどちらでもない。そしてこれが理由です:

スライダーを使用して実際のデータを表示するのではなく、単にユーザーにいくつかの選択肢を提供します。それらはたまたま順序付けられ(最小から最大、左から右へ)、正確な値は上に示されています。
したがって、2000MB1000MBの2倍であること、または250MBが4分の1であることを示す必要はありません1000MB

あなたにとって最も便利なのは、ストップの固定値を使用することです

[0; 100; 250; 500; 1000; 2000; 5000; 10000; 20000; ∞]

リニアスライダーを使用する場合は、最初に多数のストップが密集して配置され、その後は数ストップしかありません。開発者の視点に従うと、たとえば、次の値が選択されます。 6500MBで、100と250が到達不能になります(要求された場合)。

ここで、ストップを固定した対数スライダーを使用すると、ストップの間隔がより均等になりますが、均等になります。

私の考えでは、KISSルールに従い、{固定値配列の項目数}均等に広がりを停止し、それに応じてラベルを付けます。
より高い粒度が必要な場合は、それぞれの値でストップをさらに追加します。

2
Mike

最初に整合性

データの視覚化に関しては、対数スケールを使用する2つの理由があります。

大きな値に対する歪度に対応します。たとえば、1つまたはいくつかのポイントがデータの大部分よりもはるかに大きい場合。

変化率または乗法因子を示します。

これらの原則は、主に、チャート、特定の場合のスピードメーターなどの情報restitutionコンポーネントに適用されます。

enter image description hereenter image description here

スライダーなどのユーザー操作を必要とするコンポーネントの場合、最初に一貫性について考えます。対数目盛の使用についてのあなたの推論は、復元の観点からは理にかなっていますが、ユーザーが値をインクリメントするこのロジックに慣れていないと思います。 一貫したデザインは直感的なデザインです;類似する要素の外観と機能に一貫性があると、使いやすさと学習可能性が向上します。

本当に対数スケールを実装したい場合は、すべてのステップを明示的に表示することを強くお勧めします。

ソース

1
Brice

対数スケールが不可欠な特定のユースケースを考えることができます。

私はシステムのタイマースケールに取り組み、必要な時間は10秒から10分の範囲でしたが、ユーザーはタイマーの精度を10秒から2分の範囲に設定する傾向がありましたが、それ以外の精度はそれほど高くなかったことがわかりました。

つまり、タイマーを2分に設定する場合は2:30、3分、5分、または7分になりますが、タイマーを2分未満に設定する場合は、より正確にしたい場合があります。 1:10 1:20 1:30など

スケールを対数にしたので、ほとんどが10秒から2分の領域をカバーし、残りは最大10分の領域をカバーしました。

要約:研究は、ユーザーがスケールとどのように相互作用するか、および「価値」に対する正確性と便宜性が必要な場合を示します

1
colmcq

ユーザーに質問、テスト、またはインタビューを行いましたか?あなたはあなたのユーザーではありません。

Photoshopなどを使用したことのあるデザイナーは、ブラシツールの対数サイズのスライダーが嫌いだと思います。たとえば200pxより大きい値を入力する場合、ユーザーはおそらくフリーテキストエントリを使用します。さらに混乱と矛盾を追加するために、ブラシの「硬さ」スライダーは線形になります。 enter image description here

対数操作は、エンドユーザーにとって直感に反しています。ユーザーは、すべてが直線的、順次的、そして何よりも、タスクを完了するために多くのことを考える必要がないことを好みます。

1
Conso