web-dev-qa-db-ja.com

チェックボックスのリストに「上記のいずれでもない」オプションを追加する

私は一連の複雑な生命保険フォームに取り組んでおり、標準的な規則を使用して最適化しようとしています...

私はこの厄介な医学疾患のリストと、相互に排他的なオプション「上記のどれでもない」を持っています。

ユーザーに条件がない場合、クライアントはユーザーに法的な理由でこれを明示的に述べることを要求します。

何かアドバイス?

enter image description here

60
Adam Stone

私の最初のアイデアはイザキの答えと同じでしたが、後でこれを考えたところ、それはあなたの目標を達成し、欠点のないユーザー対話の必要性を(少なくとも少し)減らすようです。

(編集:constastのカラーデザインを改善してくれた@dennisleesに感謝します。UIの残りの部分とうまくいけば、IMOは一貫性を改善しますこのアプローチの)

mockup

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

編集

この場合最初のラジオボタンをデフォルトとして設定する方が良いと思います必要な「明示的な」アクションは2番目であり、最初のアクションをデフォルトとして設定すると1クリックが保存されますおそらく「ユーザーが最初のラジオボタンをクリックすることにした場合」のほとんどの可能性を避けます。シチュエーション。ところで、IMOの状況は、ユーザーがすべてのチェックボックスを空のままにした場合と同じです(ラジオボタンのないデザインの場合)。とにかく、後で検証する必要があります。いくつかの回答は主に(表示されたUIに基づいて)ユーザーの行動に集中しており、ビジュアルデザインでの質問に注意を払っていません。 UXアプリケーションの使用時にユーザーの認識と動作を変更/誘導する

ポイント

私にとってここで最も重要なことは、「上記のどれでもない」と他のオプションの間の二分法を可能な限り視覚的に明示することです
それを行う1つの方法は、最初のモックアップのようにラジオボタンを使用することです。

[〜#〜] kiss [〜#〜]

これはより単純なアプローチであり、その違いも明確になります。
(ところで、 Keavonが投稿しました 私が私の回答を編集し始めていた間、同じアイデアを持つ非常に類似したデザイン)

mockup

bmmlソースをダウンロード

了解しましたが、なぜこの最後のアプローチを使用しないのですか?

最近私はこれを見ました アクセシビリティについての質問 入力のコントラストレベルのようなことに気づかされました。情報メッセージをどこにでも配置し始めるか、ユーザーがアプリの動作を理解している/快適であると想定しない限り、「より単純な」アプローチはその必要性をサポートしません。

したがって、特にこの場合、フォームに「Eyesight条件」などのオプションが含まれている場合、コントラストの問題を考慮に入れることは適切(かつ一貫性)ではありません

98

Rewobs 'answer は良いですが、2つのレベルの複雑さを伴います。最初に2つの比率ボタンの1つをクリックしてから、チェックボックスを選択します。そのデザインのユーザーエクスペリエンスは、単に視覚的に分離されたNone of the above下部のボックス。

誰かがユーザーの選択をクリアすることを提案しましたが、誤ってチェックボックスをオンにすると進行状況がクリアされるため、それは悪いことです。代わりに、他の選択肢をグレー表示して、選択可能にします。ユーザーが灰色で表示されたボックスの1つをオンまたはオフにする場合は、None of the aboveボックスを使用して、それらを再び表示します。

ユーザーがチェックボックスを選択せず​​にフォームを送信しようとすると、None of the aboveチェックボックスをオンにすると、ユーザーが何かを選択し忘れたために戻って問題を修正できることがわかります。

With options checked

With "None of the above" checked

19
Keavon

チェックボックスは複数選択に使用されるため(理論的にはnone of the aboveと別のオプション-Javascriptはこれを「修正」できますが、ユーザーには明確ではありません)。

私はあなたの質問に直接答えていないかもしれませんが、代わりにこの形式を検討してください:

mockup

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

ユーザーが各アイテムにnoを明示的に言う必要があるため、クライアントにより良いサービスを提供すると思います(これをシングルクリックで実行したい場合は、tick allボタン)。

コントロールはラジオボタンで、回線ごとに1つだけ選択できます。どちらもチェックせずにユーザーアクションを強制することから始めて、いいえと言ってください。

17
Izhaki

「上記のどれでもない」チェックボックスを他のすべてをクリアにする

あなたが持っているUIを維持しますが、「上記のどれでもない」(NoTA)チェックボックスが他のすでにチェックされているボックスをクリアするJSのビットを追加します

ユーザーがNoTAをクリックするだけの場合、フォームは期待どおりに動作します。最初に他のいくつかのオプションをクリックし、次に[NoTA]をクリックすると、フォームを簡単に処理できたかどうかに気づかれないでしょう:)

