フォームのユーザビリティを改善するための30の方針(海外情報)

本日は久しぶりに海外記事より、フォーム改善のTips集をご紹介したいと思います。

今回紹介するのはuxforthemasses.comに投稿された「How to improve the usability (and conversion rate) of your forms(=あなたのフォームのユーザビリティ(そしてコンバージョンレート)を改善する方法)」と題する記事です。

取り上げられていた内容のなかには、以前このフォームでも話題にしたテーマと重なる部分もありましたので、該当箇所については一部過去記事へのリンクをつけながら紹介していきます。
よろしければあわせて参考にしていただければと思います。

デザイン

フォームはできるだけ短く、簡単に

EFOの基本ですね。余計な入力項目は極力消し、簡潔なフォームに近づけるところからフォーム最適化が始まります。

ユーザーに余計なことを考えさせない

ユーザーが考えこんでしまうような複雑な質問設計はせず、かんたんに解答できるものだけをフォームには用意しましょう。

スタンダードな形をとる

多くのユーザーがこれまで何度もフォーム入力を行っています。フォームは奇抜な形にしないこと。オーソドックスなデザインにユーザーは慣れています。

あらかじめユーザーに予測させる

フォームがどのくらいの長さか、どんな情報入力が必要かをユーザーが訪問の段階でうかがい知れるようなつくりにしておくと親切です。
例えばガイドやフローの設置や必須マークの表示、ファーストビューに収める施策などが該当しそうです。

フォーム最適化3ステップその1:直帰を減らすために有効な7つのTips
https://f-tra.jp/blog/howto/1

レイアウト

複雑なフォームは細かく分割する

複雑なフォームは無理に1画面に収めようとせず、複数のチャンクに分割すると良いと筆者は述べています。

ユーザーの進歩を表示する

あと画面がいくつあるか、ユーザーがフォームの全体像と現在地を知るためにフロー画像でのステップ表示やパーセンテージ表示などを行いましょう。

パーツ別・勝手にEFO比較分析【フロー表示】を集めてみました編
https://f-tra.jp/blog/compare/1702

ざっと見やすくする

ぱっと見ただけで入力箇所が明らかになるように、余白、ヘッダー、その他のグラフィック要素をシンプルに見せる工夫が必要です。
また見出しは簡潔に表示し、何を入力すれば良いかがすぐに理解できるようにしたいですね。

ファーストビューを制するものはEFOを制す!スクロールを減らして直帰を防ぐ最新テクニック3選
https://f-tra.jp/blog/column/1312

段階的に情報を開示する方法を利用する

たとえば「その他」を選んだ場合のテキストエリアなど、入力内容によっては、項目が必要に応じて表示されるように設計しておくことが理想的です。

直帰&入力途中離脱に効果アリ!項目数を少なく見せるEFO小ワザ3選
https://f-tra.jp/blog/column/2637

ラベル

ユーザーが理解しやすい用語と名前を使用

ラベルには難しい言葉や選本用語など、ユーザーがスムーズに理解しにくいワードを選ばないように気をつけましょう。

わかりにくい表現になっていませんか?ラベル文言をわかりやすくするコツ!
https://f-tra.jp/blog/column/2641

簡潔でわかりやすいラベルを使用

また、わかりやすいからといって長すぎるラベルは禁物です。
簡潔なラベルに説明を添えるような形が理想的です。

入力欄の横に配置する

入力欄から離れて配置されればされるほど、照合する手間が生まれます。できるだけラベルが入力欄のそばに配置したいですね。

視線の移動を極力なくせ!すぐに使える簡単フォーム改善テクニック6選
https://f-tra.jp/blog/column/4763

必須と任意を区別する

どこが必須でどこが任意かを明らかにすることによって、ユーザーは最低限の作業量をあらかじめ知ることができます。
ただし、入力数が1~2種類のログインフォーム等には必要ない場合もあると筆者は述べています。

EFOで気をつけたい!必須項目と任意項目のわかりやすい表示方法
https://f-tra.jp/blog/column/2639

入力

適切なコンポーネントを利用する

入力内容に応じた入力コンポーネントを利用しましょう。例えばセレクトボックスとラジオボタンなどの単一選択のフォームは選択肢の量によって使いわけるべきです。

その選択肢、大丈夫?フォームでプルダウンメニューを使う際に気をつけたいこと
https://f-tra.jp/blog/column/2960

また、テキストボックスの大きさも入力する内容に応じて変化させるべきです。

快適なテキストボックスを作る、たった5つの条件
https://f-tra.jp/blog/column/3070

論理的な順序に配置する

入力の順番は重要です。名前を最初に尋ねる、似た情報をグルーピングするなどで違和感のない順番に設計してください。

順番を変えるだけで成績アップ!?フォームの1つ目に[OK][NG]な項目とは?【EFO】
https://f-tra.jp/blog/column/2404

適切な初期値を用意する

ユーザーの大半が同じ解答を行うような設問については、あらかじめ初期値を入力しておくと多くのユーザーの手間を省くことにつながります。
ただし誤った内容を送信するリスクもありますので注意が必要です。

