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

フォームを改善するUIデザインのテクニックを紹介します。
フォームのデザインに少し手を加えるだけで、ユーザーにとって使いやすい、コンバージョンを高めるための実践的なテクニックが満載です。

フォームを改善するUIのテクニックのまとめ

15 UI Tips for Better Forms
by Jim Raptis

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

はじめに

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

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

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

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

使いやすいフォームのUI

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

02. Zパターンを避ける

使いやすいフォームのUI

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

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

使いやすいフォームのUI

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

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

使いやすいフォームのUI

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

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

使いやすいフォームのUI

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

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

使いやすいフォームのUI

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

07. スペースを与える

使いやすいフォームのUI

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

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

使いやすいフォームのUI

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

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

使いやすいフォームのUI

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

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

使いやすいフォームのUI

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

11. プレースホルダーを活用する

使いやすいフォームのUI

プレースホルダーのテキストは、フォームに入力するユーザーを誘導するのに優れた方法です。入力内容の例を表示して、入力欄に期待される書式がどのようなものであるかを示します。「ここに名前を入力してください」のようなプレースホルダーのテキストは、ユーザーに何の価値も与えません。

12. ボタンは1つにする

使いやすいフォームのUI

たくさんのボタンでユーザーを圧倒させてはいけません。シンプルに、ボタンは1つにしましょう。複数のボタンが必要な場合は、セカンダリボタン(メインより目立たないようにデザインする)を使用します。

13. ボタンのテキストは実用的に

使いやすいフォームのUI

コピーライティングは、デザインやユーザビリティに大きな影響を与えます。フォームの送信ボタンには、「送信」「次へ」「移動」などの言葉は使用しないでください。ボタンをクリックすると何が起きるかが分かる実用的な言葉を使用してください。

  • サインアップフォームの場合「アカウントを作成」
  • 順番待ちリストフォームの場合「1000人以上の開発者に参加」
  • フィードバックフォームの場合「フィードバックを送信」

14. 適切な入力欄を選択する

使いやすいフォームのUI

フォームの入力欄のすべてにテキストフィールドを使用するのはやめましょう。フィールドのタイプをコンテンツに合わせてください。入力欄には特定の要件があり、特別な処理が必要なコンテンツタイプは多数あります。

  • 電話番号の入力
  • クレジットカードの入力
  • WebサイトURLの入力
  • 国の入力
  • 日付の入力
  • カラーの入力

15. 制限事項を明記する

使いやすいフォームのUI

フォームの入力欄には何かしらの制限があります。文字数制限、数字・日付の範囲、電話番号など。ユーザーが不満を感じないように、事前に制限事項は明記しておいてください。

終わりに

この記事で何か学んだことがあればと願っています。あるいは、素晴らしいデザインのテクニックを思い出したりしたでしょうか。

私は@d__raptisでUIとUXのヒントを投稿しており、ランディングページのUIに特化した無料のニュースレターも提供しています。

あなたを仲間に迎えて、よい良いデザイナーになるための手伝いをするのが本当に楽しみです。

sponsors

top of page

©2021 coliss