ちょっとした工夫でユーザビリティを向上させる4つのコツ
Webサイト製作をする上で、ユーザビリティはとても重要な要素です。
AjaxやFlashを駆使し、大いにユーザビリティを向上させるサイトも多く見られます。
そういった派手なエフェクトも良いですが、注意しないと気づかない、でも重要な仕掛けというのも存在します。
そんなちょっとした心遣いでユーザビリティを向上させるコツをまとめてみました。
人はそれを優しさと言う。
フォームにラベルをはる
基本ですが見落としがちですね。
ラベルをはることで、クリックしやすさを向上します。
<input type="radio" name="r" value="1" id="r_1"><label for="r_1">前田</label>
<input type="radio" name="r" value="2" id="r_2"><label for="r_2">鬼塚</label>
<input type="radio" name="r" value="3" id="r_3"><label for="r_3">薬師寺</label>
<input type="radio" name="r" value="4" id="r_4"><label for="r_4">葛西</label>こうすることで
文字列の部分で選択できるようになります。（文字の部分をクリックしてみてください）
ちなみにこの書き方は IE6 に配慮した物で、IE6 で動作しなくても良いならば単純に
<label><input type="radio" value="1"> 辰吉</label>
<label><input type="radio" value="1"> 川島</label>としても OK です。
書き方は簡単で手軽ですが、IE6 にだけ優しくないのが珠にキズです。
単に入力エラーとするのではなく、変換できるものはしてあげる
例えばフリガナを入力する欄などでは、「カタカナで記入してください」との注意書きがあり、ひらがなを入れるとエラーになる、という仕様のフォームがあります。（同種に、全角英数で入力すると半角で書けと怒られるなど）
注意書きがあるのは優しいですが、紳士たるものそこからさらに一歩踏み出したいところです。
ひらがな→カタカナや、半角→全角などは、簡単に変換できるのですし、そこは無駄に手を煩わせないのが優しさですね。
「はい・いいえ」などの選択にラジオボタンは向かない
「はい・いいえ」の選択肢でラジオボタンを使用しているサイトを見かけます。
あなたは紳士ですか？
これはこれで良いのですが、このような選択肢にはチェックボックスの方が向いています。
直感的か否どうか、という部分はユーザビリティのキモでもあると思います。
訪問した際に、メインのフォームがアクティブとなっている
googleやyahoo!などに行ってみると、訪問したその時点でメインの検索窓にカーソルが合っている事に気づきます。
注意しないと意外と気づかなかったりしますが、サイトを訪れてすぐに、マウスを動かすことなくキーボードで検索させるという心遣いです。
入力する事が主目的なページであれば、自動であわせてあると親切です。
登録系のフォームの、一番上に合わせてあったりすると良いですね。
オマケ：ドメインを入力間違えに対応する
google は 「http://www.gooogle.com/」と間違えて「o」を一つ多く入力しても、google に飛びます。入力の間違えまでも吸収するなんて、なんというジェントルメン。
うん、全然ちょっとした工夫じゃねえや。
まあこれは google 程の知名度があってこそ意味があるし、全然ちょっとしてないのでオマケです。
以上、ちょっとした工夫でユーザビリティを向上させるテクニックでした。 知らなかったーという方は是非お試しを。
