ふと気になるラジオボタンの初期値や必須マークのこと

ラクスデザインチームのオノダです。
ラクスでは定期的にLT会を開催しています。今回は誰もが一度は操作したことのある「ラジオボタン」についてのお話です。UIデザイナーやエンジニアさんにも馴染みの深いボタンであると思いますが、このラジオボタンを使用する上でふと思う疑問についてあらためて考え、自分なりの解決方法をお話しました。

1.ラジオボタンについて改めて整理

まずは、改めてラジオボタンのおさらいから。

radio button（ラジオボタン）
選択肢のグループから1つのみを選ぶために使用されるコントロール。同一のグループの中で、すでに選択されている項目とは別の項目を選ぶと、それまで選択されていた項目のチェックは自動的に解除される〜〜（省略）〜〜
初期状態から、選択肢のうちどれかひとつが選ばれていなければならない。
出典：ソシオメディア 用語（一部抜粋）

この中に「初期状態から選択肢のうちどれか一つが選ばれていなければならない」というルールがあります。私もこのルールに沿ってUIデザインの一部に使用しているのですが、普段スマホアプリやWEBアプリを使う中で、このルール以外の使い方も多く見られるため、正しい使い方とは何なのか疑問に感じていました。さらに初期値があるが故に入力フォームで必須マークの表示はどうするべきか、細かなことですが他にもいくつか疑問が湧いてきました。

2.ラジオボタンに係る４つの疑問

ラジオボタンの使用に関する疑問を以下にまとめました。皆さんも同じ疑問を持たれたことはないでしょうか？

1.入力フォームのラジオボタンには「入力必須マーク」は必要？不要？
初めから1つ選ばれているならあえて「必須」と言われなくたってチェック済み。でも必須マークがついているものも多く見たことがある。

2.そもそも初期値が入ってないものもよく見かける。
ラジオボタンの使用ルールと異なっている。でも正直、これもよく見かける。

3.初期値に引っ張られて判断ミスや入力ミスに繋がるのでは？
入力忘れがない分、内容をちゃんと読まないと誤った登録や、無意識に意図しないものを選択してしまうのでは。

4.言わずもがな、平等であるべき。
性別の入力時など、初期値も平等であるべき。初期値やその順番に意味をもたせてはいけない。

これらの疑問を解決すべくネットで検索や周りへ聞き込みを行いました。

3.ネットで調査＆周りのデザイナーへの聞き込み

ユーザビリティの専門家 ヤコブ・ニールセン氏の記事を調べたところ、以下のような記述がありました。

●ラジオボタンは、常に1 つの選択肢が選択されているはずのものだ。したがって、初期値がないラジオボタンを提示するべきではない。
●「もしユーザがどれも選択できないというようなことがある場合、例えば「該当無し」と いったラベルのついた、その目的のためにラジオボタンを用意しておくべきだ。
●ラジオボタンでは常に選択肢を 1 つ選択していなければいけないため、選択肢は包括的で、明確に区別できる必要がある 。

出典：U-Site UXコンサルティング＆リサーチbyイード「チェックボックス対ラジオボタン」（https://u-site.jp/alertbox/20040927/）

つまり、ニールセン氏がおっしゃっていることをまとめると
●ラジオボタンは初期値が必要
●その選択肢は包括的でなくてはならない。例えば「該当なし」等
となる。

やはり初期値は必要、というルールは変わらないようです。
しかし、あらためて日常的によく使うSNSやWEBやアプリのラジオボタンの使われ方を見ても、ルールの通りではないものをすぐに見つけることができてしまいます。

4.ラジオボタン使用の際の考え方まとめ

ネットや本を調べても求めている答えが見つかならないため、同じチームのメンバーや関係者に話を聞いたり、よく使うアプリやWEBサービスのラジオボタンの使われ方を踏まえ、自分なりに一つの結論を導き出しました。

これまで初期値の有無にこだわって悩んでいたが、そもそも、不可逆なシステムにしないことが重要。そして、デフォルトの状態で、いずれかの項目が選択された状態になっている場合には初期値を入れておく必要がある。

さらにまとめると、ラジオボタンを使う際は、一律、初期値を指定するのではなく「初期値が必要なケース」と「必要ではないケース」にわけ、且つ、その内容に応じて入力必須マークの有無を考えることとします。
（以下、左が初期値を設定して使用するケース、右が初期値を設定しないで使用するケースです）

（補足：すべてのケースに上記内容が当てはまるわけではありません。チームやプロダクトごとUXを踏まえた上で定義することが重要と考えています。）

終わりに

UIデザインを検討する際は、様々な条件下で最適なものを導き出す必要があります。ネットや本の中に答えが書いてあることは少ないため、ラクスでは、各プロダクト開発で発生する課題や疑問に対してチームで話し合い、より良いUIデザインを検討しています。

ラクスでは現在UIデザイナーを募集しています。
ご興味がありましたら、こちらの募集要項からご応募ください。
お待ちしています！