web-dev-qa-db-ja.com

ラジオ入力を「ボタン」に置き換えますか? (ウェブフォーム)

UXは、無線入力フィールドを少し違ったものに置き換えるのがいい(または大丈夫)UXですか(画像を見て、私の意味を確認してください)。ほとんどの人はそれらの1つをクリックする必要があることを理解していると思いますが、私にはわかりません。

「女性」と「男性」には、フードの下に表示されないラジオボタンがあります。

デモ画像:

enter image description here

ライブデモ: http://fiddle.jshell.net/s5uEX/show/ (最新のFirefoxでテストされました。意味論的に正しく、CSS3/non-jsバージョン(シャドウなしなど))もちろん、後でもあります)

編集:

私はあなたの返事に基づいて多くを変えました(ありがとう!)。 http://fiddle.jshell.net/ge8Su/show/ -通常のラジオボタンのように見えます。私の意見では、ユーザーの期待と私が達成したいことの間の良い妥協点です。

new form

11
Edxx

私は両方の世界のベストを尽くして、ボタンスタイルにラジオボタンを追加して、タッチとデスクトップに適したものにします。

New proposal

8
Karl Mendes

それで、Repeat Passwordコントロールをタップすると、アプリが私のパスワードを再入力しますか?

それが問題です。すべてのコントロールが同じように見える場合、ユーザーはコントロールとの対話方法がわからなくなります。スペースを消費してユーザーを遅くするテキストの説明を含める必要があるか、ユーザーが停止してインターフェースの使用方法を考える必要があります(「うーん、それはすでに女性と男性を示しているので、タイプするのではなく1つを選択していると思います何かが入り、フィールドが設定されると思いますが、追加の性別情報を表示するために別のページに移動する可能性があります... TAMIDSインターフェースがあります:どこでもタップしてください。多分それは何かをします。

異なるコントロールは異なるように見えるはずです。テキストボックスのようなコントロールは、標準のテキストボックスコントロールのように見える必要があり、ラジオボタンの動作を持つコントロールは、標準のラジオボタンのように見える必要があります。チェックボックスの動作を持つコントロールは、標準のチェックボックスのように見える必要があります。ユーザーエクスペリエンスを活用するには、標準の外観を使用する必要があります。そのため、ユーザーは動作を予測できます。ユーザーが新しい「コード」を学習する努力をしなければならないため、コントロールを区別する場合でも、非標準の外観はお勧めしません。外観はどの程度基準に近い必要がありますか?すぐに認識されるのに十分近い。ラジオボタンの場合は、内部にドットのあるほぼすべての円で十分ですが、一般に、最も簡単で安全な方法は、コントロールのデフォルトの外観を使用することです。

これらのラジオボタンをテキストフィールドのように見せる利点はありません。少なくともデスクトップの世界では、キャプションとラジオボタン自体は入力の影響を受けやすいため、ターゲットサイズの問題ではありません。テストで、性別を選択する際の応答時間に悪影響を及ぼさないことが示されている場合でも、基準に従わないと、その有用性が損なわれ、あいまいな場合にユーザーが他の状況で混乱する可能性が高くなります。

9

モバイルフォームの場合、私はそれが好きです。 タップしやすいタッチデバイスではオン、かなり直感的(少なくとも私にとって)。追加する予定のシャドウを使用すると、改善される可能性があります。

それが非モバイルフォームのラジオボタンのより良い代替手段であるかどうかはわかりませんが、大きな問題が発生することはないと思います。もちろん、あなたはこれをテストするを確認する必要があります。

あなたが直面するかもしれない1つの興味深い問題は、それが大幅にclearerであるということです。 デフォルトの状態を選択するという問題に遭遇しましたが、誰かが実際にそれをデフォルト値にしたいか、または誤って値を入力したままにしたかをどうやって確認しますか。また、テストするもの。

6
JohnGB

試してみたので、特に上に移動すると「ボタン」がハイライトされるので、それは十分に明確だと思います。私はそれが携帯電話でどのようになるかわかりませんが、それは十分に明確で明白だと思います。

基本的に、これまで行ってきたことは、標準のラジオボタンコントロールを使用してスキンを適用したものでした。ただし、ここではうまく行っており、ボタンに似ているため、コントロールのアフォーダンスはかなり明確です。

だから、うまくいくと思います。

3

優れたビジュアルデザインで修正できる問題がいくつかあります。

  • これらのオプションのどれが現在「オン」ですか?
  • 選択は相互に排他的ですか(つまり、これらのラジオボタン、またはチェックボックスですか)?

最初の問題については、あいまいな治療法を見てきました。選択するオプションが3つ以上ある場合は、通常、どれが選択されたオプションであるかはかなり明確です。ただし、これを混乱させる環境については、問題2を参照してください。

2番目については、曜日の選択に同様の処理を使用することを想像できます。火|水|木|金|土| Sun]毎日、独立して非相互に排他的に「オン」にすることができます。コンパクトですっきりとしており、乱雑さが最小限に抑えられていますが、[1-1-2]の表示では、状態「1」が「オン」であるか、状態「2」が「オン」であるかが不明確になっています。

3
Erics