値の範囲が広い場合に推奨される入力制御はどれですか。

Question

私は、ユーザーが200ナノ秒（はい、ナノ秒）のステップで0秒から1秒の範囲のタイミング値を入力できるようにするWebアプリに取り組んでいます。

タイプ範囲（スライダー）の入力でそれを試しましたが、うまく機能しません。私の問題は、使用するユニットを決定する必要があることです。 µsの場合、0〜1,000,000µsの値を0.2µs刻みで表示する必要がありますが、見栄えが良くありません。また、グラフィックスペースが少なすぎて利用可能なステップが多すぎるため、500.0から500.2にスライドすることが明らかに不可能であるという問題もあります...

だから私はsthについて考えています。スケーリングされたユニットごとに1つ、4つの入力ボックスを使用するように：

[s] [ms] [µs] [ns]

どう思いますか？私がやろうとしていることを達成するためのより良い方法はありますか？解析する必要があるドロップダウンまたは単一の入力フィールドはどうですか？

Answer 1

時間ピッカーコントロールの設計方法を決定するのに役立つ可能性のあるワイヤーフレーム化された例を描くのに時間をかけました。以下に、すべてのユニットのタイムピッカーコントロール（画像1）、増分ボタン、減分ボタン、数値入力フィールド、およびユニットピッカードロップダウン（必要な場合）を示す3つのスクリーンショットを示します。

IMAGE 2：アイデアは、増分/減分ボタンがユニットごとに異なる値を上げるように設定することです。つまり、秒の隣の+は+ 1sの間それを発生させ、msの隣の+はそれを発生させます+ 500ms =など.

これが問題の解決に役立つことを願っています。

Answer 2

別のオプションは、次のような対数スライダーです。

^{download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム}

これは、値が何桁にも及ぶ可能性があるが、 有効数字 の数が少ない場合に適しています。たとえば、ユーザーが500ミリ秒と501ミリ秒の間で選択することはできません。そのため、必要なものではない可能性があります。完全な精度を必要としない同様の問題を解決するのに役立つ場合があります。または、McKnightが提案するようなマルチユニットテキスト入力と組み合わせることを検討できます。

Answer 3

さまざまな測定値で多くの入力コントロールを使用することは、ユーザーが自分に合うものを決定するために時間を費やすため、かなり最適ではありません。

X100nsをトリミングして編集外に移動できます。

^{download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム}

奇数の値が入力された場合、フォーカスを離れた後、奇数（小さいまたは大きい）に修正されます。

また、デジタル機器の同様のケースで、タッチディスプレイでカスタム入力ビューを使用します—電卓と+/-ボタンの両方で（リセット、削除、0、最小、最大値も含まれます）。私が理解しているように、それはプロのユーザーの場合、あなたのケースの特定の主題なので、値の入力を改善するためにスライダーを追加したり、あなたのケースのために特別にそれを変更したりすることもできます。

^{bmmlソースをダウンロード}

Answer 4

これがJavaScriptでどれほど簡単になるか、また特定のアプリケーションに適しているかどうかはわかりません。私が取り組んだアプリでは、設計チームがスライダーと専用のテキストフィールドを用意することでこれを解決しました。スライダーはパラメーターの一般的な範囲をカバーしますが、テキストフィールドでははるかに広い範囲を使用でき、左または右にクリックアンドドラッグしてスライダーの範囲を超えることができます。

したがって、たとえば、典型的な範囲が0〜100であるパラメータがある場合、許容範囲は[-1000、+ 1000]（または無限！）です。スライダーを使用すると、0から100まで1の増分でのみ入力できます。ユーザーは、テキストフィールドをシングルクリックして左または右にドラッグしてその範囲外に移動したり、ダブルクリックしてより大きな範囲内の正確な値を入力したりできます。 。

このアプローチの欠点は、ユーザーがこの機能に気付かない場合、スライダーが範囲全体をカバーしていると想定することです。良い点は、スライダーはユーザーが理解できる優れたUI要素であり、90％のユーザーが必要とする範囲の一部で機能することですが、ユーザーはそれに制限されません。

Answer 5

本当に面白い問題。うまくいけば、このソリューションは自明です。

^{download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム}

編集

それは自明ではありませんでした。

任意の時点での範囲は次のいずれかです。

• 0us-> 1us
• 1us-> 10us
• 10us-> 100us
• 100us-> 1ms
• 1ms-> 10ms
• 10ミリ秒-> 100ミリ秒
• 100ミリ秒-> 1秒

「短い」または「長い」をクリックすると、その縮尺が変更され、三角形のスライダーが縮尺の一方の端または他方に適切に移動します。

編集ボックスに手動で値を入力するか、上向き/下向き矢印を使用して正確に制御できます。単位は現在のスケールの選択を反映しており、編集できません。

現在のスケールを強化するために、現在選択されている時間単位は、ボックスの外側の代替単位で表示されます。