【UIシリーズ】選択肢の管理
選択することがこれほど楽しいとは思いませんでした。チェックボックス、ラジオボタン、トグルのデザインなどについて詳しく解説しています。
「toggle」という言葉は、ハンドルが短いスイッチを指し、押す度にONとOFFが切り替わるという特徴があります。
「Radio Buttons」という言葉は、カーラジオの文字盤の下にあるボタンから来ています。ボタンを1つ押すと、次のボタンを押すまでボタンは押したままになります。
Checkboxes —1つまたは複数の選択肢があり、ユーザーが「なし」「1つ」「複数」など、任意の数の選択肢を選択できる場合に使用されます。
Radio buttons —2つ以上の選択肢のリストがあり、ユーザーがそのうちの1つだけを選択しなければならない場合に使用されます。
Toggle switches — 異なる2つの選択肢がある場合に使用され、常にデフォルト値を持ちます。トグルの選択はすぐに反映されます。
Choice chips - ラジオボタンに代わるコンパクトな選択肢です。Choice chipsは、少なくとも2つの選択肢を含み、ユーザーが1つを選択することができます。
Multi-select chips — チェックボックスに代わるコンパクトな機能です。ユーザーが複数の選択肢を選ぶことができ、主にモバイルでのフィルタリングに使用されます。
選択肢の管理をする際、どのようなタイプにするか常に関心が寄せられます。ここでは、状況に応じて適切なタイプを選択するための簡単なカンニングペーパーをご紹介します。
Point 1: States
チェックボックスやラジオボタンには選択・非選択があり、トグルにはオフ・オンがあります。これらすべてには、enabled, disabled, hover, focused, pressedなどの状態があります。たくさんあるように見えますが、信頼性の高いフォーム作りのためには、これらの状態をすべて把握し、使いこなせるようにするのが良いでしょう。
Point 2: 不確定な状態を忘れずに
チェックボックスの状態で、チェックもアンチェックもされていない状態。この状態は完全には決定されていないため、「不確定」という名前が付けられています。親のチェックボックスに複数の子要素がいて、その中に選択されているものとされていないものがある場合を考慮して作られました。
Point 3: トグルスイッチの誤用をやめる
トグルスイッチで階層構造を作らないようにしましょう。視覚的に邪魔になるだけでなく、子要素の選択肢がすべてOn/Offであるかのような誤った印象を与える可能性があります。
Point 4: 選択をすぐに反映させたい場合はトグルを使用する
トグルスイッチは、デジタルのオン／オフスイッチです。トグルスイッチの効果はすぐに反映されるべきです。そうでない場合は、トグルスイッチを1つのチェックボックスに置き換えるのが良いでしょう。
Point 5: 見慣れないスタイルはユーザーを混乱させます
デザインしたプラットフォームで標準とされているものから逸脱することは、ユーザーにさらなる認知的負荷を与えます。よく見かけるのは円形のチェックボックスですが、これはラジオボタンと混同してしまうことがあります。
Point 6: 選択肢を縦に並べて表示しましょう
チェックボックスやラベルを左寄せにすると、お互いの位置が近くなって効率的です。これにより、作業時間を短縮し、ミスを減らすことができます。反対に右揃えは、ラベルとボタンが離れすぎないため、携帯版でもメリットがあります。ボタンが右端に寄っていると、片手でデバイスを持ったときに手が届きやすくなります。また、選択時に指でラベルが見えなくなることもありません。
Point 7: スペースに余裕がない時は、チップを検討してください
どのコントロールが選択されているのかが非常にわかりにくいという状況を防ぐ必要があります（ボタンやラベルのスペースを確保してください）。選択肢を明確に視覚的に分けるために、チップの使用を検討してください。
Point 8: なるべくドロップダウンではなくラジオボタンを
すべての選択肢を常に表示し、ユーザーが簡単に比較できるようにすることで、認知的な負荷を軽減し、フォームがわかりやすくなります。
Point 9: 多数・類似の選択肢にはドロップダウンを使用する
選択肢の数が6～7個以上の場合、ユーザーはすべての選択肢を覚えておくことができないため、ドロップダウンに入れることを検討すべきです。同じことが、（ズーム - 10%, 20%, 30% ...）のような予測可能な、類似した、または増減のある選択肢にも適用されます。
Point 10: 初期設定でラジオボタンが選択されている方が良い
ラジオボタンが選択されてしまうと、ユーザーは選択を解除して元の状態に戻すことができません。ユーザーが選択しない時がある場合は、"None "と書かれたラジオボタンを用意してください。また、選択肢のリストを、”予想される回答数が多い順”など、論理的な順序で構成しましょう。
Point 11: 明確なラベルを書き、否定を避ける
トラブル回避のため、ユーザーがボックスにチェックを入れなければならないような状況は避けてください。
Point 12: 選択された部分を強調してユーザーの注意を引く
選択された部分を他の選択肢と視覚的に区別することが大切です。特に、データテーブルの行選択において重要な役割を果たします。
Point 13: 一括選択・一括消去に対応
複数のアイテムを一度に選択したり、クリアにしたりする機能があれば、ユーザーに負担をかけずに済みます。
Point 14: 確実な操作のために、クリックできる部分を十分に大きくする
クリック/タップが反応される部分には、ボタンとラベルの両方を入れてください。フィッツの法則によると、ターゲットの大きさはとても重要な役割を果たします。チェックボックスやラジオボタンは一般的に小さく、特に携帯ではクリックやタップするのに苦労することがあるのでそういったことは避けましょう。
原文：https://uxdesign.cc/selection-controls-ui-component-series-3badc0bdb546
著者：Taras Bakusevych
本記事は2020年6月24日に公開された情報を和訳、追記したものです。
英文を翻訳したものであるため、詳細や正しい表現は原文を参照ください。