2016年6月9日 デザイン

【保存版】スマホサイトの入力フォームで成果を出す10のテクニック

こんにちは。アイスリーデザインでスマホサイトのデザインを担当している武本です。弊社では大手ECサイトのスマホサイトのデザインを作成することがもっとも多いです。

そこで重要なのが登録・入力フォーム。

登録をしてもらうのはもちろんの事、入力してもらった情報はデータとしても非常に重要。是非とも入力してもらいたい所ですよね。僕が普段、フォームページをデザインする際に「どうしたら登録してもらえるのか」、「どうしたら入力しやすいのか」を考え、気をつけている10個のポイントを紹介したいと思います。
 
 

1.文字はできるだけ少なくする

スマホ画面に同じような言葉がたくさん詰まっているのは、そのページを見るだけでページの第一印象が「入力が面倒くさそう…」になってしまいます。ユーザーにそう思われてしまうと絶対に登録してもらえません。文言の重複は可能な限り避け、文章は徹底的にシンプルにしましょう。

例えば、ラベルに「電話番号」と表示があり、その下に「電話番号を入力してください」という説明が入っている場合は、ラベルだけにします。
 
 

2.入力する項目は少なくする

登録フォーム・問い合わせフォームどちらにせよ、これが一番重要です!
登録する項目が多ければ多いほど、ユーザーに嫌われます。フォーム入力が好きなユーザーは、いません。
 
suumo
 
 

3.不要なものは閉じておく

文字が多い、項目が多いのと同じで、ページに遷移した時に見えていなくて良いものは閉じておきましょう。例えば、休暇中の連絡先が違う時などに、別の連絡先を入力する場合は、最初は入力欄を閉じておきましょう。使う人が「休暇中の住所/連絡先」にチェックを入れると開くようになります。
 
car
 
 

4.縦方向の配置する

要素を左右に配置すると、スマホ画面で見づらくなるだけでなってしまいます。また、目線が左から右にジグザグに動くことになる為、実際以上に項目が多いと感じさせてしまいます。要素は縦方向で配置するのがベターです。
 
4
 
 

5.プレースホルダーを使う場合は、ラベルが見えるよう、ひと工夫。

最近、よく見かける入力フォームの中に「placeholder」で文字をフォームのラベルを表示するもの。一度ユーザーが文字を入力してしまうと、そのあとに何を入力する場所だったかわからなくなってしまいます。
「placeholder」を使う場合は、入力した文字が削除したら、フォーム内に表示されているラベルがもう一度見えるようにしましょう。
 
5
 
 

6.項目の多い時はラジオボタンではなくプルダウンにする

選べる項目が一つだけなのなら、プルダウンにまとめましょう。ラジオボタンがたくさん並んでいるのは見づらい上に、ページに遷移した際に、「こんなに選ばなきゃいけない項目があるんだ….」という気持ちにさせられます。
 
se
 
 

7.郵便番号や電話番号のフォームはハイフンで区切らない

郵便番号や電話番号が一つの入力フォームになっている場合に、説明に何も書いていないと「ハイフンなし」か「ハイフンあり」なのかがユーザーはわかりません。普通であれば、ハイフンは入力したくないですよね。

では、どうすれば良いかというと、

<パターン1>
郵便番号の場合:入力フォームを2つに区切り間にハイフンを表示しておく。数字キーボード(input type=”number”) にすれば、「>」を使ってカーソルを送ることができます。

電話番号の場合:入力フォームを3つに区切り間にハイフンを表示しておく。数字キーボード(input type=”tel”) にすれば、「>」を使ってカーソルを送ることができます。
 
7
 
キーボードの設定まできちんとできているフォームはまだまだ少ないのが現状です。
ここまで配慮できていると「使いやすいな」という印象をユーザーが持ってくれることでしょう。

<パターン2>
フォームを分けずに一つにする場合は、ハイフンの有無を必ず表示し、数字のキーボードの設定を必ずしましょう。
 
 

タップエリアは十分に取る

フォームに限らずですが、タップエリアが小さいのは非常に使いづらいです。
Googleのガイドラインでは、タッチターゲットのheightは最低48dp、ラベルとフォームの間のマージンは、最低でも8dpとりましょう、と記載があります。

個人的には、レイアウトの感じによっては40~44dpくらいでも、タップするには十分なサイズだと思います。
 
 

8.フォームの最初から、内容確認ボタンまでは1〜2スクロール以内に収める

項目の多いフォームだと、「いつまで続くんだろう…?」と不安になりますよね。また、エラーがあった時にどこを直せばいいのかがすぐにわからないという問題もあります。フォームの最初から内容確認ボタンまでは、できたら画面内に収まるように。それが難しくて1〜2スクロール以内に収めるのが、ベストです。
 
 

9.エラーメッセージは、一番上と該当の修正箇所、両方に出す

エラーメッセージは、ページの一番上に出るだけだと、テキストを読まなければいけません。具体的にどこを修正すべきか、視覚的にわかることが重要です。電話番号を間違えたのであれば、電話番号のフォーム部分に赤い色がつくなど、視覚的にどこを間違えているのかをユーザーに伝えましょう。
 
9
 
入力項目が多くページが長い場合、エラーを表示する時はページの一番上に戻るようにしましょう。アカウントを作る、または内容を確認するボタンをタップしても、同じ箇所が表示されていると、ユーザーには何が起きたか伝わりません。

また、入力したその場で1項目ごとに、すぐにエラーを出す方法もあります。
 
9
 
 

10.SNSアカウントで登録・ログインできるようにしておく。

GoogleアカウントやFacebookアカウントでのログイン、自動入力は必須といっても過言ではないです。(もちろん、そのサイトの特性にもよりますが。)それ以外のアカウントだったり、そもそも自動ログインがないだけで「めんどくさいから後で…」とユーザーが離脱する原因にもなります。
 
103
 
 

最後に…ちょっとした遊び心

どんなに頑張ってフォームを入力しやすくしても、結局は「フォーム」です。ユーザーにとってはできたら省略したいもの。
そんなフォームでも楽しく入力ができるような小さな遊び心が加わると、とってもいいのではないでしょうか。

例えば、チェックボックスやサブミットボタンのデザインをちょっとカラフルにしてみるとか。文字を入力する時のインタラクションをちょっと凝ってみるとか。エラーメッセージを親しみやすくするとか。(「電話番号が間違っています」だけだとちょっと落ち込みますよね。)
 
アリババ:サブミットボタンが横スライドなのが面白いですね。誤タップ防止になりそうです。
 
10-2
 
 
Spaicebox:説明テキストがフレンドリーでいいですね。
 
10
 

プレースホルダーのラベルが、文字入力とともにふわっと入力した文字の上に表示されます。デモはこちら

面倒だと思っていた入力作業が楽しくできるようになって、世界がちょっとだけ明るくなるといいですね。皆様の参考になったら嬉しいです。

 
 

TakemotoTakuya

t.takemoto

UI/UXデザイナー 美術大学を卒業した後、居場所を探してヨーロッパに行くも、居場所は見つからず帰国。その後すぐにアイスリーデザインに拾われ、今に至る。

この記事をシェアする