数字を効率よく入力するためのUI
ユーザーが多くの数値調整を非常に迅速に行う必要があるWebアプリを開発しています。
次に例を示します。
可能な解決策
私が思いつくことができる唯一の合理的な提案は、ポップオーバーのフォーカスです。
テキストボックスがフォーカスされている場合、隣接する値のリストを含むアイテムの横にポップオーバーを配置できます。
更新：テキストボックスにフォーカスがある場合、ユーザーは通常、キーボードを使用して「3.45」を手動で入力できます。
数値入力は可能な限り摩擦なしである必要があり、調整はマイナーになることを強調したい、たとえば2.45を2.47に変更します。
ユーザーが微調整をしているだけなので、増加/減少ボタンを大きくするのが良い簡単な解決策だと思います。これにより、値を変更することは簡単になります。また、キーボードを使用して簡単に移動したり値を調整したりできるようにすると、マウス、キーボード、タッチ操作のサポートが向上します。
個人的に私はあなたのポップアップのアイデアが好きでした。探している値を実際に見るので、それをクリックするだけで強力です。それは比較的高度な相互作用を必要とするかもしれませんが、認知負荷はおそらく低いです。
私はあなたのアイデアを取り入れて、すべてが画面に収まるように値を提示することで改善しようとしました。また、現在の値がマウスの中央に来るようにポップアップを配置したので、小さな調整を簡単に行うことができます。
私にとって、ユーザーがすばやく簡単に更新できるUIを作成するための明白な解決策は、入力を編集可能にすることです。
変更が一定の間隔で実行できる場合は、さらに優れています。数値の最後の部分だけを編集可能にして、固定されている値の前に表示できます。たとえば、2.67が（2.61、2.69）の間の値で変更できる場合、2.6を表示し、「7」のインライン編集を実装します。
2つ目のオプションは、UIをそのままにし、選択を制限することです。ツールチップは私の意見では実用的ではありません。
追加の相互作用を追加するのではなく、機能を拡張する実際の相互作用を使用してみてください。
現在、ユーザーは次のことができます。
- 数値を入力してください
- 下/上矢印をクリックして、数値を上下に移動します
私が正しく理解していれば、1ユニット上がるとは0.01上がることを意味します。これは、ユーザーがデフォルトの割り当て値から1回または2回のクリック（2.67から2.69へ）から移動することのみを望む場合、または必要とする場合に問題ありません。ユーザーが2.67から3.04に移動したい場合は、上/下ボタンが役に立たなくなり、ユーザーは数字の入力のみを入力できます。
0.01の上昇のみを許可するボタンのこの制限を解決するために、私の提案は次のとおりです。
ユーザーが下矢印/上矢印をドラッグして、マウスのY値に応じて値が増減するようにします。このようにして、ユーザーはタイピングとマウスの両方で入力を完全な精度と十分な柔軟性で管理できます。
ジェスチャー教育 のヒントやツールチップを利用できます。また、ボタンを少し大きくするUIを使用することもできます。
キーボードとマウスの切り替えには時間がかかります。 （ キーストロークレベルのモデル を確認してください。）フィールドを切り替えるために単にTabを入力するのではなく、次の各フィールドをクリックする必要がある場合、長いフォームに記入するのにどれだけ時間がかかるかを考えてください。したがって、効率を最大にするために、ユーザーがマウスを使用してラジオボタン、ドロップダウン、ドラッグ可能なウィジェットなどをクリックすることは避けたいでしょう。
テキストフィールドのみを提供し（そして正しいタブオーダーを設定し）、ユーザーがキーボードに手を離さないようにします。
ポップアップリストは恐ろしい解決策だと思います。彼らは最初にフィールドに到着した後、正確な動きを必要とします。以下にいくつかの代替ソリューションを示します。そのほとんどは相互干渉なしで実装できます。
- 矢印キーのマッピングは、以下から展開できます。
- 値を0.01ずつ増やし、
- 値を0.01ずつ下げます。含める
- 0.1増やします
- 数値を大きく調整する場合は、値を0.1ずつ減らします。これは、一方の手がマウスを動かし、もう一方の手がキーボード上にあると想定しているため、並列WASDマッピングがおそらく便利です。次に、スペースを追加して次の値にジャンプし、Shiftキーを押してジャンプして戻ることができます。
数字パッドの存在は、直接の数字入力速度に大きな影響を与えますが、数字があることを知らない限り、そうでないと想定した方が安全です。 NumPadおよび直接の値入力なしで長期間使用するアプリケーションが有用であることが判明した場合、アプリケーションで仮想NumPadを作成できます。 1〜9の場合はYUI-HJK-BNMを使用し、ゼロの場合はOを使用すると、いくつかの繰り返しの後に機能します。この仮想NumPadのもう1つの配置は、より抽象的な感じがしますが、より滑らかな動きを生み出しますYUI-HJK-NM <です。これらはすべて、アメリカ人のQWERTYキーボードレイアウトを想定しており、他のレイアウトの大幅な再マッピングが必要です。検出が問題となる可能性があるため、ユーザーが仮想テンキーのバインドを微調整できるようにすることを強くお勧めします。
現在のソリューションの主な欠点の1つは、エントリ間を移動することです。 TABはおそらく機能しますが、キーボードの右側に対応するものが必要です。 ENTERに最適な仕事のようです
私の電話から応答したので、これが既に可能かどうかを確認できません：*キーボードのカーソルキーを使用して値を段階的に変更することをユーザーに許可します*。彼らが同時にシフトを押すことによって10倍大きなステップを作ることができるようにします。
アイデアのソース：Firefoxインスペクターで数値のccプロパティを変更してみてください。 :)
あなたのイラストは主にモバイルアプリで機能します。これは AngularのGMD選択ウィジェット に非常に似ていますが、コントロールの横ではなく（Z軸上で）コントロールの上に表示される点が異なります。
ユーザーが大量の数値情報を定期的に入力することを期待している場合、ユーザーはキーパッドを使用する傾向があります。これが事実である場合（いくつかの調査が適切である可能性があります）、以下を適用します。
1）数値入力：キーパッドを介して実行され、Enterまたはタブで次のフィールドに進みます（競合がない場合は、両方をサポートできます）
2）インクリメント：このモードでは数学的な操作がないため、キーパッド+/-および/またはカーソルup/dnでインクリメント/デクリメントを許可し、PgUp/PgDnでより大きなインクリメントを許可します。リストが開いていない限り、スクロールホイールによる値の変更を許可しないでください...ユーザーがページを下にスクロールしているときに、ユーザーが誤って値を変更する可能性があります。
これはどちらかまたは両方の解決策ではありません。すべてのユーザーの可能なデバイスとスキルレベルを考慮する必要があります。初心者はおそらく、アプリケーションでのスキルが向上するまでマウスを使用します。その時点で、より高速なものが必要になります。
私は間違いなく、各インタラクションに対して複数の方法をサポートします...キーボード、マウス、タッチなど、成功への複数のパスを提供することは良いことです。