Workship MAGAZINE書籍化第3弾!#ADHDフリーランス の新常識 他
- 隔週月曜更新!フリーランス・副業ニュース
Webサイトやアプリのエントリーフォーム(入力フォーム)は、一見なんの変哲もないUIコンポーネントに見えます。しかしエントリーフォームは、支払いや登録といったインタラクションに関係する、ビジネスにおいて極めて重要な要素です。
今回はユーザーの利用体験を向上させ、ビジネスを加速させる、エントリーフォームのUI設計ポイントについて解説します。
本記事で紹介する図解では、左に「失敗例」、右に「成功例」を掲載しています。
ラベルを配置する際は、位置などのデザインを統一しましょう。
さまざまなデバイスに共通して使いやすいのが、入力欄の左上にラベルを配置するデザインです。
入力欄の間隔を近づけすぎたり、入力欄とラベルを離しすぎたりしないように避けましょう。
ゆとりがありつつ、要素がまとまって見える間隔を意識しましょう。
必須項目よりも、任意項目を強調するのがオススメです。
ユーザーの心理的負担を減らせます。
入力欄だけでフォームが埋め尽くされていると、ユーザーは圧倒されてしまい、離脱率が高まるリスクがあります。
入力項目を分類してグループ化し、各グループにタイトルをつけましょう。
エラーの際は、どの項目が誤っているのかを明確に伝えましょう。
画像左側のようなデザインだと、どの項目を直せばいいのかが不明確です。
エントリーフォームの改善は、コンバージョン、エンゲージメント、売り上げの向上につながります。
エントリーフォームの入力はユーザーにとって楽しい作業ではありません。だからこそUIを改善して、できるだけ負担を減らす努力をしましょう。
(執筆:Vikalp Kaushik 翻訳:Asuka Nakajima 編集:泉 提供元:UX Planet)
EFO(エントリーフォーム最適化)をサポートするJS/CSSツール10選
Workship MAGAZINE
選択式フォームの最適な表示方法は?ドロップダウンメニューだけじゃない!
Workship MAGAZINE