フォームのデータ入力における表記ゆれを防止する方法

Anthony

UX Movementの著者、編集長。明快で効果的なデザインを愛し、ユーザーのために戦います。

この記事はUX Movementからの翻訳転載です。配信元または著者の許可を得て配信しています。

Why Formatted Data Fields Always Need Input Masks (2016-10-18)

Webフォームには、二つのタイプのデータ入力が存在します。特定のフォーマットが存在しないデータ入力(文字入力のみ)と、特定のフォーマットが存在するデータ入力(文字と記号によるもの)です。この二つのタイプを、同じように扱うことはできません。

特定のフォーマットでのデータ入力を行う際、多くのデザイナーは「正しい入力をさせる」という責任をユーザーに対して負わせています。このことが、フォームのUXにおける大きな問題を引き起こします。

フォーマットの「ゆれ」により内容を破棄してしまう

ユーザーはフォームにテキストを入力すると、それがフォーマット化されていないことに気付くでしょう。このときユーザーは、記号を入力した方がよいのかどうか、判断に迷います。このフォーマットの「ゆれ」により、ユーザーは不安を感じて、入力した内容を破棄してしまいます。

特定のフォーマットで入力しようと決めたユーザーは、文字以外の記号キーを押す必要があります。タイプの量が増えると、エラーを起こす可能性も高くなります。このことも、ユーザーの気分を消沈させ、入力したものを破棄する更なる要因となり得ます。

入力に関する制限が不足している結果、フォーマットの不確実性が起こる。

入力に関する制限が欠如していると、フォーマットの「ゆれ」が起こる。

それだけではなく、そもそもどの記号を使えばいいのという表記ゆれもあります。例えば、ユーザーは電話番号を入力するのに、ハイフンを使うこともあれば、ピリオドを使うこともあるでしょう。日付に対しても、スラッシュやハイフンが使われるでしょう。

どのフォーマットで記入するかがゆれていると、ユーザーにストレスを与えかねません。ユーザーはまた、データ入力が有効なのか無効なのか、判断がつきにくいと感じます。

フォーマット化されていないと、間違いの修正をしにくくなる

どのフォーマットを使うべきか分からず、記号を用いずにフォーム入力をするユーザーもいるでしょう。しかしこの点では、入力ミスをしてもそれを見つけにくく、修正しづらいという見落としがあります。

フォーマットされていないために、入力ミスの修正がしにくくなっている。

フォーマットされていないために、入力ミスの修正がしにくくなっている。

例えば、クレジットカード番号をハイフン無しで表示したら、見直しや修正はやりにくくなります。16文字もある長すぎる番号を、ユーザーは全て記憶してはいないでしょう。その代わり、ユーザーは入力内容をチェックするのに、カードに表記されている短い数字列を見て確認します。

入力内容を見直すたび番号を探すのは非常に骨の折れる作業です。フォーマット化されていないと、全ての数字がつながって見えて、混乱を引き起こします。クレジットカード番号は、長い番号列を一行の中で入力する必要があるという点で、一層混乱を招きやすい事柄です。

入力マスクによるフォーマット

UXに関する問題を対処する最良の方法が、入力マスクを使ってフォームのフォーマットを規定するやり方です。入力マスクは、フィールドの中に自動的に、ユーザーが入力するための正しいフォーマットを挿入します。ユーザーは記号を入力する必要はありません。

入力マスクを使ってユーザーの負担を軽減する。

入力マスクを使ってユーザーの負担を軽減する。

これでユーザーは、どのフォームを使えばよいか悩む心配がなくなります。フォーマットのゆれが排除され、入力内容の破棄を防ぐことができます。正しいフォーマットで入力したものを見ることができるので、入力ミスを簡単に確認し、訂正することも可能です。

データフィールドには、特定のフォーマットをもつ入力マスクを適用すべきです。時間や日付、電話番号、郵便番号、社会保険番号、シリアルナンバーやクレジットカード番号などが挙げられます。

編注:上記の実装には formatter.js などを試してみて下さい。

まとめ

ほとんどの入力フォームには、文字だけの入力が要求されますが、記号が合わせて要求される特定のフォーマットに対しては、特別な注意が払われるべきです。それらを軽視することなく、ユーザーがフォーマットを理解しやすいようにしましょう。データ入力に関する責任をデザイナー自身がもち、入力マスクを常に用いるようにして下さい。