入力フォームのデザイン・UXを高める15のルールを徹底図解!

【作成】2017/03/22   【更新】2019/08/19 

サインアップ画面やデータ入力画面の「フォーム」は、サイトやアプリ設計において最も重要な要素の1つです。

本記事では、入力フォームデザインのUXを高める15のルールをご紹介します。


※この記事はuxdesign.ccの記事を許可のもと翻訳・編集したものです。
翻訳元記事:Design Better Forms (2016/7/5)
著者:Andrew Coyle

入力フォームのUXを高める15のルール

1.フォームは縦一列配置にする

入力は通常、垂直方向が自然です。
入力行が横に複数列配置されると、ユーザは入力しづらく感じます。

2.ラベルは入力データの上に配置する

入力欄のラベルは、左横よりもデータの上に配置したほうが、入力完了率がはるかに高くなります。また、モバイル上でレイアウトが崩れにくくなります。

ただし、変数オプションのある大量のデータを入力するフォームの場合は、左配置のラベルがおすすめです。ラベルを上部に配置する場合より行数が少なくなり、一度に入力しやすくなります。

3.ラベルと入力データはグループ化する

ラベルと入力データは寄せて配置しましょう。フィールド間には十分な間隔をあけることも忘れずに。そうすればユーザーが混乱せずにすみます。

『15.関連情報ごとにグループ化を』もあわせて読むと、より理解が深まりますよ!

4.すべて大文字での表記は避ける

大文字だけの表記は読みづらく入力がしにくいです。

そもそも、日本人向けのサイト・アプリでは、英語表記より日本語表記の方が直感的に分かりやすいのが当然です。デザイン性を優先して英語表記を必要以上に増やすことは原則避けましょう。

5. 選択肢が5個以下ならすべて表示する

ドロップダウン(プルダウン)リストは、隠れている選択肢を表示するために1回、選択するために1回、と2回のクリック/タップが必要です。
選択肢が5以下の場合は、全ての選択肢をひと目でわかるように配置しましょう。
選択肢が非常に多い場合(25以上)は、ドロップダウンメニューの中に予測検索機能を組み込みましょう。

6.プレースホルダテキストをラベルとして使わない

プレースホルダテキストとは、ユーザがテキストを入力するまでの間、入力フィールド内に表示されている説明文のことです。

このプレースホルダテキストをラベルとして使用することで、スペースを最適化できると考えがちですが、それは誤りです。

