効果的なデザインを愛し、ユーザーのために戦います。Movementからの翻訳転載です。配信元または著者の許可を得て配信しています。Masks2618タイトルとURLをコピーWebフォームには、二つのタイプのデータ入力が存在します。特定のフォーマットが存在しないデータ入力(文字入力のみ)と、特定のフォーマットが存在するデータ入力(文字と記号によるもの)です。この二つのタイプを、同じように扱うことはできません。特定のフォーマットでのデータ入力を行う際、多くのデザイナーは「正しい入力をさせる」という責任をユーザーに対して負わせています。このことが、フォームのUXにおける大きな問題を引き起こします。フォーマットの「ゆれ」により内容を破棄してしまうユーザーはフォームにテキストを入力すると、それがフォーマット化されていないことに気付くでしょう。このときユーザーは、記号を入力した方がよいのかどうか、判断に迷います。このフォーマットの「ゆれ」により、ユーザーは不安を感じて、入力した内容を破棄してしまいます。特定のフォーマットで入力しようと決めたユーザーは、文字以外の記号キーを押す必要があります。タイプの量が増えると、エラーを起こす可能性も高くなります。このことも、ユーザーの気分を消沈させ、入力したものを破棄する更なる要因となり得ます。入力に関する制限が欠如していると、フォーマットの「ゆれ」が起こる。それだけではなく、そもそもどの記号を使えばいいのという表記ゆれもあります。ユーザーは電話番号を入力するのに、ハイフンを使うこともあれば、ピリオドを使うこともあるでしょう。日付に対しても、スラッシュやハイフンが使われるでしょう。どのフォーマットで記入するかがゆれていると、ユーザーにストレスを与えかねません。ユーザーはまた、データ入力が有効なのか無効なのか、判断がつきにくいと感じます。フォーマット化されていないと、間違いの修正をしにくくなるどのフォーマットを使うべきか分からず、記号を用いずにフォーム入力をするユーザーもいるでしょう。この点では、入力ミスをしてもそれを見つけにくく、修正しづらいという見落としがあります。フォーマットされていないために、入力ミスの修正がしにくくなっている。クレジットカード番号をハイフン無しで表示したら、見直しや修正はやりにくくなります。16文字もある長すぎる番号を、ユーザーは全て記憶してはいないでしょう。その代わり、ユーザーは入力内容をチェックするのに、カードに表記されている短い数字列を見て確認します。入力内容を見直すたび番号を探すのは非常に骨の折れる作業です。フォーマット化されていないと、全ての数字がつながって見えて、混乱を引き起こします。クレジットカード番号は、長い番号列を一行の中で入力する必要があるという点で、一層混乱を招きやすい事柄です。入力マスクによるフォーマットUXに関する問題を対処する最良の方法が、入力マスクを使ってフォームのフォーマットを規定するやり方です。入力マスクは、フィールドの中に自動的に、ユーザーが入力するための正しいフォーマットを挿入します。ユーザーは記号を入力する必要はありません。入力マスクを使ってユーザーの負担を軽減する。これでユーザーは、どのフォームを使えばよいか悩む心配がなくなります。フォーマットのゆれが排除され、入力内容の破棄を防ぐことができます。正しいフォーマットで入力したものを見ることができるので、入力ミスを簡単に確認し、訂正することも可能です。データフィールドには、特定のフォーマットをもつ入力マスクを適用すべきです。シリアルナンバーやクレジットカード番号などが挙げられます。まとめほとんどの入力フォームには、文字だけの入力が要求されますが、記号が合わせて要求される特定のフォーマットに対しては、特別な注意が払われるべきです。それらを軽視することなく、ユーザーがフォーマットを理解しやすいようにしましょう。データ入力に関する責任をデザイナー自身がもち、入力マスクを常に用いるようにして下さい。MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。