web-dev-qa-db-ja.com

スライダーの目盛り-何ピクセルですか?

ユーザーが数値を入力できるようにスライダーを使用するデザインを作成するように求められました。 (私の見方では)これらは適切ではありませんが、残念ながら代替案についての私の議論は無駄です!したがって、妥当な最小スライダー勾配が何であるかを確立するための調査が行われたかどうかを理解したいと考えています。 (たとえば)幅800pxの画面で、各スライダー位置の間に何pxあるべきですか?私はこの分野での研究については知りません。何かの方向に向けられるか、他の人の経験を聞いていただければ幸いです

1
Peter

スライダーは広い範囲で精度が悪いが、正しい球場に入るには最適です。スピンボックスは精度には優れていますが、大きな変更を加えるには適していません。スプリッターとスピンボックスを組み合わせるオプションはありますか?このようにして、スライダーを使用して適切な範囲に入り、スピンボックスを使用して選択した値を微調整できます。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

2
André

事前設定されたstepsがまったくないシームレススライダーを使用すると、より良い結果が得られるようです。言い換えると、バーはステップごとにスナップするのではなく、ピクセルごとにスムーズに移動します。例えば:

Seamless Slide from Apple's iOS Human Interface Guidelines

要件の一部がmust個々のステップを表示することである場合、通常、UIコントロールのスペースの幅を決定し(800pxと述べた)、最小ステップ値に基づいて分割します。ユーザーが設定できる必要があります(たとえば、整数、1〜10のみで、各ステップの間に100pxが与えられます)。

各ステップの間に少なくとも5〜10ピクセルのスペースをお勧めします。そうしないと、名前以外のすべてにシームレスなスライダーを効果的に作成できます。

1
David Perini

最終的には、スライダーをプッシュバックするための適切な引数が必要です。スライダーは、大きな連続体で正確な値で値を選択することで悪名高く有名です。たとえば、800のスペースで精度1の値を選択する場合、画面の解像度を問わず、カーソルだけをポイントするのは困難です。ルックアップ フィッツの法則 ユーザーがこのタスクを達成するのにかかる時間を独自に概算します。テキストボックスに手動で値を設定する方がはるかに簡単です。

スライダーが本当に必要な場合は、マウスが特定の速度のときに値をスナップするなど、何らかのトリックを使用することをお勧めします。ポインティングタスクでは、ユーザーはターゲットに近づくと速度が低下し、ポインティングの最も正確なフェーズでは速度が低下します。 OrthoZoom のような他のトリックはいくつかを助けることができるかもしれませんが、それは本当に空想になります。

1
Riche Design