何の情報を書き込むべきだったか入力中に確認することができないため、入力内容をチェックしたり、エラーが出た時に書き直したりしにくくなります。特に、視覚にハンディキャップを抱えるユーザや認知症患者にとってUXを著しく損なうなど、ユーザビリティの観点で多くの問題があります。
(出典:“Placeholders in Form Fields Are Harmful” by Katie Sherwin from Nielsen Norman Group

7.チェックボックスは縦に配列する

複数の項目を選択させる場合には「チェックボックス」(四角のボックス)が使用されます。ひとつの項目のみを選択させる場合は、「ラジオボタン」(丸いボタン)が使用されます。

チェックボックス、ラジオボタン、いずれも縦に配列することでチェックしたかどうかの視認性がよくなり、入力しやすくなります。

8.CTAは、「どんなアクションにつながるか」が分かる表現にする

CTA(Call To Action)とは、サイトを訪れたユーザを具体的な行動に導くボタンやリンクを指します。

CTAは、どんなアクションを起こすのかがはっきりわかる表現にしましょう。
例えば、『送信する』よりも『登録する』の方が、具体的に何が起こるかユーザにとってわかりやすい表現です。

9.エラー表示はインラインで

エラーになっている箇所とその原因は、インラインでユーザに示しましょう。

10.入力途中でのリアルタイムアラートは使わない

パスワードやユーザネームの作成中や、文字数制限のあるメッセージなどの入力の途中で「無効なアドレスです」「文字数が超過しています」などのリアルタイムアラート(バリデーション)を出さないようにしましょう。ただし、アラートを出すことがユーザーのメリットになる場合を除きます。

11.ヘルプテキストは表示する

基本的なヘルプテキストはできるだけ表示しましょう。
ヘルプテキストの内容が込み入っている場合は、重要事項だけでもいいので入力データの横に配置します。

12.プロセスを進めるためのアクションと、そうでないアクションをわけて提示する

ユーザに次にとってほしいアクションのためのボタン(「登録する」)を、とってほしくないアクションのボタン(「キャンセルする」)より目立たせるかどうかについては、意見が分かれます。

※次に起こしてもらいたいアクションを明確にすることで、離脱原因となるユーザーの迷いを減らせるという考え方もあります。

13.入力フォームの幅を適切に

入力項目の長さとフィールドの幅をそろえます。
電話番号や郵便番号など、入力する桁数が決まっている場合はこのルールを適用しましょう。

14.「*」ではなく「任意」と表示する

「入力必須」を「*」のようなマーカーで示すことがありますが、この「*」が何を意味するか、ユーザが必ずしも理解するとは限りません。「*」の代わりに、入力が任意のフィールドには「任意」と明記しましょう。

15.関連情報ごとにグループ化を

多くの項目を一気に見せられるとユーザはフォームの長さに圧倒されます。
関連する項目ごとにグループ化することで、ユーザはフォームの内容をより早く理解することができます。

その情報、ユーザがわざわざ入力する必要ありますか?

「任意入力」の項目は、項目自体を削除し、他の方法でデータを集めることができないかを検討しましょう。
推測が可能な項目ではないか、別の機会で聞けばよい項目ではないか、それとも完全に無くしてしまってよい項目か、ということを常に自問しましょう。

データエントリーは自動化の一途をたどっています。例えば、モバイル機器やウェアラブル機器は、ユーザが無意識のうちに膨大なデータを集めています。入力フォームを作成する際には、チャットボットのような会話型UIやSMS、メール、音声入力、OCRによる文字の読み取り、現在地認識機能、指紋認証や生態認証などの活用も検討してみましょう。

フォームデザインにも楽しさを

人生は短いのです。誰もフォームを機械的に埋めることで時間を費やしたくはありません。対話しているかのような画面にしましょう。それも愉快なものに。ユーザの気持ちを徐々に惹きつけましょう。

誰も思いつかなかったことをやってみましょう。デザイナーの役割は、会社のブランドを表現してユーザの心を揺さぶることです。ユーザの気持ちをうまくつかめば、フォーム入力の完了率はアップします。上記のようなルールがおざなりにならないよう、留意してみてください。

無料ダウンロード:入力フォーム チェック項目59

本記事に取り上げた視点だけでなく、5,000調査以上のユーザテストや、UI専門家の過去知見から、入力フォームにおける59のチェック項目を整理しています。入力フォームのチェック項目59の無料ダウンロードはこちらからどうぞ!

入力フォームのチェック項目59

・数千回のユーザテスト経験や業界知見を集約!
・ユーザビリティの3つの分類に課題をカテゴライズ
・各項目毎に詳細なチェック理由を記載

入力フォームの課題はユーザテストで洗い出し!

15のルールは分かったけれど、自社サイトの入力フォームはどこから手をつければユーザの満足度があがるのか、とお考えではないですか?

入力フォームの課題発見には、実際のユーザの意見が非常に有用です。初回無料の「ユーザテストExpress」なら、ポップインサイトの登録モニタから、貴社サイト・アプリの実ユーザに近いモニタを選定。貴社の入力フォームを使用中の動画を数日で納品いたします。ぜひお試しください!

【無料】ユーザテストExpress

・会員登録フォームや購入フォームでの実績多数!
・準備1分!すぐに始められて数日で動画を納品。
・フォーム入力しながら気づいた点を発話できるモニタなので課題点がよくわかる!

Twitterで、UI/UXの最新情報やTipsを配信中!

Twitterで、フォームの改善Tipsも含め、ユーザビリティやUXに関する最新知見・海外の情報・独自リサーチ結果などを配信中です。ぜひこちらからTwitterをフォローしてください。

 

ポップくん

株式会社ポップインサイトの公式キャラクター、ポップくんです。ユーザビリティやユーザテストをはじめとして、Webマーケティング全般にわたり、皆様に役立つ情報を発信してまいります。



【無料お試し可】ユーザテストExpress

準備時間わずか1分、最短翌日に結果が分かる、超手軽なリモート・ユーザテスト。Webマーケティング初心者でも成果が出せる!


【人気】UXリサーチャを貴社チームに!!

「UX改善したいけど人がいない」「CVR改善が伸び悩む」「社内で育てられない」というチームに最適!UXリサーチャとリサーチツールをセットで提供!