UI基礎知識①ーラジオボタンってなんだ？
本投稿はUIデザインという面白い世界に
勢いとノリで入ってみたデザイナーがUIの基礎知識を蓄えていくnoteです。
はじめに
知識ゼロ、経験ゼロだった私が、UIデザインの現場に入って1年。
目の前のタスクをこなすことで必死すぎて、
ぶっちゃけ基礎知識がついてる気がしないので、このままではまずい…。
そんな焦りから、きちんと言語化して理解していきたいと思います。
ラジオボタンをググる
🔘←こいつについて調べてみましょう。
ラジオボタンは、選択肢の中から必ずひとつ選ぶ時に使う選択式フォームです。ひとつのボタンを選択すると、他のボタンは未選択の状態になります。
選択肢のグループから1つのみを選ぶために使用されるコントロール。同一のグループの中で、すでに選択されている項目とは別の項目を選ぶと、それまで選択されていた項目のチェックは自動的に解除される。
どうやらラジオボタンを使用する際には、
「選択肢から1つだけを選ぶ」といったルールが存在している模様。
他にもルールがありそうなので、もう少しググってみる。
U–Siteにルールがまとまっているので、
こちらをベースに整理してみましょう。
https://u-site.jp/alertbox/toggle-switch-guidelines
ルール①
設置可能な選択肢の数は複数
これは言葉の通り。
むしろ一個のみのラジオボタンが成立しないとも言えるかも。
ルール②
ユーザーが選択可能な数は一つ
前述したように、複数のラジオボタンの中から一つだけ選ぶ。
ラジオボタンは複数選択できない。
ルール③
デフォルトオプションはあり
デフォルトオプション＝初期値（デフォルト値）かな。
ラジオボタンは項目が選択されている必要がある。
でも選択されてないラジオボタンも見たことある。
このルールは何から来ているんだろ…ってことでググってみた。
ざっとサマると、
・コード上（html5）としては、初期値を推奨
・アクセシビリティとしては、初期値をもたせた方が良い
といった感じ。
これ面白いな、2015年の記事なので別の記事で後から掘り下げましょう。
ルール④
選択肢同士の関係は相互排他的
相互排他的…ってなに…
「相互排他的」とはイベントが同時に発生できないこと
「相互排他的」とは数学における概念で、「ふたつのイベントが同時に発生できないこと」を意味しています。
0か1か、onかoffかといったことでしょうか。
選択している状態から、別の選択肢を選ぶと元々選択していたラジオボタンが解除されるから、常に一つだけが選択されている解釈でいいのかな…
ルール⑤
選んだ選択肢が有効になるタイミングはユーザーが送信ボタンをクリックした後
これは選んだボタンが確定するのは、送信した時。
それまでは確定しない（選択可能）ってことか。
だいぶ、粗い理解ですが、
これを知っているか否かでどのUIを使用するかの判断軸となりそう。
UIって掘り下げれば掘り下げるほど深くて広い世界なのかもしれませんね。
以上、ご査収ください。