複数の選択肢から1つを選ばせるフォームの単一選択のコンポーネントには、ラジオボタンとセレクトボタン(プルダウンメニュー)の2種類が存在します。
それぞれにメリット・デメリットがあり、通常選択肢の数に応じて使いわけることが一般的ですが、スマートフォンにおいてはまた状況が異なってきます。
本日の記事では、スマートフォンにおける単一選択フォームコンポーネントのユーザビリティについて考えます。

PCの場合の一般的な使い分け

選択肢の展開、選択、と合計2回のクリックが必要なセレクトボックスに対し、ラジオボタンは選択肢をクリックするのみと手間が少ない一方、
あらかじめ展開しておく必要上、画面領域を大きく要するために、選択肢が多い場合にはフォームを長く、複雑に見せてしまうというデメリットがあります。
※セレクトボックスとラジオボタンの比較

メリット デメリット 向いている設問
セレクトボックス ・画面領域を必要としない ・選択肢を俯瞰できない
・展開の手間がある
・選択肢の多い(10以上)設問向き
・都道府県など
※選択肢数が多すぎる場合
ユーザビリティに難あり
ラジオボタン ・1クリックで選択完了
・選択肢を俯瞰できる
・選択肢の数だけ画面領域が必要 ・2~3つの選択肢向き
・性別、メールマガジンなど

そこで、選択肢が少ない(2~3つ)場合はラジオボタンを、多い場合はセレクトボックス、というように使い分けることを弊社では推奨しています。
※PCの単一選択フォームについては過去に下記の記事で詳しくまとめていますので、よろしければどうぞ
その選択肢、大丈夫?フォームでプルダウンメニューを使う際に気をつけたいこと
https://f-tra.jp/blog/column/2960

スマートフォンではセレクトボックスを使うべき?2つの理由

しかし、スマートフォンにおいては、たとえ2~3つしか選択肢のない単一選択であっても、セレクトボックスを用いたほうが入力がスムーズになる場合があります。
そのため、単純に選択肢の数のみで最適なコンポーネントを決定することは難しいかもしれません。
おもに下記の理由からです。

TAB移動時でも展開される(iOSのみ)

iOSのフォーム入力時に表示されるソフトウェアキーボードには、PCキーボードでいうところのTABキーにあたる、フォームの次の項目へフォーカスを移動する機能が用意されています。

スマホのTABキー
スマホの移動キー。上下の項目へフォーカスを移動することができる(iOS8)

そのため、iOSユーザーは、一度フォーム項目にフォーカスを当てた後、この移動キーを使って次の項目に移動し、入力を進めていくことが多いと考えられます。
しかしこの移動機能には、ラジオボタンをスキップしてしまうという弱点があるようなのです。
実際にテストしてみたところ、ラジオボタンの直前で移動キーを押下すると、ラジオボタンを無視し、その次の項目にフォーカスが移動しました。
ラジオボタンをスキップするiOSの移動キー
ラジオボタンをスキップするiOSの移動キー

このため、移動キーを使ってフォームを移動しているユーザーは不便を感じてしまったり、あるいは気付かずに必須項目を未入力のまま飛ばしてしまう(そしてエラーとなる)可能性があり、ユーザビリティが良いとはいえない状況です。
一方、セレクトボックスを使用している場合は、問題なくフォーカスが移動し、選択肢が展開された状態となります。
セレクトボックスの場合は、フォーカスが移動したと同時に選択肢が展開
セレクトボックスの場合は、フォーカスが移動したと同時に選択肢が展開

以上の状況から、iOSにおいては、ラジオボタンよりもセレクトボックスを使用したほうが、選択肢の数にかかわらず手間が少ない場合があることがお分かり頂けるのではと思います。
※なお、弊社が確認した限りではAndroidのソフトウェアキーボードにはTABキーが存在しないようでしたので、Androidユーザーにとっては関係がないようです。

コンパクトに表示できる

画面の小さなスマートフォンでは、単純に画面領域をコンパクトに使えるセレクトボックスのほうが、フォームをすっきりシンプルに見せてくれるという点でも有利です。

選択肢やラベルの量にもよりまずが、多くの場合ラジオボタンを用いたほうが専有する画面境域は大きくなってしまいます
選択肢やラベルの量にもよりまずが、多くの場合ラジオボタンを用いたほうが専有する画面境域は大きくなってしまいます

※現実的な折衷案

以上ラジオボタンにとって不利な理由を取り上げましたが、フォーカス(選択肢を展開)することなく、タップ1回のみで動作が完了するラジオボタンのほうが、手間が少ないことは紛れも無い事実です。
とくに選択肢の少ない設問が連続して存在するような場合には、いっそうその差を顕著に感じるでしょう。

選択肢が少ない設問が並ぶ例イメージ。セレクトボックスの場合、単純に2倍のアクションが必要になる。
選択肢が少ない設問が並ぶ例イメージ。セレクトボックスの場合、単純に2倍のアクションが必要になる。

そこで、このような設問が存在する場合、ラジオボタンの形でフォームの最後に配置すれば、入力の流れを断ち切らず、なおかつ最小限の手間で単一選択の入力を完了することができるでしょう。
ラジオボタンが最後に配置されている場合は、項目がスキップされてしまったり、流れを中断する心配がなくなる
ラジオボタンが最後に配置されている場合は、項目がスキップされてしまったり、流れを中断する心配がなくなる

最後に

本日は、スマートフォンではラジオボタンよりセレクトボックスを使いたい2つの理由と、ラジオボタンを使用する場合のポイントについてお伝えしました。
あなたのフォームの単一選択は、ユーザーのスムーズな入力の流れを遮ってしまってはいないでしょうか?
フォーム全体の選択肢の構成や、ユーザーの利用デバイスなども加味しつつ、採用するコンポーネントや配置の順番を見なおしてみてはいかがでしょうか。