適切な【フォーム項目の初期値】設定で、ユーザーの入力を楽にするコツ
https://f-tra.jp/blog/column/2651

選択肢式の設問は、順番とグルーピングを考慮

セレクトボックスの選択肢の数が多い場合、よくある答えを頭出ししたり、アルファベットや50音順に並べておく、グルーピングするなどの工夫でユーザーが該当の選択肢を見つけやすくなります。

【番外編】勝手にEFO比較分析「選択肢の多いセレクトボックス」集めました(航空券予約サイト・11社)
https://f-tra.jp/blog/compare/4624

入力形式を柔軟にする

例えば電話番号や郵便番号のハイフンの有無でエラーとなることは非常にストレスです。
どちらの形でも入力を受け付けるのが親切です。

タブ移動を許可する

タブキーと使って入力項目間を移動することは、スピーディーなフォーム入力には欠かせません。
スムーズに利用できるようにメークアップしておきたいですね。

ヘルプ

一般的な疑問や質問に対応する

おすすめは、入力フォーカスのある間にヘルプテキストを表示するやり方です。
なおかつさらに詳しい情報照会できるウィンドウなどを用意すると理想的です。

適切な【補足文】があれば、フォームはもっと使いやすくなる!
https://f-tra.jp/blog/column/2646

簡潔で理解しやすいヘルプテキストを保管してください

ヘルプでは、当然ながら平易なワードを使い、簡単に理解ができるような内容を心がけてください。

つい使っていませんか?フォームでありがちな、伝わりにくいワーディング12選
https://f-tra.jp/blog/column/4859

エラー

すべてのエラーをハイライト

エラーがある箇所にはすべて強調表示を行いましょう。エラーのある入力欄のそばにエラーメッセージを表示することも心がけたいですね。

海外EFO情報:すぐ使える!エラーメッセージを効果的に表示する6つのポイント
https://f-tra.jp/blog/overseas/4454

明確な、実用的なエラーメッセージを使用

エラーメッセージの内容は、できるだけ具体的に伝えると親切です。どのように修正すればよいかも含めて伝えられると完璧です。

フォームのエラーメッセージには、ネガティブな言葉を使わないように注意
https://f-tra.jp/blog/column/5995

リアルタイムの検証を使う

ボタン押下時ではなく、入力したその場でエラーを知らせる機能があると、よりユーザーのストレスを軽減することができます。

フォーム最大の関門<エラー表示>のストレスを軽減する基本施策
https://f-tra.jp/blog/column/1058

アクション

明確に目立たせる

フォームのアクションボタンはページ上で目立つように表現しましょう。
戻るボタン等他のボタンと表現を差別化するのも手です。

【EFO施策】フォーム最適化・最大の要<送信ボタン>を攻略する、9つの掟
https://f-tra.jp/blog/column/1862

フィードバックを用意する

ユーザーのアクションに対し、プログレスバーなどの表示したり、ボタンの色を帰るなどのフィードバックを用意してください。
多重送信を防ぐ効果もありますね。

トラブルの元!意図しない【重複送信】を事前防止する購入フォームの改善施策
https://f-tra.jp/blog/column/4446

途中で保存可能にする

複雑で長いフォームは、フォーム入力の途中で入力内容を保存できるようにしておくのもユーザーの入力完了を助けます。

リセットボタンを用意しない

リセットボタンはユーザーが誤って押下してしまうことにつばがりますので、できるだけ配置しないようにしたいですね。

リセットボタン・キャンセルボタンはフォームコンバージョンの敵
https://f-tra.jp/blog/column/4761

その他の考慮事項

アクセシビリティに配慮する

例えば音声読み上げ機能への対応や、色彩の選び方など、可能な限り多くの人が問題なくフォームを送信できるように配慮することが重要です。

ユーザビリティテストを実施

実際にどのようにユーザーにフォームが使われているのかをテストすることは重要ですね。

解析のためのセットアップ

コンバージョン率など、重要な指標を計測するためのセットアップ、タグの埋め込みなどはきっちり行っておきたいですね。

最後に

いかがだったでしょうか。本日は海外記事よりフォームのユーザビリティを改善する30個の方針についてご紹介しました。ぜひEFOを進める上で参考にしてみてください。
当記事ではあくまで概要のみのご紹介としましたので、気になった箇所については元記事(英語)もぜひご参照ください。

参考記事:How to improve the usability (and conversion rate) of your forms – UX for the masses

この記事が気に入ったら
いいね!しよう

UI改善ブログの最新情報をお届けします

エフトラEFO機能アイコン

UI改善ブログを運営する株式会社エフ・コードでは
UI改善の基本施策を簡単に実施できる「エフトラEFO」「エフトラCTA」を開発しています。

エフトラEFOサイトへ エフトラCTAサイトへ

UI改善ブログ by f-tra の購読

当ブログの更新情報は以下の各種アカウントから購読できます。

メールマガジンを購読する

ブログの更新情報やセミナーのお知らせなど、
UI改善に関する情報を1~2週間に1回お届けします。

メールアドレスを入力

 購読解除はいつでも可能です