ユーザビリティという言葉をご存知でしょうか。「使いやすさ」をあらわす言葉です。
WEBサイトのフォーム入力時に、ラジオボタンやチェックボックスが選択しづらいという理由で入力を断念し離脱してしまうユーザというのは意外と多いんです。世の中どいつもこいつも短気なヤツばかりです。
この記事では、フォームのユーザビリティ向上のために、クリックしやすいラジオボタンやチェックボックスをデザインする方法を解説します。
input要素だけで作ったラジオボタン、チェックボックス
まずは<input>要素だけを使ったシンプルなラジオボタンとチェックボックスの例です。ダメな例です。ユーザビリティ的には0点のクソみたいなコードです。
<p>
<input type="radio" name="after_death" value="天国"> 天国
<input type="radio" name="after_death" value="地獄"> 地獄
<input type="radio" name="after_death" value="中国"> 中国
</p>
<p>
<input type="checkbox" name="who[]" value="天使"> 天使
<input type="checkbox" name="who[]" value="悪魔"> 悪魔
<input type="checkbox" name="who[]" value="毛沢東"> 毛沢東
</p>天国 地獄 中国
天使 悪魔 毛沢東
実際にクリックしてみるとわかると思いますが、ラジオボタンは◯の部分、チェックボックスは□の部分をクリックしなければ選択できません。
これでは、アル中で手が震えがちな私のような人はうまくクリックできないのです。
label要素を使ったラジオボタン、チェックボックス
<label>要素を使うとユーザビリティが向上します。
for属性を使ったラベルの定義
<p>
<input type="radio" name="after_death" id="heaven" value="天国"> <label for="heaven">天国</label>
<input type="radio" name="after_death" id="hell" value="地獄"> <label for="hell">地獄</label>
<input type="radio" name="after_death" id="china" value="中国"> <label for="china">中国</label>
</p>
<p>
<input type="checkbox" name="who[]" id="angel" value="天使"> <label for="angel">天使</label>
<input type="checkbox" name="who[]" id="demon" value="悪魔"> <label for="demon">悪魔</label>
<input type="checkbox" name="who[]" id="mao" value="毛沢東"> <label for="mao">毛沢東</label>
</p>
◯や□の部分に加えて文字をクリックしても選択できるようになりました。
<input>要素のid属性と<label>要素のfor属性を同じ値にすると、<input>と<label>を関連付けることができます。
暗黙のラベルの定義
<p>
<label><input type="radio" name="after_death" value="天国"> 天国</label>
<label><input type="radio" name="after_death" value="地獄"> 地獄</label>
<label><input type="radio" name="after_death" value="中国"> 中国</label>
</p>
<p>
<label><input type="checkbox" name="who[]" value="天使"> 天使</label>
<label><input type="checkbox" name="who[]" value="悪魔"> 悪魔</label>
<label><input type="checkbox" name="who[]" value="毛沢東"> 毛沢東</label>
</p>
<input>要素と文字列を<label>で囲んで、<input>要素と文字列を関連付けることもできます。結果は同じですが、こっちのほうがシンプルに書けますね。
さて、重度のアル中の私はこれでもクリックできません。さらに改善していきましょう。
CSSを使ってもっとわかりやすく
CSSを使うと、さらにユーザビリティを向上させることができます。
クリックできる範囲を広げて明示する
<p>
<label><input type="radio" name="after_death" value="天国"> 天国</label>
<label><input type="radio" name="after_death" value="地獄"> 地獄</label>
<label><input type="radio" name="after_death" value="中国"> 中国</label>
</p>
<p>
<label><input type="checkbox" name="who[]" value="天使"> 天使</label>
<label><input type="checkbox" name="who[]" value="悪魔"> 悪魔</label>
<label><input type="checkbox" name="who[]" value="毛沢東"> 毛沢東</label>
</p>
<style>
label {
padding: 8px; /* クリック可能な領域を広げる */
border: solid 1px #ccc; /* ボーダーを表示する */
border-radius: 4px; /* お好みで角丸をつける */
cursor: pointer; /* マウスポインタを変更する */
}
</style>
<label>要素にCSSを適用して、さらにクリックしやすくしてみました。枠の中のどこをクリックしても項目を選択することができます。
これで安心して酒が呑めますね。
選択項目を強調する
<p>
<label><input type="radio" name="after_death" value="天国"> 天国</label>
<label><input type="radio" name="after_death" value="地獄"> 地獄</label>
<label><input type="radio" name="after_death" value="中国"> 中国</label>
</p>
<p>
<label><input type="checkbox" name="who[]" value="天使"> 天使</label>
<label><input type="checkbox" name="who[]" value="悪魔"> 悪魔</label>
<label><input type="checkbox" name="who[]" value="毛沢東"> 毛沢東</label>
</p>
<style>
label {
padding: 8px;
border: solid 1px #ccc;
border-radius: 4px;
cursor: pointer;
}
/* マウスオーバー時に背景色を変える */
label:hover {
background-color: #f0f8ff;
}
/* 選択時に背景色を変える */
label:has(input:checked) {
background-color: #f0f8ff;
}
</style>
CSSの擬似クラス:hoverを使って、選択項目にマウスポインタを重ねたときに背景色が変わるようにしました。
また、擬似クラス:has()を使って、選択済みの項目にも色をつけるようにしました。
さいごに
ユーザビリティは「使いやすさ」であると同時に「やさしさ」でもあるということをご理解いただけたかと思います。
そして、この「やさしさ」がユーザの離脱率を下げ、あなたの利益を爆上げさせるのです（ニヤ）。
でわでわ
コメント