web-dev-qa-db-ja.com

すべての数値が有効ではない場合に、ユーザーが数値を入力できるようにするにはどうすればよいですか？

ユーザーが特定のマシン設定を構成する必要があるアプリケーションがあります。これらの設定の1つは、1〜100の整数パーセント値です。残念ながら、歴史的な理由により、実際には1〜100のすべての値をサポートすることはできないため、オプションの範囲には実際にはあらゆる種類の奇妙な「穴」があるため、次のようになります。

1, 2, 3, 4, *, 6, *, 8, *, 12, *, 16, 17, 18

穴は等間隔ではないので、ユーザーに1〜50のオプションを与えるだけで入力を縮小したり、偶数またはそのような賢いものだけを入力するように指示したりすることはできません。

現在の方法は、通常の数値入力を使用して、無効な数値を強調表示することです。これにより、ユーザーは選択が間違っていることを簡単に確認できますが、（a）why間違っていること、（b）正しい数値がどのように見えるかを確認することは困難です。

これは私の質問につながります：すべての数値が有効ではない（ただし、有限数の数値are有効）状況でユーザーが有効な数値を選択するのに最適な入力要素は何ですか？

これまでのところ、私たちは考えました：

  • 従来のドロップダウン
    • 選択できる番号はまだ50までありますが、それは多くのドロップダウンオプションです。また、数値にドロップダウンを使用するのは少し奇妙に感じられます。
  • 「datepicker」タイプのコンポーネント
    • ユーザーは番号を入力（検証付き）するか、入力の下のポップアップに表示される番号のリストから有効な番号を選択できます。
    • これは基本的に数字のグリッドのように見えることになります-それは日付ピッカーに似すぎていますか？
  • ステッパー
    • 〜50の数値はステッパーで簡単に選択するには多すぎるbut数値が設定されると、ほとんどの調整はおそらくわずかに増加およびわずかに減少します。
gui-designinput-fieldsinput
49
Johz

ユーザーが数値を入力しています。一部の値が技術的な理由で無効であっても、ユーザーの操作の性質は変わりません。数字を入力するのに最も自然なオプションを選びます。おそらく通常の数字フィールドを保持しますが、ユーザーが入力を終えたら、数字を最も近い有効なオプションに移動し、小さなメッセージでそれに合わせますか？

enter image description here

75
Denis

私は次のような水平スライダーがあると思います：

  • 可能な値を示す目盛り（目盛り）
  • 三角形の端がこれらの目盛りを指しているハンドル
  • ハンドルをドロップしたときに最も近い可能な値にスナップする
  • 実際の値のフィードバック
  • もちろん、キーボードで操作する機能
  • オプションで、矢印または+/-を使用して次/前の許容値に移動する機能
  • オプションで、fousが失われるとすぐに値が最も近い有効なフィールドに丸められる直接入力フィールド

可能性の最も明確な視覚的表示を提供します。

簡単な例を次に示します（目盛り付きの macOSライナースライダー に強く影響を受けています）。

enter image description here

（さらに目盛りを追加するのにうんざりしました）矢印や+/-がある場合、または直接入力が必要な場合は、もちろん値がハンドルの外側にある方が良いでしょう。

62
jcaron

基本的な要因がエラーを修正しているようです。

*からのコレクションの後にループするインテリジェントなコードが必要です。ホールに遭遇した場合は、（index-1）より小さく（index + 1）より大きい値を入力してください。

また：

  1. 50オプションのドロップダウンはありふれたものです（ただし、内部で検索を実装することは可能です）

    enter image description here

  2. DatePicker-合理的に聞こえます。2つのインタラクションで数値を選択すると、すべてすぐに利用できます。

この場合、ステッパーは、直感的には良いオプションのようには見えません。

単純な入力を使用することもできます。 *を入力すると、最も近い数値が使用されます。

enter image description here

6
Piotr Żak

通常の数値入力と、無効な数値をグレー表示し、入力された数値を中央に配置するドロップダウンメニューを組み合わせて、次の有効な数値に移動する上矢印と下矢印を組み合わせることができる場合、最も直感的です。

1
Acccumulation

最初の間違った入力でエラーメッセージを表示し、ツールチップを使用するようにユーザーに要求します。有効な番号と無効な番号が表示されます（無効なグレー表示）

0
topenion