web-dev-qa-db-ja.com

ラジオボタンをレスポンシブに使用する

私はフォームデザインのプロジェクトに取り組んでいます-ユーザーに7つのオプションの選択肢を提供します。プロトタイピング(Axureで)を使用すると、携帯電話を使用しているユーザーが画面上のラジオボタンを選択するのが難しいようです。私はiOSウィジェットキットからボタンの画像を調整して作成しました(そのため、ボタンの画像は大きくなっています)が、同じコメントが表示されています。

デスクトップディスプレイからモバイルレスポンシブまでのラジオボタンについて、良い実践や研究があるかどうか知りたいです。オプション全体(単語を含む)をクリックしてモバイルのターゲットを拡大できるグリッドの一部になる必要がありますか?

フィードバックおよび/または研究へのリンクをいただければ幸いです。

注:ラジオボタンを備えた実際のレスポンシブフォームを試してみて、それがプロトタイプの機能にすぎないかどうかを確認して、フォームデザインに関する追加の調査を行います。

2
Stephanie Pratt

ユーザーに7つのラジオボタンを表示する代わりに、ドロップダウンを使用することをお勧めします。

モバイルのリファレンスは Apple HIG -"5つを超えるアイテムを表示する必要がある場合はポップアップメニューを使用することを検討してください。"

3
Paul Farino

最近、ほとんどのラジオボタンをボタングループに置き換えています。タッチスクリーンでは、ドロップダウンは直感的にわかりにくいだけです。

enter image description here

すでにこれを行っているとのことですが、これが最善の解決策であることに同意します。小さなデバイスでの垂直フローを考慮してください。それでも人々がそれらを選択するのに問題がある場合は、それらを大きくするか、ディスプレイの幅に合わせて伸ばすことを検討してください。

0
Lee Harrison

低解像度で常に値にスナップスライダーを組み込むことができます。
7つの小さなボタンよりもはるかに簡単に操作できます。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

0
Nit