web-dev-qa-db-ja.com

ラジオボタンの重複を減らすにはどうすればよいですか?

ウェブサイトのスコア計算機を再設計するように依頼されました。現時点では、次のようになっています。

enter image description here

ラジオ入力を最適化して、それほど多くの繰り返しが行われないようにする方法があるかどうか疑問に思っていましたか?

ラベル(合格、メリット、区別)を列見出しとして配置することを検討しましたが、おそらくユーザーがフォームを操作していると、各入力が何に対応するかを忘れる可能性がありますか?

更新

明確にするために、採点システムは複雑であり、私が制御できるものではありません。アンドリューマーティンが以下のコメントで指摘しているように、成績はスコアから派生しているようです。残念ながらそれはそのようには機能しません、そして私はそれがあまり直感的ではないことに同意します。

39
sol

実際には、これを少し重くする方法があるかもしれません。

あなたの状況では、あなたは絶対に必要ではない言葉を繰り返しています。目に優しいように、呼吸スペースと視覚的なデザインを追加することに加えて、このようなものを試してください。ワイヤーフレーミングツールの問題は、目の色を柔らかくするために異なる色を選択できないことです。

mockup

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

ラベルが常に表示されるように、ヘッダーが上部にくっついていることを確認してください。

86
Majo0od

製品デザインの秘訣????

スコアとランクは個別に決定されるとのことですが、これは、誰も求めていないが誰もが望んでいた機能の古典的な例のように思えます。

テスト設計者は、スコアとランクがどのように関連しているかを考えたシステムを持っている必要があります。より深く掘り下げて、この問題のどこかに機能の機会が隠されていないかどうかを確認してください。

スコアがある場合、潜在的な合計があります。私はワークフローしか想定できません:

  1. 各「クラス」の合計に関するデータで「テスト」を設定します
  2. オプションで、合格/メリット/区別のスケールをカスタマイズします
  3. この既知のテストに対する各評価のフォームに記入します

システムに思考をさせましょう????

システムは、スコアnがランクxと等しいことを認識している必要があります。ユーザーに1つしか実行できないときに2つのことを行わせないでください。単純な数値を入力し、voilaを計算します—ランクが計算されます!

これにより、人的ミスの潜在的なポイントも排除されます。

Examples of score input with system-generated classification

例についてのいくつかの注意:

  • アイコンはフレンドリーですか????
  • 良い/優れた音はメリット/区別よりも自然な音
  • 潜在的な合計を補強するか、構成をインラインで許可することができます

最悪のシナリオ

システムがそのすべてに無知である場合は、ユーザーのアクションをできるだけ明確にしてください。次に、彼らの行動を監視し、無知が正当化されることを確認します。

Classification selector as text-based toggle

44
plainclothes

DesignerAnalystのソリューションのわずかな変更:

Star rating

  • 星評価は一般的に使用され、知られています
  • 事前選択はできません
  • スライダーとは対照的に、許可されている状態は3つあります。
  • ヘッダーは必要ありません。各ラベルはすぐに星の意味を伝えて変更されます
33
svenmeier

これまでに伝えられてきたことの視覚的なアイデア:

mockup

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

ただし、コンボボックスを使用するには、ラジオボタンを1回クリックするのではなく、2回クリックする必要があります。後者を好む場合は、フローティングヘッダーを使用してください。

12
Mike

私が非常に多くのラジオボタンで抱えている問題は、信号対雑音比が低いことです。状態は、小さな円(テキストの横)内の小さなドットの有無によって表されます。テキストを複数の行に繰り返しても、印象が悪くなるだけでなく、無限のフィールドで迷っているように感じることがあります。

ラジオボタンのスタイルを変更するだけで、より多くのピクセルがその状態の視覚化に寄与するようになり、状況が改善されます。

Background color specifies radio button's state

選択したラジオボタンを異なる背景で表示することをお勧めします。

煩雑さを減らすことができる防御の2番目の行は、選択されていないボタンに淡色表示または非表示のテキストが表示されないようにすることです。

  • それらは、未決定の行またはマウスの下の行で淡色表示されます。
  • 逆に、マウスの下ではなく決定された行では非表示になる可能性があります。

一部の不要な垂直ステムを削除することも役立つ場合があります。

12
NonNumeric

通常、インターフェースは単語で過負荷になっているため、ユーザーにとってインターフェースはより困難で効率的です。私は言葉のないソリューションをお勧めします。 3つの状態のスライダーまたはカスタムの3つの状態のグラフィックコントロールを試すことができます。

mockup

編集:

Majo0od(グリッド線なし)による言葉のないソリューションは、上記の2つの推奨事項よりもはるかに優れています。議論のためだけに残しておきます。

4
DesignerAnalyst

列ヘッダーソリューションが正しい選択だと思います。しかし、あなたが正しく述べたように、これは新しい問題を生み出します:ユーザーはそれらのラジオの意味を忘れるかもしれません。

この最後の問題にのみ焦点を当てると、スティッキーヘッダーパターンを使用できます。したがって、コンテンツをスクロールすると、ラベルを含む行全体が一番上にくっつき、行はその下にスクロールするはずです。

自分で説明してほしい。

3
TheManuz