チェックボックス 対 ラジオボタン
有名ウェブサイトでも、基本的なユーザインタフェース（UI）で初歩的な間違いを犯すことがある。主要なガイドラインは明確だが、それ以外にも考慮しなくてはいけないことが 10 項目ある。
最近、有名ウェブサイトの登録ページで、下に示すような記入欄を見た。これには最低でも 2 つのデザイン上の間違いがある。続きを読む前にその 2 つを見つけることができるか、試してもらいたい。
お見逃しありませんように！お薦めの製品、ソリューション、サービス、講習会などの最新情報を提供いたします。ぜひ Foobar Corp. や、そのほか選りすぐりの企業からの情報をお取り寄せください。
電子メールを通して、最新情報をお送りしてもよろしいでしょうか？
もしご希望であれば、ここでご記入いただいた情報を使ってご連絡することはありません。
間違いその 1 は、この記事のテーマそのものだ。ラジオボタンを使うべきところで、チェックボックスを誤って使っているということだ。上記の 2 つの選択肢は互いに排他的なので、1 つの選択肢だけが選べるラジオボタンを使うべきだ。
間違いその 2 は、そもそも 2 つの質問をしていることと、それを大きくて、言葉数の多い枠に入れていることだ。ここでは、短い 1 つ質問をするほうが、ずっとよい。「はい、私にその他のお薦めの製品、ソリューション、サービス、講習会などの情報を送ってください。」といった具合だ。
皮肉にも、1 つの質問にした場合はチェックボックスを使うのが正しい。なぜなら、ユーザは yes か no かを答えることになるからだ。eコマースサイトでのユーザテストから導き出された推奨事項では、チェックボックスの初期値はブランクにすることになっている。そうすれば、さらに情報提供を希望するユーザは能動的にクリックしてオプトインしなければならい。
いつ、何を使うべきか
1984 年に発行された Inside Macintosh の初版以来、チェックボックスを使うべきか、ラジオボタンを使うべきかの規則はずっと同じだ。そのあとに続く全ての GUI 標準も、W3C のウェブ標準も、この 2 つのコントロール要素の定義は変わっていない。
- ラジオボタンは、排他的な選択肢で、ユーザが 1 項目だけを選択しなければいけないときに使われる。
- チェックボックスは、0 項目、1 項目、またはそれ以上の項目を選ぶことができるような複数選択肢で使われる。言葉を変えれば、各チェックボックスは他のチェックボックスから独立しているため、ひとつのチェックボックスを選択した場合、他のチェックボックスの選択が外れるということがない。
- 単独チェックボックスは、ユーザが on と off を切り替えることができる単独の選択肢に使われる。
これだけ見れば、簡単なことに見える。
しかし私は、ラジオボタンとチェックボックスを間違えて使っているウェブページに出くわすことがよくある。20 年を経たが、これらのガイドラインについて、もう一度言及することには価値があるだろう。
追加ガイドライン
- 標準的な形状のものを使うこと。チェックボックスは、選択したときチェックマークか X が中に示される、小さな四角であるべきだ。ラジオボタンは、選択されたとき塗りつぶした円が中に表示される、小さな円であるべきだ。
- 選択肢のグループは視覚的にグループだとわかるように表示し、そのページにあるほかのグループと明確に見分けがつくようにすること。上で示した四角で囲った例は、2 つのチェックボックスが異なるトピックについてのものであるかのように見えるが、実際は同じトピックに関しての選択肢であるため、このガイドラインに違反している。
- 多数のチェックボックスを並べる場合は小見出しを使って適切に小分けを行うこと。こうすることにより、素早く選択肢に目を通すことが可能になり、理解することも容易になる。問題は、各サブグループが別個の選択肢のグループに見えてしまうかもしれないことだ。しかし、チェックボックスの場合はそれほど致命的になることはない。各チェックボックスは、結局のところ独立した選択肢だからだ。しかし、ラジオボタンのリストは常に統合されて提示されなければいけないので、小見出しで分けてはいけない。
- 縦に選択肢を並べる。1 行に選択肢 1 つが望ましい。もし複数の選択肢を水平に並べなければいけない場合は、どのラベルがどのチェックボックス / ラジオボタンのものなのかが明確になるよう配置すること。例えば下の例では、選択肢 Four に対するラジオボタンがどれなのか判断するのが難しい。
- 肯定的で能動的な言葉をチェックボックスのラベルには使う。チェックボックスを選択した場合に何が起きるのかが明確になるようにするためだ。他の言い方をすれば、「電子メールをこれ以上送らないでください。」というように否定形で書いてはいけない。これでは、ユーザは何かが起きないようにするために、チェックボックスを選択しなければいけないからだ。
- チェックボックスのラベルを、選択した時と、選択しなかった時、両方の場合で何が起きるのかユーザがわかるようにすること。
- もしそれができない場合は、ラジオボタンをその機能を on にするものと off にするものの 2 つを用意し、それぞれに明確なラベルを書いたほうがよいかもしれない。
- ドロップダウンメニューよりも、なるべくラジオボタンを使うこと。全ての選択肢が常に表示されていて、ユーザが選択肢を見ながら考えやすいという点で、ラジオボタンのほうが優れている。マウスを正確に動かすことが困難なユーザにとっても、ラジオボタンのほうが扱いやすい。（限られた領域の中に配置しなければいけない場合、このガイドラインを守れないこともあるが、できる限り選択肢が見えるように心がけたい。）
- ラジオボタンでは常に初期値を設定すること。ラジオボタンは、常に 1 つの選択肢が選択されているはずのものだ。したがって、初期値がないラジオボタンを提示するべきではない。（その反対に、チェックボックスはデフォルトではどの選択肢も選択しない場合が多い。）
- もしユーザがどれも選択できないというようなことがある場合、例えば「該当無し」といったラベルのついた、その目的のためのラジオボタンを用意しておくべきだ。明確に中立である選択肢をクリックさせるほうが、何も選択させないことによって暗示させるよりもよい。特に、何も選択させないということは、常に 1 つの選択肢が選ばれているというルールに違反する。
- ラジオボタンでは常に選択肢を 1 つ選択していなければいけないため、選択肢は包括的で、明確に区別できる必要がある。例えば高齢者を対象としたテストでは、人々は職業選択欄のあるフォームを記入し終えることができなかった。「退職者」という選択肢がなかったのだ。包括的な選択肢を用意できないのであれば、選択肢の中に「その他」を設けて、自由記入欄で補完しよう。
- チェックボックスまたはラジオボタンといっしょにラベル自体もクリック可能にすること。Fitts の法則によると、クリックできる場所が大きいほうが素早くクリックできる。HTML のフォームでこれをするには、私が水平配置のラジオボタンの例で行ったように、各ラベルを <label> 要素を使ってコーディングすればよい（例えば Four という選択肢を選択するには、”Four” というラベルをクリックできる）。Flash で作られたウェブベースアプリケーションのテストでは、視覚的に見てクリックできると判断できるエリアから数ピクセル外側までクリックできる場所が大きくなっている場合、ユーザによるエラーが大幅に減ることがわかった。（これは HTML で行うのは難しいかもしれないが、CSS に詳しければ不可能ではない。）
- よく使われるチェックボックスとラジオボタンにはアクセスキーを設定して、ユーザがキーボードから素早く選択できるようにする。これは障碍者ユーザのためのアクセシビリティを向上するとともに、上級ユーザの役に立つ。（水平配置のラジオボタンの例でいうと、ALT-5 を押せば Five が選択される。）
- もしアクセスキーの標準があるのならば、それに従うべきだ。しかし、そのような標準は今のところない。その代わり、ウェブサイトやイントラネットの複数のページで出てくる選択肢に対して、あなたの組織の中で独自の標準を設けるようにすれば、同じ選択肢が常に同じアクセスキーを持つようにできる。
- チェックボックスやラジオボタンは、設定を変更するためだけに使用し、何か動作を起こすためのものとして使わないこと。また、変更された設定はユーザが実行ボタン（例えば “OK” や “XXXに進む” 。XXXは次のプロセスを表す。）を押すまで反映させてはいけない。
- もし、ユーザが戻るボタンを押した場合、チェックボックスやラジオボタンに行った変更は破棄され、元の設定に戻るべきだ。同じことが取り消しボタンをクリックしたときにも言える（もっとも、ウェブページの場合は取り消しという選択肢は戻るボタンがその役を果たすため、必要ない）。
なぜ、これらのガイドラインが重要なのか
正しいチェックボックスとラジオボタンの使い方に関して、私がただ口うるさいだけだと思うかもしれない。だが、それは間違いだ。GUI の標準に従い、これらのコントロール要素を正しく使うべきユーザビリティ上の理由があるのだ。
最も重要なのは、デザイン標準に従うことによって、何が起きるのか、どう使えばよいかをユーザが予測することを強化できる。ユーザがチェックボックスの一覧を見た場合、それだけで複数の選択が可能だということがわかる。ラジオボタンであれば、1 つだけを選択しなければいけないことがわかる。（もちろん全てのユーザがこのことを知っているわけではないが、大半は知っている。何しろ 1984 年からの標準なのだから。）
大半の人は標準的な GUI 要素をどのように使うのか知っているため、これら要素を正しく使うことによって、ユーザのテクノロジーに対する主導感の強化が行える。逆に、これらの標準に違反すると、何が起きるか分からないという、ユーザインターフェイスが不安定な印象を与えてしまう。例えば、あなたはラジオボタンをクリックしても、すぐには反映されないと思っていて、そして、選択を行ってから “OK” を押す前に、じっくり考えるつもりだとしよう。そのような場合に、ウェブサイトが標準に違反していて、あなたが選択すると突然次のページに移動したら不愉快だろう。さらに、同じサイトの中にあるフォームでは何が起きるのか予測がつかず、あなたは怯えることになる。
チェックボックスとラジオボタンに関する最大のユーザビリティ問題の原因は、あいまいで間違いやすいラベル、または平均的なユーザには理解不可能な選択肢の提示方法にある。文脈に沿ったヘルプを使えば最後の問題はどうにかなるが、重要な対話的コントロール要素に関してはユーザテストを行うのがベストだ。幸い、チェックボックスとラジオボタンはペーパープロトタイプを使ってテストするのが簡単であるため、実際に動作するものを作らなくても、ユーザがラベルを理解し、正しく各要素を使えるか調べることができる。
プロのインタラクションデザイナであれば、ラジオボタンを使うべきところでチェックボックスを使うような失敗は犯さない。この 2 つのコントロール要素の違いは、インタラクションデザインの授業で最初に教えるものの 1 つだ。だから、これら画面要素を正しく使うべきである最後の理由はこうだ：もし正しく使わないと、あなたはアマチュアに見られてしまう。
