サカグチデザインオフィス

ブログBlog

Jimdoのメールフォームのユーザビリティを向上させる

2012.11.05更新

Jimdoのメールフォームは設定しやすく、直感的にメールフォームを作れて大変便利ですが、デザイン、ユーザビリティ面から見るとあともう一歩、というところがあります。

今回は、Jimdoのメールフォームのユーザビリティを向上させるTipsをご紹介します。

【その1】送信ボタンを大きくする

WEBデザインではすでに当たり前のことですが、送信ボタンの面積は大きめにとってクリックしやすいようにしておきましょう。

ボタンが小さいとユーザーが判断しただけで、心理的にストレスがかかり、送信しなくなるリスクがあります。

chromeで見た例。さすがに小さすぎです。

対処方法

「送信」から「送信する」のように文字を増やしたり、送信するの前後にはスペースなどを入れて面積を広げます。

文字を追加したり、スペースを入れてボタンを大きくします。

【その2】入力欄(テキストフィールド)が細い

Jimdoの用意されているテンプレートには入力欄が細いものが多いです。やや縦に広げると、クリックエリアが大きくなって入力しやすくなります。

やや入力欄(テキストフィールド)が細くなっています。

これも、入力欄が細いとユーザーが判断した場合や、一度のクリックでカーソルを持ってくることができなかったりすると、心理的にストレスがかかり、入力する意欲が無くなるリスクがあります。

対処方法

独自レイアウトを使用している場合はCSSで高さを指定すればOKです。

IEでチェックボックスやラジオボタンのボーダーが飛び出た気がするので、その処理も追加で入れて消します。

.j-formnew input{
	height: 1.7em;
}
.cc-m-form-checkgroup input, .cc-m-form-radio input{
	border: none !important;
}

独自レイアウトではない場合はjQueryをヘッダーに入れて対処できます。

<script type="text/javascript" src="http://www.google.com/jsapi">
</script>

<script type="text/javascript">
//<![CDATA[
	google.load("jquery","1.4");
//]]>
</script>

<script type="text/javascript">
<!--
jQuery.noConflict();
jQuery(document).ready(function($){

	jQuery(document).ready(function( $ ){
		$(".cc-m-form-view-input input").css("height", "1.7em");
		$(".cc-m-form-radio input").css("cssText", "border: none !important");
		$(".cc-m-form-checkgroup input").css("cssText", "border: none !important");
	});

});
//-->
</script>

変更後。やや入力欄が大きくなりました。

【その3】入力例や単位を載せる

入力欄(テキストフィールド)の後に入力例を入れます。

入力方法がすぐわかるのでストレスがかからず、ユーザーが迷う恐れを回避できます。

入力例が一目で見てわかり、親切です。

また、数字の単位などとしても利用できます。

数字の単位を入れておくケースも良くあります。

対処方法

下記jQueryをヘッダーに入れます。ただし、「name=m7922414a52b136230」の数字はinputタグごとに変わるのでHTMLのソースを確認して抜き出してください。

<script type="text/javascript" src="http://www.google.com/jsapi">
</script>

<script type="text/javascript">
//<![CDATA[
	google.load("jquery","1.4");
//]]>
</script>

<script type="text/javascript">
<!--
jQuery.noConflict();
jQuery(document).ready(function($){

	jQuery(document).ready(function( $ ){
		$("*[name=m7922414a52b136230]").after("<span style='font-size:80%;'>例:山田 太郎</span>");
	});

});
//-->
</script>

以上のように、とても細かいところですが、少しずつユーザーのストレスを減らしていく積み重ねが注文や問い合わせにつながってくるということを意識して、常に改善をしていきましょう。

ウェブ戦略にお悩みですか?

御社のWEB事業部となって、分析とデザインで集客から売り上げまで改善します!
デザインは2005年から。携わったHPは200件以上!