デザインに少し手を加え、フォームを改善する実践的なUIのテクニックのまとめ

Post on:2021年9月14日

はじめに

フォームはUIに欠かせない要素です。ユーザーとの間にコミュニケーションを確立させます。その重要性に疑う余地はありませんが、悲惨な間違いを犯した粗悪なフォームがWeb上にはたくさんあります。

粗悪なフォームは、コンバージョンを妨げ、ユーザーを苛立たせ、目標到達のプロセスを壊す可能性があります。

この記事では、ユーザーを尊重した使いやすいフォームを作成し、コンバージョンを高めるための実践的なUIのテクニックについて解説したいと思います。

01. ラベルを常に記述する

ラベルはフォームにとって非常に重要です。ラベルを常に見えるようにしておくことが重要です。入力欄の内容が何であるかを推測させることほど迷惑なことはありません。入力が完了するとラベルを非表示にしてしまうフォームがたまにあります。しかし、これではユーザーが混乱してしまい、入力した内容を簡単に確認することができなくなります。

02. Zパターンを避ける

フォームをグリッドで配置すると、ユーザーはZパターンに従うように強制されてしまいますが、これはユーザーを混乱させる可能性があるので望ましくありません。フォームの入力欄を垂直線上に並べると、ユーザーは垂直方向に素早くスキャンでき、フォームの入力を完了しやすくなります。

03. ラベルを入力欄の上に配置する

上記の延長として、入力欄の左側にラベルを配置すると、同様にZパターンが発生し、スキャンしにくいフォームになります。フォームをユーザーが簡単にスキャンできるように、ラベルを入力欄の上に配置することをお勧めします。もしフォームが非常に簡単なもの（入力欄が2つ以下）であれば、ラベルを左側に配置しても大きな違いはありません。

04. 右揃えのラベルを使用する

入力欄の左側にラベルを配置することになった場合は、ラベルのテキストが右揃えになるようにしてください。これにより、ユーザーはスキャンしやすくなり、フォームの視覚的な階層が作成されます。

05. 関連する入力欄をグループ化する

長いフォームはユーザーに入力を躊躇させ、コンバージョン率を下げることにつながります。フォームをより魅力的に（そして疲れにくく）するための視覚的なテクニックは、関連する入力欄をサブセクションにまとめることです。さらにユーザビリティを高めるために、各サブセクションに「保存」ボタンを配置し、ユーザーが入力内容を個別に保存できるようにすることもできます。

06. ユーザーフローを尊重する

ユーザーはフォームを入力する時、各入力欄に入力した後にフォームを送信することを期待します。これは典型的なユーザーフローです。このユーザーフローを尊重し、「送信」ボタンはフォームの終わりに配置します。これはUI/UXデザインにフィッツの法則を適用した典型的な事例です。ターゲットを獲得するための時間は、ターゲットまでの距離とサイズのかけ算です。

07. スペースを与える

デザインにとって空白スペースは最高の相棒です。フォームをより使いやすくするためには、入力欄の間に十分なスペースを与えてください。多くのユーザーは、高密度のフォームには興味を示さないでしょう。

08. ラベルの繰り返しを避ける

デザインにおいて、同じ情報やデータの繰り返しを避けることが大切です。特にフォームの場合は、入力欄に関する不要な情報を省略するように注意する必要があります。例えば、必須項目3つと任意項目1つがあるとします。ユーザーには任意のみを通知します。必須項目1つと任意項目3つの場合は、逆のことをしてください。

09. エラーメッセージは分かりやすく

エラーが発生しました！エラーの存在自体は一般的で、ユーザーも分かっています。しかし、ユーザーはそのエラーがなぜ発生したのか、どうすれば解決できるのかを知りたいと思っています。エラーメッセージには原因を具体的に説明し、ユーザーがそのエラーを解決できるように分かりやすく記述してください。

10. 必要に応じてドロップダウンを使用する

フォームの入力欄には適切なUI要素を選択することが重要です。しかし、どの要素にすればいいのか迷うこともあるかもしれません。特にドロップダウンとラジオボタンのどちらにするかを選択する場合は、3つ以上の選択肢があるかを基準にするとよいです。3つ以上の場合はドロップダウンを使用します。選択肢が少ない場合は、ユーザーが事前にすべての選択肢を確認できるラジオボタンを使用します。