通貨のテキストボックスでフォーマットを強制するのはいつ良い考えですか？
通貨のみの場合は、テキストボックスの書式を設定することをお勧めしますか？ユーザーが小数点を含む不要な文字を入力しないようにします。
私が今持っているのはこれです。たとえば、ユーザーが50.25を入力する場合、次のようになります。
つまり、「5025」、「50.25」、「50,25」と入力するかどうかは関係ありません。 50 $を入力する場合は、「5000」や「50.00」などと入力する必要があります。
これはユーザーフレンドリー/直感的ですか？
私が正しく理解すれば、彼らは数字を左から右に1つずつ入力しなければなりません。次の理由により、これは不適切な対話設計です。
- これは最小の驚きの原則に違反します。ユーザーはテキストボックスを表示し、テキストボックスのように動作することを期待します。規約は理想的ではないかもしれませんが、それらを考慮に入れる必要があります。
- ユーザーが頭の中に持っているものと、画面に表示される前にユーザーがしなければならないことの間には多くの作業があります。ユーザーは数字をスキャンする必要があります頭の中で左から右へと順番に追加していきます。
- システムの状態がユーザーの希望に対応していません。3つのワイヤーフレーム（つまり、フローの3つの状態）では、価格はユーザーが達成したいこととは完全に異なります。最初は5セント、次に50セント、次に5ドルです。 5人がすぐにドルの列に入った場合、それは目標に近いでしょう。ユーザーが最初に50、次に50.20、次に50.25を作成する必要がある場合、それは論理的な計画です。最初は大きなものに焦点を当て、次に詳細を微調整できます。 5セントから5ドル、2セントから50.25に行くのは、目標に到達するための回り道です。
問題は固定小数点です。ただし、その間に開始するすべてが有効な（そしてしばしば奇妙な）値であることを意味します。自分で小数点を記入すれば、頭にあるヴァークを好きなようにタイプできます。
これらの場合の私の好ましい解決策は、ほとんどの入力を処理できるスマートインタープリターを用意し、値をどのように解釈しているかについて即座にフィードバックを提供することです。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
フィードバックは、テキストボックスがフォーカスを失うと表示され、ユーザーがテキストボックスの値を変更すると表示されなくなります。理解できる値には緑色のテキストを使用し、解析できない値には赤色を使用し、技術的には正当であるが期待される値から離れている値にはオレンジ色を使用します。
これにより、簡単に始めることもできます。特定の形式を使用して厳密に解釈するように強制し（指示を表示する）、ユーザーのフローでフィールドが重要であることが判明した場合はインタープリターを充実させます。通貨換算を自動的に行わせることもできます。
50 $を入力する場合は、「5000」や「50.00」などと入力する必要があります。
この質問はそれ自体が意味を成していると思います。このような書式設定の動作を実装しても、ユーザーの流れを妨げる可能性はありません。
予想される通貨形式の50 $の出力は、基本的に「50」と入力したときです。ユーザーが小数点を区切りたい場所に配置できるようにします。これは、この種のフォーマットに対してより自然で広く使用されているソリューションです。
通貨の入力は、誰もが異なるロケールと期待を持っているため、苦痛です。 （これは実際にはあらゆる種類の入力に当てはまります）。私が気に入っている解決策（これがどのユーザビリティ標準の良いベースでもないことを気に入っています）は、次の設定です。
間に小数点記号を付けて2つのボックスを表示する
+---------+ +-------+
$ | 0 0 | | 0 0 |
+---------+ . +-------+
ユーザーは最初のボックスに50と入力すると、$ 50を受け取ります。あるいは、追加の25を入力して$ 50.25を取得できます。入力は2つの整数値を入力するように単純に削減されているため、バリデーターとJavaScriptコードの処理は非常に簡単です。
重要なのは、ユーザーは通貨記号、小数点記号について心配する必要がなく、ロケールが異なっていても（たとえば、ドットの代わりにコンマを使用したり、金額の後に通貨記号を置いたり）、ユーザーは引き続き可能です。彼らが入ることになっているものを理解する。