この記事を書いた人
- 松森デザイナー（ビジネス・アーキテクツ）
新卒から数々のデザイン制作会社を経て大手企業や中小企業の広告、パッケージ、SPのグラフィックデザインを担当。 2021年にBAに入社。グラフィックの経験をもとに現在はWEBデザインに努めている。
フォームには、お問い合わせフォームや登録フォーム、注文フォームなど目的に応じてさまざまな種類があります。使いにくいフォームはユーザーに負担をかけ、サイトやアプリからの離脱率を高める要因になってしまいます。
そのため、あらゆるユーザーにも理解しやすく、使いやすいUI/UXが非常に重要です。この記事では、入力フォームのデザインでユーザビリティを高めるポイントを紹介します。
なぜ入力フォームデザインが大事なのか
フォームには、「お問い合わせフォーム」、「申し込みフォーム」、「注文フォーム」など、目的に応じてさまざまな種類があります。いずれもユーザーとお客さまとの間でコミュニケーションをとるために欠かせない重要な機能です。
そのため、フォームを設置する際には、入力時のストレスや混乱を軽減する工夫が求められます。ユーザーが「スムーズに進まない」「入力が面倒だ」と感じると、途中で離脱してしまい、結果としてコンバージョンの低下につながります。最終的には、ユーザー獲得の機会を失う可能性もあります。しかし、使いやすいUI/UXを実現することで、離脱を防ぎ、コンバージョンの向上につなげることができます。入力フォームの設計やデザインは、ユーザー体験を大きく左右する重要な要素となるのです。
入力フォームのUXを高める改善例
入力フォームデザインは一見するとテンプレート通りの単純作業に思われがちですが、デザイナーが考慮するポイントは意外と多くあります。Business Architects（以下、BA）では、他社サイトを調査したり、自ら実際にユーザー目線で体験したりすることで、使いやすいと感じた入力フォームの構成や考え方を参考にし、提案に活かしております。また、ユーザーテストを実施し、ユーザー目線で改善が必要な点を洗い出したり、逆に評価されている点を見つけてサイト全体のコンバージョン率の改善効果も狙っていきます。
BAでは、お客さまが抱える課題や要望に合わせ、入力フォームの改善をご提案しています。本章では、入力フォームのUXを向上させる6つの改善項目を、実際の「E社の口座開設」の事例をもとにご紹介いたします。
1：入力項目は最低限にする
入力項目は最低限の数にしましょう。入力項目が多くなるほど、ユーザーの集中力が低下し、入力ミスが増えることにつながり、離脱率が高まります。
そのため、最低限必要な情報は何かを明確にし、選択項目の数を減らすことが重要です。ユーザーの離脱率を防ぐためには、これが大切です。
しかし、今回のケースでは、現行サイトの入力項目を流用したいとのことなので、項目数を減らすことが難しいケースでした。
そこで、私たちは項目数を減らすことなくプルダウン機能を活用することで、ページを短くすることでユーザーのストレスを軽減することを目指しました。
2：情報をグループ化する
すべてのラベルと入力欄の間隔が均等だと、適切な回答欄を一目で把握しにくくなります。
また、設問が単調に続く印象を与え、場合によっては「入力が手間だ」と感じる人も出てきます。そのため、ラベルと入力欄は等間隔に配置するのではなく、入力欄の近くにラベルを設置したり、視覚的にグループであることがわかるようにしましょう。
例えば、情報を下記の通りグループ化します。
- 個人情報
- 氏名・電話番号など
- 関連情報
- 問い合わせ内容、アンケート項目など
このように、共通点をもった情報同士をグループとしてまとめて整理することで、ユーザーの認知負荷を減らし、より読みやすい形にします。また、フォームのレイアウトもスッキリした印象になり、ユーザー離脱を回避しやすくなります。
3：「必須項目」と「複数選択可」をわかりやすくする
ユーザーが最低限どこを入力すればよいかわかるよう、「必須項目」や「複数選択可」のラベルを付けて、わかりやすく表示します。
例えば「*（アスタリスク）」はフォーム上で「必須」を示す一般的な記号として、多くのユーザーに認識されています。しかし「*」を使用すると、全体的に見やすくなる一方で、アクセシビリティの観点から音声読み上げ時には、アスタリスクと表現され、必須であるということが伝わりません。このように、一部のユーザーには情報が正しく伝わらないことになります。そのため、「必須」とラベルを併用する方がより親切です。
4：入力ステップの明確化
ユーザーに入力ステップを明示し、どの程度の労力がかかるかを予測できる状態にしましょう。ステータスバーを設置することで、ユーザーは進捗状況を常に把握でき、完了までの道のりがどれくらい残っているか視覚的に確認できます。これにより、ユーザーのモチベーションを維持させる効果が期待できます。
5：ユーザーの視線の動きに配慮したレイアウト
ユーザーの視線の動きを最小限に抑えるため、入力フィールドは一列に配置し、ユーザーの視線の流れを意識したレイアウト設計が必要です。複数列に配置すると、ユーザーは視線を左右に動かさなければならず、負担が増します。一列に並べたフォームの方はユーザーの負担を軽減し、入力率の向上につながります。
6：エラー表示をわかりやすくする
エラーメッセージには、エラーが発生した原因を具体的に記載し、ユーザーがそのエラーを解決できるようにわかりやすく表示しましょう。
どこに誤りがあり、どのような修正が必要なのかを明確に伝えることが大切です。
また、エラー表示をわかりやすくするためには、エラーが発生している入力フィールドを強調することが効果的です。エラー文言は、具体的で簡潔な表現を用い、ユーザーがどのように修正すればよいのか理解できるような内容にしましょう。
（例）
- × 入力に誤りがあります
- ○ ひらがなで記入ください
ユーザビリティを高めるためのルール設計
入力フォームは、ユーザーの新規登録や問い合わせを促進するために不可欠であり、売上の増加やサービス向上に直結します。
しかし、ルール設計が不十分だと、UXの一貫性が失われ、ユーザーが入力完了前に離脱してしまう可能性が高くなります。その結果、コンバージョン向上の機会を逃す恐れがあります。
UI/UXデザインが優れていれば、サービスや製品の利用者数や売上が増加したり、口コミや評判が良くなったり、ブランドイメージの強化やビジネスの成功に大きく寄与します。
「コンポーネント」を用いたルール設計
その実現の一例として「コンポーネント」を用いたルール設計について説明します。
コンポーネントとは、異なるページ間でも統一感をもたせる「共通パーツ」として、使用される機能です。具体的には、「ボタン」「チェックボックス」「モーダル」「テキストフィールド」「カラー」などがあります。
それぞれのパーツに機能を設定し、共通のパーツとして活用することで、異なるページ間でも統一感をもたせることができます。ページ全体に統一感が出たことで、ユーザーは少ない学習コストで迷うことなく各ページを使いこなせるようになります。
さらに、コンポーネントルールを設定することで、デザイン制作のスピードが向上し、実装のスピードも上がります。
これらを踏まえ、実際の制作時に意識すべき項目として、ユーザビリティを高めるためのルール設計の5つのポイントを以下にご紹介します。
ポイント1：初期に目次を整理、ゴールが見えるように
初期に目次を整理し、ゴールを明確にすることは非常に重要なポイントとなります。
コンポーネントを利用した設計は、「UX（ユーザー体験）の向上」という大事なゴールへの近道となります。
その理由として、適切に設計されたコンポーネントは、ユーザーがWebサイトを使っているときに、操作をストレスなく直感的にUXを向上させることになりページ離脱を防ぐことにつながります。
適切にコンポーネントを設計するには、設計の初期段階においてボタンや入力フォーム、ナビゲーションバーなど、ユーザーがWebサイト等のシステムを操作するための要素を洗い出す必要があります。
これにより、Webサイトなどの使いやすさ、効率性、そして最終的にはUXに大きな影響を与えるため、非常に重要な役割を担っているのがコンポーネントになります。
ポイント2：コンポーネントの命名を統一
各コンポーネントの定義を明確にし、コンポーネント名を統一する作業が非常に重要です。
修正依頼やフィードバックが発生する際、どの要素を指すかについて認識のずれが生じると、コミュニケーションのコストが増加することがあるためです。
コンポーネントを使用する際は、パーツの命名はあまり重要視されないこともありますが、私たちはプロジェクトチーム内での共通言語として、チームのプロセスにも影響を与える重要なことと考えます。
ポイント3：レスポンシブ対応（注1）を考慮
デバイスの画面幅に応じて、コンテンツや画像、ナビゲーションなどの構成要素の配置や表示／非表示を変えたレイアウトを考慮したルール設計が必要です。
（注1）レスポンシブ対応：「PC、タブレット（横型）、タブレット（縦型）、スマホ」のデバイス画面サイズに合わせて、サイト表示を最適化する手法です。
ポイント4：コンテンツの可変する要素（コンテンツの文字数、行数、画像など）を考慮する
例えば、文字が1行と複数行の場合、文字数や整列方法が異なることがあるため、全体の画面が崩れないようにルールを設定する必要があります。
また、画像についても同様です。画像が複数枚ある場合やサイズ比率が異なる場合、表示崩れが発生する可能性があるため、画像のルールを設定することが重要です。
ポイント5：各パターンでの使い道を追記
ルール設計を行う際に作成するデザインガイドラインは、単にコンポーネントのパターンを並べたものではありません。入力フォームのデザインにおいては、「どのような場面」で使用するものかを明確にし、具体的な使用例を示すことが重要です。
ユーザビリティテストによるUXの検証
ユーザビリティテストとは、制作したアプリやWebサイトをターゲットに即した一般ユーザーに試してもらい、「改善点」や「良い部分」をユーザー視点で洗い出すテストです。
このテストの目的は「ユーザーが実際に使いやすいと感じ、サービスを利用し続けてもらえるかどうかを見極める」ことです。
リアルなユーザーの意見をもとに検証し、利用中の発言や行動を観察することで、ユーザー心理やサービスの使い方を深く理解できます。また、リリース後に実際に使いたいと思うかどうかをヒアリングし、コンバージョンを高めるための課題抽出を可能にします。
当社の事例として、「専門用語が理解できず、項目を選択するのに迷ってしまった」というケースがありました。
その課題を解決するために、入力フォーム近くにテキストリンクを設置し、「モーダル機能で専門用語の詳細内容を表示」させる設計にしました。
変更後のユーザーの行動は、ページを行き来することなく専門用語の理解を深めた上で、スムーズなフォーム入力が可能となりました。
このようにユーザビリティテストを繰り返しながら、改善していくことでUXを向上させていきます。
まとめ：入力フォームのUXを高める重要性
入力フォームは、ユーザーの新規登録や問い合わせを促し、コンバージョン向上に不可欠な要素であり、売上の増加やサービス向上に直結します。
そのため、どんなユーザーにも理解しやすく、使いやすいUI/UXを実現する必要があります。ユーザーに配慮した使いやすい入力フォームを構築することで、商品の購入やサービスの品質向上につながります。
入力フォームの使いやすさは、配色や装飾の見た目の良さだけでなく、設問の配置や質問方法などさまざまな要素に左右されます。
WebサイトのUI/UX改善をご検討の方、入力フォームの改善にお困りの方は、ぜひご相談ください。