現時点では例を考えることはできませんが、ロジックが異なるためにグループ内のオプションをクリックして他の部分に影響を与えるという経験は、型破りではありません。基本的に、一種の検証を組み込んでいます。したがって、UIの警察が非従来型の理由であなたを引き上げていることを心配しないでください。

「メンタルモデル」「複雑さ」に基づく異議について

チェックボックスにクリア機能を追加しても、ユーザーのメンタルモデルと期待が崩壊することはほとんどありません。私たちがここで見ているものから、代替手段には、UIと指示の追加、明快さの低下、および複雑さの追加が含まれるようです。

これは、実用的な馬の前に理論のカートを置くように私を襲います。

12
dennislees

tl; dr間違いを犯したときに誰かが横に立っている間、ユーザーが紙に記入しているようにフォームを動作させます。


私はあなたのデザインにリアルタイム検証を追加し続けます:

mockup

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


何かが正しくない場合は、最後の行を変更します。

mockup

bmmlソースをダウンロード


ユーザーが正しく理解した場合、最後の行は単に消えます(ユーザーは「問題ありませんでした、文句を言わなくなった」と考えます)。

mockup

bmmlソースをダウンロード


もちろん、フォームの送信時にも同じ検証が行われるはずです。何かが適切に停止しない場合は、エラーをポップアップし(正確に同じメッセージをリアルタイムで表示するのが最善です。一貫性を保つため)、修正する必要がある質問に自動スクロールします。

11
Alex

チェックボックスは使用しないでください。

私はそれを2つの質問に分けようとします:

  1. 過去3年間で、何か厄介な病気はありましたか?
    ○はい
    ○いいえ

  2. どれ?
    ○頭痛
    ○風邪
    ○インフルエンザ
    ○関節炎
    等。

質問1に対して「はい」と答えた場合にのみ、質問2を表示します。

欠点は、ユーザーがリストにない病気にかかった可能性があるため、「はい」を選択してから、質問2で何に答えるべきかについて迷惑になることです。

その場合、おそらく最後の(キャッチオール)「その他」オプションを質問2に追加できます。ビジネスロジックがそれを許可していないのかもしれませんが、わかりません。

8
carlu

TL; DR同様のニーズに対して行われた非公式のユーザビリティ調査に基づく(ただし、異なる問題領域で):

  1. 「その他のオプションなし」オプションを他のオプションのリストから分離します。
  2. 最も一般的なリストが最初になるように、2つのリストを並べて配置します。
  3. 「その他のオプションはありません」オプションは、他のすべてのオプションと同様に、チェックボックスにする必要があります。
  4. チェックボックスはトグルとして機能する必要があります。「なし」を選択すると、他のチェックボックスは無効になります。他のいずれかが選択されている場合、「なし」は無効になります。
  5. テキストの色/フォントの太さ/フォントスタイルを使用して、「なし」を他のものと区別します。

Sample implementation

JSフィドル


設備状態の問題の長いリストで同様の問題に直面しました(カビ、壊れた窓、欠けたペイント:部屋が持つようなカテゴリの問題の特徴が信じられないでしょう)。人が部屋の状態のウォークスルーを実行するときは、明示的にsomethingをチェックして、実際に部屋の状態を確認したことを主張する必要があります。

報告されたユーザビリティの問題:すべての部屋に多くの問題がある一方で、部屋の95%以上に0個、1個、または2個の問題があります。最も一般的なオプションは「なし」で、2番目に一般的なオプションは「1」と「2」で、ほぼ同じ確率です。 3つ以上の負の状態の部屋はほとんど存在しません。

私は4つの異なるシナリオで非公式のユーザビリティ調査を実行しました。

  1. 下部に「これらのどれでもない」チェックボックスが付いたオプションの長いリスト。
  2. 1と同じですが、チェックボックスの代わりに「これらのどれでもない」トグルボタンを使用します。
  3. 長いリストですが、「これらのどれでもない」チェックボックスがフローからオフセットされています。
  4. 3と同じですが、ボタンはオフセットされています。

