ラジオボタンと初期値と必須マークの考察/uiuxdesignerslt-20210526

Transcript

1. ラジオボタンと初期値と必須マークの考察 UI/UXデザイナー LT会 vol.3 THE RADI

2. 今日のテーマ ラジオボタン とは？ 初期値は必要？ 必須マークは必要？ 使い方を改めて整理！ ラジオボタンと初期値と 必須マークの考察

3. Profile UIデザイナー 小野田純也 経験 広告・紙もののグラフィックデザイン ブランディングなどディレクション兼デザイン UI/UXデザイン 子育て真っ最中です

4. チェックボックスとは チェックボックス ソシオメディア「用語」より：https://www.sociomedia.co.jp/category/glossary 複数の選択肢の中から、1つもしくはそれ以上の項目を選択するためのコ ントロール。 クリックすることで、選択のオン／オフを切り替えることができる。 1つ 1つのチェックボックスは独 立しており、同一グループ内であっても、ほかの項目に影響を与えない。 すべてのチェックを外し、「何も選択しない」ことも可能である。

   HTML によるフォームのコントロールとしても一般的。

5. ラジオボタンとは ラジオボタン ソシオメディア「用語」より： https://www.sociomedia.co.jp/category/glossary 選択肢のグループから1つのみを選ぶために使用されるコントロール。同一のグルー プの中で、すでに選択されている項目とは別の項目を選ぶと、それまで選択されていた項目のチェッ クは自動的に解除される。 選択肢の1つは必ず選ばれている必要があるため、それぞれの項目は相互に排 他的で、択一的であるようにする。択一性を確保できない場合には、「その他」「該当なし」といった項 目を設け、ユーザーが

   1つの項目を確実に選択できるよう配慮することが求められる。 初期状態 から、選択肢のうちどれかひとつが選ばれていなければならない。HTML で作るフォームのコントロールとしても一般的。オプションボタンと呼ぶこともある。 ラジオボタンの方が説明が多い！

6. ラジオボタンとは 初期状態から、 選択肢のうちどれかひとつが 選ばれていなければならない。

7. ここで、疑問。

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

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

10. 浮かび上がる疑問 初期値に引っ張られて 判断ミスや入力ミスに繋がるのでは 入力忘れがない分、ちゃんと読まないと誤った登録や、 無意識に意図しないものを設定してしまうのでは。。。

11. 浮かび上がる疑問 言わずもがな、平等であるべき。 初期値も平等であるべき。 初期値やその順番に意味をもってしまってはいけない。

12. ネットで調べてみた。

13. ユーザビリティの専門家 ヤコブ・ニールセン氏によると ※イラストはイメージです

14. Always offer a default selection for radio button lists. By

    definition, radio buttons always have exactly one option selected, and you therefore shouldn't display them without a default selection. (Checkboxes, in contrast, often default to having none of the options selected.) • If users might need to refrain from making a selection, you should provide a radio button for this choice, such as one labeled "None." Offering users an explicit, neutral option to click is better than requiring the implicit act of not selecting from the list, especially because doing the latter violates the rule of always having exactly one option chosen. Because radio buttons require exactly one choice, make sure that the options are both comprehensive and clearly distinct. In tests with older users, for example, people couldn't complete a form that required them to select their job because it didn't offer "retired" as an option. If it's impossible to be comprehensive, offer a button labeled "Other," supplemented by a type-in field. Checkboxes vs. Radio Buttons by Jakob Nielsenon September 27, 2004 　 https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/ （出典）

15. なるほど。

16. ラジオボタンでは常に初期値を設定すること。ラジオボタンは、常に 1 つの選択肢が選 択されているはずのものだ。したがって、初期値がないラジオボタンを提示するべきではない。（その反対に、 チェックボックスはデフォルトではどの選択肢も選択しない場合が多い。） • もしユーザがどれも選択できないというようなことがある場合、例えば「該当無し」と いったラベルのついた、その目的のためのラジオボタンを用意しておくべきだ 。明確に 中立である選択肢をクリックさせるほうが、何も選択させないことによって暗示させるよりもよい。特に、何も選択させないということは、

    常に 1 つの選択肢が選ばれているというルールに違反する。 ラジオボタンでは常に選択肢を 1 つ選択していなければいけないため、選択肢は包括的で、明確に区別できる必要がある 。 例えば高齢者を対象としたテスト では、人々は職業選択欄のあるフォームを記入し終えることができなかった。「退職者」とい う選択肢がなかったのだ 。包括的な選択肢を用意できないのであれば、選択肢の中に「その他」 を設けて、自由記入欄で補完しよう。 Checkboxes vs. Radio Buttons by Jakob Nielsenon September 27, 2004 　 U-Site UXコンサルティング＆リサーチ by イードhttps://u-site.jp/alertbox/20040927/「チェックボックス対ラジオボタン」 （出典）

17. ラジオボタンに初期値は必要であり、 包括的な選択肢が必要。 つまり、

18. …しかし、日常に目をうつすと、

19. 初期値なし 必須マークなし 必須マークあり 初期値なし 初期値なし 必須マークなし 某有名SNS 某有名ネットショップ 某アンケート 包括的な

    選択肢あり

20. らちがあかないので 優しいチームのメンバーに相談。

21. 結論 （いろいろ考えた末で）

22. 初期値の設定有無よりも、まずは 大前提、不可逆なシステムにしないこと

23. デフォルトの状態で、いずれかの項目が 選択された状態になっている場合は 初期値を入れておく必要がある。

24. 整理すると、

25. 初期値有り 初期値無し システム上で、現在の状態か ら何かを変化させる機能を 持ったラジオボタンは初期値 （初期の設定）を指定してお く。 アンケートのようなユーザーが 選択肢を単純に選択するだけ のものは初期値が

    入ってなくて良い。

26. 初期値有り 初期値無し システム上で、現在の状態か ら何かを変化させる機能を 持ったラジオボタンは初期値 （初期の設定）を指定してお く。 アンケートのようなユーザーが 選択肢を単純に選択するだけ のものは初期値が

    入ってなくて良い。 デフォルトの設定があるので 必須入力マークはなくても良い 必ず答えて欲しい項目は必須マークを つける。 ただし、包括的な選択肢を用意するこ と。

27. スッキリ！

28. みんなで相談しながら楽しく プロダクトを成長させませんか？ ご清聴ありがとうございました