入力フォーム、リンクボタンを目立たせクリック率アップ!

入力フォーム、リンクボタンを目立たせクリック率アップ!

システムのユーザーインターフェース、ホームページのお問い合わせフォームで大事なのは、入力欄がわかりやすいこと。

入力欄がわかりにくいと、入力漏れが起こり、エラーが多くなり、途中で離脱することも。

また、クリックしてほしいカード型リンクボタンが目立たない場合は、誘導したいページへの推移が失敗して目標が達成できません。

どうすれば、入力欄や、リンクボタンを目立たせることができるか説明します。

フォーム要素の背景は白いので目立ちにくい

フォーム要素(インプットボックス、テキストエリア、ラジオボタン、チェックボックス、リスト)などは、背景は初期設定では白色です。

カード型要素でも写真や文字をレイアウトするので白色背景が多いですね。

フォーム要素、カードリンクボタン要素の白い背景要素を画面に配置するときに、画面全体の背景も白色だと、同化してしまい、わかりづらい入力インターフェースになってしまいます。

同化してわかりにくい例

どこから入力欄で、どこから背景かわかりにくいですね。

背景を薄い色を塗ってフォーム要素を目立たせる

背景に薄い色を塗ることによって、フォーム部品の入力欄(背景白色)が、認識されやすくなります。

また、ラベル文字(黒)も読ませる必要があるので、画面背景は、薄い色を塗るのがベストですね!

入力欄、背景が一目でわかる例

白色は、一番明るい色なので、前面に浮いて見えますので、目を引くことが可能です。

画面背景に薄い色を塗るだけで、フォームの入力率、クリック率を上げることができるのでおすすめです。

デザインをオンラインで学ぶならUdemyがオススメです。

コメント

タイトルとURLをコピーしました