ユーザーを離脱させない電話番号の入力フォームとは

Anthony

UX Movementの創立者、ライター。ユーザーに優しいUXデザインのスキルを読者の方が上達できるよう、UX Movementのブログを始める。

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

Bad Practices on Phone Number Form Fields

電話番号入力フォームは、生年月日入力フォームと並んでくせ者です。たくさんのフォーマットがあり、どの入力方法が正しいかを見分けにくいことがよくあります。国番号を入力すべきか否かさえよくわかりません。

適切な入力フォーマットを判別できないと、ユーザーは電話番号入力フォーム以外の項目も入力内容が不適切なのではと不安になります。電話番号入力フォームでエラーがでると、フォーム入力自体を放棄してしまうかもしれません。

どのフォーマットが正しく、どのフォーマットでエラーが出るのかを、ユーザーが入力時に困惑しないように伝えるべきです。もしユーザーが困惑するようあればユーザー体験が乏しいということなので、デザインし直す必要があります。入力フォーム改善のためには、ここで紹介する悪い例を避けて良い例に従ってデザインしましょう。

わかりにくいフォーマット

デザイナーの中には、電話番号の入力フォーマットはなんでもよいと考えている人もいます。これならエラーが出ることはありませんが、どのフォーマットで入力すべきかわからないというユーザーの不安は取り除けません。


どんなものであれ不安を持つと、ユーザーはフォームに対する評価を下げてしまいます。彼らが適切な電話番号入力フォーマットを確信できることが大切です。そうでなければ入力が有効なのか不安になってしまうのです。

このフォーマットでは、国番号を入れる必要があるかどうかもよくわかりません。必要ないにも関わらず誤って国番号を入力したら、エラーが出てしまいます。

非効果的なフォーマット

最適な入力例をテキストフィールドに示せば、問題は解決すると考えているデザイナーもいます。入力例を見るだけで、ユーザーが有効なフォーマットで番号を入力すると信じているのです。

しかし、ユーザーは入力例に気づいても結局その通りに入力しないことがわかっています。ある研究では、「89%の被験者は例とは異なる電話番号フォーマットで入力した」ことが示されました。

ほとんどのユーザーが無視するのですから、フォーマット例を出しても意味はありません。結局間違ったフォーマットで入力してエラーになるのです。また先述の研究では、エラーは入力作業の放棄を助長することもわかっています。

難しいフォーマット

フォーマットの問題を解決するには、番号の連なりを分割すればよいと言うデザイナーもいます。アメリカの電話番号向けであれば、3つの入力フォームに分かれます。このやり方ならば適切なフォーマットで入力でき安定的ではあるものの、アメリカ人ユーザーにしか当てはまりません。

アメリカ国外のユーザーは、これとは異なる電話番号のフォーマットであるため上手く入力できない可能性があります。1つの国だけに合った入力フォームは、国際的なユーザーに優しくありません。

また分割されたフォームは、モバイルから利用するユーザーにとっては入力しにくいでしょう。ユーザビリティテストでは、ほとんどのユーザーにとって「モバイルで、異なる入力フォームに移動するのは難しい」ことがわかっています。このフォームでは入力を訂正するときにも手惑ってしまいます。

簡単なフォーマット

ベストな入力フォームは、電話番号のフォーマットや国番号をユーザーに考えさせることなく自動的に表示するものです。

ジオロケーションマスキングを使って入力を自動フォーマット化したものが、もっともよい電話番号入力フォームです。ユーザーが電話番号を入力するのに沿って、彼らなにも意識しなくても自動で適切なフォーマットを表示しましょう。

このフォームなら、カッコやハイフン、スラッシュやピリオド、スペースなどを打つ必要がなくただ入力するだけで済みます。またここでは、数字以外の文字が入力されたときにエラーを出す制約を設けます。

ジオロケーションを活用しユーザーのいる国を判別することで、どんな国からのユーザーにも対応して自動で電話番号をフォーマット化できます。またこれによって、国番号を入力する手間も省けます。ユーザーは少ない労力で入力することができ、フォームの価値も上がるでしょう。

国番号を入力する必要がないことを伝えるために、国番号を電話番号の横に表示してください。入力フォームの中に国旗マークを表示するとわかりやすいでしょう。

現在地とは異なる電話番号を入力したいユーザーのために、国番号の変更も可能になっています。国旗マークをクリックすることで、他国の国番号がドロップダウンメニューで表示します。

ユーザーに考えさせない

ユーザーはフォーム入力時にはなにも考えたくありません。なるべく早く入力を終えたいのです。正しいフォーマットを考えながら電話番号を入力することは、彼らに認知負荷をかけます。入力を自動フォーマット化し彼らの負担を軽減しましょう。

電話番号入力フォームのデザインを変えれば、ユーザーが入力を放棄することを防ぎフォームの評価も高まります。良い例に従ってフォームをデザインし、ユーザーが考えなくても済むようにしましょう。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて

イベント