モバイルで長いラジオボタンを表示する最適な方法

Question

私はレスポンシブフォームのデザインに取り組んでおり、モバイルで「長い」ラジオボタンオプションを処理するアイデアを誰かが持っているかどうか疑問に思っています。たとえば、次の画像を見てください。

私は少しアイデアを求めてWebを閲覧しましたが、「セグメント化されたコントロールを使用する」または「ドロップダウンを使用する」などの提案を目にしましたが、ラジオオプションごとに多くのテキストがある場合は機能しません。

何か案は？

nightning · Accepted Answer

行の折り返しと正しいインデント/ホワイトスペース

mockup

上記の例のオプション間の間隔は少しきついはずですが、アイデアは理解できるはずです。

Daniel Brown · Answer

これは興味深い質問です。

ドロップダウン：いいえ

ドロップダウンを使用することは危険です。一般に、オプションを表示するには「タップ」、オプションを選択するにはもう1つが必要なため、モバイルUXには不満を抱いています。

セグメント化されたコントロール：多分

通常、これは私があなたを指す場所です。データによっては、オプションである場合もあります。 "Button Groups" の従来のルートを使用する代わりに、データに適合する新しいコンポーネントを作成する価値があるかもしれません。

新しいコンポーネント：はい

これにはおそらく名前がありますが、なぜこのようなものではないのですか？：

（私はこれをペイントで行いました。より良いプログラムの提案にオープンします）。

エリア全体がタップ可能/クリック可能であるような種類のリストコンポーネントを使用する場合。要素が「選択された」状態であることを確認してください。間違いなくもっと手間がかかりますが、UXの大きな改善だと思います。