デザイン

デザイン

改めて「ラジオボックス」について考える。ラジオボックスとチェックボックスの使い分けなど

470 views

Webフォーム欄で頻繁に使われる「ラジオボタン」。

この名前の由来は、一昔前のカーラジオにはチャンネルを切り替えるためのボタンが設置されていましたが(上図)、「ひとつのボタンを押しこむと他のボタンが飛び出す(=選択できない)」という特性にちなんでつけられたそうです。

 

デザインにおいてはそこまで重要視されることがないラジオボタンですが、ユーザーが入力したデータを採集したいアナリストやマーケターにとってはかなり重要度の高いツールです。というのも、選択肢形式での入力になるので回答者の誤入力の可能性を排除しやすいためです。

 

本稿では、この実はちょっとスゴいヤツラジオボタンのユーザビリティテストを通じて、より実践的で魅力的な「ラジオボタン作り」のベストプラクティスについて考えてみましょう。

ラジオボタンのベストプラクティス

 

ラジオボタンはあくまで「選択肢」として使うもの

 

ラジオボタンはあくまで選択肢を選ぶためのものであって、入力されたコマンドを実行する「アクションボタン」ではありません。そのためユーザーが実行ボタン(「次へ進む」ボタンや「保存する」ボタンなど)をクリックするまで、ユーザーの選択に干渉しないようなものがいいでしょう。またユーザーがページを遷移した時には、所定の位置に選択肢を戻すべきです。

1-4QeUUlctAwevU9IQ6es18g

 

また上図はラジオボタンにデザイン上のアレンジを加えたものですが、ワンクリック(もしくはワンタップ)でユーザーが選択できるようにしましょう。

 

 

選択肢は論理的な並びに

 

ラジオボタンは通常複数の選択肢とともに使用されますが、その選択肢の並び方は論理的であるべきです。例えば「最も選ばれそうなもの→選ばれなさそうなもの順」、「シンプルなもの→複雑なもの順」、「リスク低いもの→高いもの順」などが論理的な並びと言えます。

 

一方で、「あいうえお(アルファベット)順)は避けるべきです。ローカライズされた選択肢とは言えないためでしょう。

 

 

選択肢は誰もが理解でき明確なものを

 

ラジオボタンに関するユーザビリティ上の問題のほとんどが平均的なユーザーに理解できない選択肢の内容やその説明文にあります。文脈的に説明することがユーザーの助けとなります。

 

デフォルトでどこかを選択している状態にしておく

 

UIデザインの経験則のひとつに、ユーザーは「元に戻す(やり直す)ことができる仕様にするべき」という鉄則があります。これがラジオボタンになると、ユーザーは選択肢を選び直すことができるということになります。

 

なにも選択されていない状態ではなく、デフォルトで任意のラジオボタンが選択されている状態にしておきましょう。

 

1-XFTe3mIh5qe-b_SuKRnB2g

 

選択肢は「垂直」に配置する

 

水平に並んだ選択肢は全体を俯瞰するのが難しい上にローカライズしにくいものです。

 

1-delPdzL0uBi5IioCBVvBXA

そのため水平に並んだ選択肢はユーザーと合致する項目を選択するのがやや難しくなります。選択肢は垂直に並べるのが無難です。

 

クリックしやすいよう「<LABEL>タグ」を使う

 

ラジオボタンは往々にして小さいものです。そのためクリックの有効範囲をボタンだけにしてしまうとクリックやタップ操作がしにくくなります。

 

1-jqId9TYCFSVFvO8sly_S4Q

<LABEL>タグを用いてクリック範囲をテキスト全体にかかるようにしましょう。

 

プルダウンよりもラジオボックスを使う

 

可能な限り選択肢はプルダウンよりもラジオボックスを使いましょう。というのもラジオボタンは選択肢全体を認識しやすいため、ユーザーは各選択肢を比較・検討しやすくなります。

 

1-rYbrfGQxZmr454zCIjKcbA

 

目安として選択肢が7つ以下ならプルダウンよりもラジオボックスを使うことを検討しましょう。

 

ラジオボックスは「入れ子」にしない

 

1-WzeH5eN3K4ryVn6KoTm9RQ

 

ユーザーの混乱を招きますので、選択肢は同じレベルのもので統一するようにしましょう。

 

 

アニメーションを使って視覚的なフィードバックを返す

 

pooop

 

よくできたアニメーションは作りこまれている印象を与えることができます。またユーザーにも自分が選択したラジオボタンを視認しやすくなるので、視覚的にインプットされた内容を「返す」ことは誤入力を抑える効果もあります。

 

チェックボックスは最良の選択肢?

 

1-JjQTUIbWNM1x5OMVuyAVGw

 

もし選択肢が二つしか存在しないのなら、チェックボックスを使うこともできます。

 

しかしチェックボックスは選択肢がひとつしかないもの(「同意刷る場合はチェック」など)に使われるのに対し、ラジオボタンはさまざまな選択肢がある場合に使われます。

 

チェックボックスはシンプルな「はい/いいえ」で答えられる質問に、ラジオボックスは「はい/いいえ」では答えられない質問に、という使い分けがいいでしょう。

 

 

いかがだったでしょうか?

ラジオボックスも考え始めるとなかなか奥が深いものです。でも「魂は細部に宿る」と言われるように、ラジオボックスにも適切なデザインが必要です。

 

この機会にラジオボックスのデザインをもう一度確認されてみてはいかがでしょうか?

 

 

(※本稿は「Radio Buttons UX Design」を翻訳・参考にしたものです)

関連記事

おすすめ記事