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

【作成】2017/03/22   【更新】2019/05/28 

サインアップのフローやデータの入力インターフェースなど、フォームはデジタルプロダクト設計の最も重要なコンポーネントの1つです。
この記事では、入力フォームデザインにおけるUXを高めるための一般的なルールに焦点を当てています。
これらは一般的なガイドラインであり、すべてのルールに例外があることに注意してください。

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

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

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

ユーザーは入力データの左にラベルがあるよりも、データの上にラベルがある方が入力しやすいものです。上に配列されたラベルはモバイル上でも変換されやすくなります。

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

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

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

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

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

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

また、そもそもターゲットが日本人の場合は、英語表記より日本語表記の方が直感的に分かりやすいですよね!

5. 6項目以下の選択肢はすべて表示する

ドロップダウンの選択肢を選ぶためには2回のクリックが必要です。
もし5つ以上の選択肢があるのであればドロップダウンは避け、全ての選択肢をひと目でわかるように配置しましょう。
また、もし25以上の選択肢があるのならドロップダウンメニューの中にテキスト検索機能を組み込みましょう。

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

プレースホルダテキストをラベルとして使用することで、スペースを最適化できると考えがちですが、それは誤りです。ニールセン・ノーマン・グループのケイティ・シャーウィンが発表したように、ユーザビリティにおけるたくさんの課題を抱えています。

7.チェックボックスとラジオボタンを縦に配列する

チェックボックスが縦に配列されていると入力しやすくなります。

8.CTAに説明を加える

CTAはそれがどのようなアクションを起こすものなのか、明確に説明していると良いでしょう。

例えば、ユーザーからすると『送信』よりも『登録』の方が具体的に何が起こるか分かりやすいですよね!

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

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

10.入力途中でのリアルタイムアラート(バリデーション)は使わない

パスワードやユーザーネームあるいはメッセージといったユーザーのアカウントに関する情報を入力している間は、ユーザーに役立たない限りリアルタイムアラート(バリデーション)は使わないようにしましょう。

11.基本的なヘルプテキストを表示する

可能な限りどのスペースでも基本的なヘルプテキストは提示しましょう。複雑なヘルプテキストの場合は、重要入力事項は何なのかを明示した上で、入力データの横に配置することも考えてください。

12.現在のアクションと次のアクションをわける

次のアクションをわけるかどうかについては多くの議論があります。

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

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

入力項目の長さがフィールドの幅を決めます。電話番号、郵便番号といった入力される文字数が明確なフィールドにはこのルールを適用しましょう。

14.*ではなく任意表示を設ける

入力必須を表す*のようなフィールドマーカーが暗示する内容をユーザーが常に分かっているわけではありません。フィールドマーカーの代わりに、任意の表示を設けることで入力必須の項目がどこなのかを暗示しましょう。

『※』よりも『必須』や『任意』の方が、分かりやすいですよね!

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

ユーザーは表示画面を一つのものとして捉えるので、フォームが長くなると圧倒されてしまいます。
関連する項目ごとにグループ化することでユーザーはより早くフォームの塊が意味するところを理解することができるのです。

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

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

予測できないことをやりましょう。ユーザーの感情的な反応を引き出せるように会社のブランドを表現するのはデザイナーの役割です。もしこれがうまくいっていれば成功率はアップします。上記のようなルールがおざなりにならないようご注意ください。

この記事は、ユーザビリティと美しさが交わる点に焦点をあてたUIを構築するための大きな戦略の一部です。

翻訳元記事

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

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

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

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

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

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

15のルールは分かったけれど、自社サイトの入力フォームはどこから手をつければユーザの満足度があがるのか、とお考えではないですか?
まずはサイトユーザの実際の声を聞いてみることから始めましょう!
アンケートで選定したモニタ1名に実際に貴社サイトを使ってもらう簡易ユーザテストは初回無料でお試しいただけます。

【無料】ユーザテストExpress

・1分でスタートできる簡易リモートユーザテスト
・調査に合った本当のユーザを選定可能!
・利用者2,500人を突破!

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

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

 

制作会社を選びきれない方へ

「自分で制作会社を決められない!」という方は、「Web幹事」のようなプロが運営しているマッチングサービスを利用してみるといいでしょう。

Web幹事は実際にホームページ制作を経験したプロが、制作の相談から制作会社の紹介まですべて無料で行ってくれる、新しいサービスです。

ホームページ制作会社の依頼・相談・比較なら

・アドバイザーが予算×目的をヒアリング
・最適なホームページ制作会社を複数選定
・100社以上の仲介・マッチング実績あり

ポップくん

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



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

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


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

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