Greemy Labs

miyakeです。Webアプリケーションにおけるユーザーインタフェースの代表格と言えばフォーム。今日はそんなフォームのUIを作るに当たって、普段自分が心掛けていることをつらつらとご紹介します。
 フォームのユーザビリティを改善する10のTips

ウノウブログにユーザビリティの１０カ条が公開されていたので、自分流にまとめます。

■チェックボックスやラジオボタンはfieldset,label要素でくくる

<fieldset>
 <input type="radio" id="fav1" name="favorite" value="1" />
 <label for="fav1">犬好き</label>
 &nbsp;&nbsp;
 <input type="radio" id="fav2" name="favorite" value="2" />
 <label for="fav2">猫好き</label>
</fieldset>

input要素だけでマークアップした場合、チェックボックス（ラジオボタン）の部分しかクリックすることができません。
label要素を用いることで、ラベルの部分をクリックしてフォームを操作することが可能になります。
これは是非設定しておきましょう。

また、そのチェックボックスやラジオボタンのグループをfieldset要素で囲んでおく。後からCSSでデザインをに手を入れる時に、CSSだけで対応できる範囲が広くなることのメリットが大きいようです。

■エラー時は class="error" を付ける

<p><input type="text" name="name" class="error" value="" /></p>
<p class="error">※お名前を入力してください。</p>

input.error {
background:#fc0;
}

入力エラーがあった場合には、フォーム項目の脇にエラーメッセージを表示します（場合によってはページ上部にも）。
この時、フォームの要素に対してエラー
であることを表すクラスを指定し、CSSで装飾を施すことで「どの項目を入力し直す必要があるか」をユーザーに伝えます。

チェックボックスやラジオボタンの場合は、label要素やfieldset要素にもそれぞれ class="error" を指定しておきます。

input要素だけに付けた場合、チェックボックス（ラジオボタン）の部分だけしかスタイルが適用されません。また、Firefoxでは背景色の指定自体が効きません。

■ログインフォームはページ読み込み時にフォーカスさせる

メールアドレス（ID）とパスワードを入力してログインするような一般的なログインページではJavaScriptを使って、ページが表示された時に最初の項目をフォーカスするようにしておきます。

■大切なボタンは大きくする

画面設計にもよりますが、入力内容を確定するsubmitボタンなどを大きくすることでユーザビリティの向上が見込めます。

■ボタンのテキストは「押したらどうなるか」が分かるように

ボタンには「登録」や「投稿」といった単語だけでなく、「この内容で登録する」「日記を投稿する」のように「そのボタンをクリックすることで何が起こるか」が伝わりやすいようなラベルを設定します。

「フォームに何かを入力して、submitボタンを押す」という行為は、特にPCに不慣れな人にとっては心理的な抵抗・プレッシャー、場合によっては恐怖感さえ感じるもののようです。

■画面遷移と現在位置をチャートなどで見せる

• フォームの一連の処理でどれだけの画面があるか
• 今表示しているのはその中のどのページか

を示すナビゲーションを設置するのも一つの手です。通常のパンくずナビゲーションを設けている場合はそちらに組み込むのも手ですが、ECサイトなどでは購買のフローを明確にするために使われることがあります。

■フォーム要素の幅はCSSで指定する

input要素には幅を指定するsize属性がありますが、この指定では実際のところ狙い通りの幅で表示させるのは難しいです。input要素の幅はsize属性ではなく、CSSで指定することをお勧めします（幅の単位は要件に応じて）。

また、textarea要素には列数と行数を指定するcols,rows属性があります。こちらはDTD上必須の属性として定義されていますので、設定した上で幅だけを改めてCSSで指定してやるといいでしょう。cols属性だけで指定するとブラウザ間で幅を一定にできないようてす。

■全角英数字は必要に応じて半角に変換する

メールアドレスが全角で入力された場合、「半角英数字で入力してください」というエラーを出すよりも、サーバサイドで半角に変換してあげた方が親切です。

■前後のスペースも必要に応じて削除する

メールアドレスやユーザーIDをコピー＆ペーストで入力した時に、末尾にスペースが入ってしまってエラーになる場合があります。入力された内容の先頭と末尾にあるスペースをシステム側で落としてやることで、こうした状況を防ぐことができます。

■郵便番号検索を付ける

郵便番号→住所の自動入力はもちろんですが、住所→郵便番号も引けるとより便利ですね。




といった感じです。
ひとつひとつを見れば、どれもほんとにちょっとしたことで、ユーザーが気づかず通り過ぎてしまう項目もあるでしょう。が、きっとそれがいいんでしょうね。ユーザーが気付かないくらい自然に使いやすいインターフェースを実装できれば、そのサービスでストレスなく楽しんでもらうことができるということだと思います。これは、サイトを作る時に重宝しそうなTipsですね。


ヤマモト＠エントリー書き過ぎ？ｗ