コントロールと元の実装は#1でした。すべてのシナリオは、同じフォント、同じ行間隔など、同様のフォーマットで表示されていました。「なし」オプションを選択した場合、「リストのグレー表示」はありませんでした。 (気にかけると、人口統計:62人のユーザー、37歳の平均、59%が女性として報告され、5%が色覚異常を経験したと報告されています。)

私の理論では、「なし」オプションは視覚的にオフセットされ、視覚的に明確な要素であるので、#4が最高のユーザビリティを得るということでした。

ASCIIアートでは、これらのシナリオは次のようになりました:

#1
[ ] Mold, walls
[ ] Paint, chipped
[ ] Paint, faded
[ ] Window, glass, cracked
[ ] Window, frame, broken
...
[ ] No negative conditions

#2
[ ] Mold, walls
[ ] Paint, chipped
[ ] Paint, faded
[ ] Window, glass, cracked
[ ] Window, frame, broken
...
 +----------------------+
| No negative conditions |
 +----------------------+

#3
[ ] Mold, walls                |
[ ] Paint, chipped             |
[ ] Paint, faded               | [ ] No negative conditions
[ ] Window, glass, cracked     |
[ ] Window, frame, broken      |


#4
[ ] Mold, walls                |
[ ] Paint, chipped             |  +----------------------+
[ ] Paint, faded               | | No negative conditions |
[ ] Window, glass, cracked     |  +----------------------+
[ ] Window, frame, broken      |

驚いたことに、ユーザーは#3を選択しました。リストの横にあるボタンの使用は、「非直感的」、「混乱」、および「混乱」でした。さらにフィードバックがあり、3つのリストを並べて作成することを提案しました。1つはオプションがなく、1つは最も一般的なもので、もう1つはあまり一般的ではありません(興味深いことに、より緊急の問題です)。そのようです:

NO PROBLEMS IN ROOM          COMMON DEFICIENCIES      URGENT NEEDS
---------------------------- ------------------------ --------------------------
[ ] No negative conditions  |  [ ] Paint, chipped    |  [ ] Uncommon problem 1
                            |  [ ] Paint, faded      |  [ ] Uncommon problem 2
                            |                        |  [ ] Uncommon problem 3
                            |                        |  [ ] Uncommon problem 4

その後の試行では、編集中にのみ発生した2つの状態エラー状態(否定なしと別の選択肢の両方が選択された)が示されました。フィードバックにより、強調表示スキームを実装することができました。

  1. 負の条件が選択されていない場合は、それを太字の緑色でマークし、他の入力を無効にします。これにより、効果的にトグルボタンになりますが、視覚的にはチェックボックスとしてスタイルが維持されます。
  2. 別の欠陥がチェックされたら、斜体の赤でマークし、「否定的な条件なし」チェックボックスを無効にします

ほとんどの一般的な/あまり一般的でない線に沿ってオプションを重み付けできない可能性があるため、2つのリストに制限されます。このリストの長さによっては、in situの順序付けの形式を調査する必要がある場合があります。アルファベットで十分かもしれませんが、ヘッダーを使用して機能システム(心臓の病気、肝臓の病気、体重の病気など)で分類する方が良い場合があります。

私は調整されたユーザビリティテストとA/Bテストの両方の大ファンです。時間と予算があれば、そのうちの1つを選んでください。そうでない場合は、あなたの直感が言うことで行ってください!

4
bishop

今日私が遭遇したオプションは、「上記のどれでもない」オプションをラジオボタンにすることです。

mockup

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

ラジオボタンが選択されると、チェックボックスが選択解除され、チェックボックスが選択されると、ラジオが選択解除されます。

1
Graham Herrli

チェックボックスのリストから「上記のどれでもない」チェックボックスを横罫線またはその他の分離補助機能で区切ります。
これは、このオプションがリストにある通常のオプションとは異なることをユーザーが理解するのに役立ちます。
また、このオプションをオンにすると、チェックされたすべてのアイテムが無効になるか、上記のリストから削除されることをお勧めします。
これがユーザーの選択を邪魔していると思われる場合は、「リストからxxxを選択しているようです。この選択を続行しますか、それとも[なし]を選択しますか?上記' ?"

0
Jonathan Cardoz