入力フォーム、リンクボタンを目立たせクリック率アップ!背景に色を付けよう!

この記事はPR・広告(アフィリエイトリンク)が含まれるので予めご了承ください。

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

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

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

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

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

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

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

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

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

同化してわかりにくい例

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

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

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

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

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

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

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

背景はやはりシンプルに白にしたい場合

背景に薄い色があると野暮ったいので、やはり背景はシンプルに白色にしたい場合は、フォーム部品の入力欄背景に、薄い色を塗る方法があります。

他にも、フォーム部品の枠線に濃い色や、太くするなどの対策が考えられます。

これで、背景の白色と差別化ができますね!

入力フォームは、パッとに見て、入力できる項目がすぐに理解できるデザインを心がけましょう!

コメント

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