Webベースの調査でのチェックボックスとラジオボタンの代替ですか？
私は、さまざまな種類の質問を含む簡単なアンケートデザインの設計を任されています。私は多くのWebベースの調査を自分で行っているだけでなく、いくつかのユーザーをテストしています。最大の問題は、標準サイズのラジオボタンとチェックボックスをクリックするのが難しいことでした。特に、アンケートの質問が多すぎてユーザーが疲れた後です。 1つの解決策は、チェックボックス/ラジオボタンのラベルもクリック可能にすることですが、実際にこれを理解しているユーザーはほとんどいません。
したがって、私の解決策は、選択できるボタン/コンテナの種類を作成することですが、単一選択（ラジオボタン）と複数選択（チェックボックス）の選択肢をどのように区別しますか？それとも他の方法で解決しますか？私の停止ソリューション、Balsamiqスタイル：
マトリックスの質問を表示する場合も同様です。その場合、あなたが望む選択肢を見つけるのはさらに難しいので、私の解決策はクリックする領域がはるかに広いグリッドに基づいており、複数の質問であなたが望む選択肢を見つけるのも簡単です。これに対する私の停止ソリューション：
どんな提案も大歓迎です！
マーティン、ラジオボタンとチェックボックスで jQuery Mobile が何をしたか見てください。ここにデモページがあります：
jQuery Mobile Docs：Gallery of Form Controls
彼らはあなたがあなたが楽しむと思う2つの実行可能なオプションを提供します。
チェックボックスとラジオボタンは同じように表示しますが、表面積を大きくしてクリックしやすくします。
新しいApple iOSにインスパイアされた
UISegmentedControl。これは、ラジオボタンと同様の目的を持つ新しいUIです。これは、押して読みやすいコンパクトな水平スタイルのコントロールです。
これがスクリーンショットです：
もう1つの優れたWebフレームワークは Jo ですが、直接リンクできるデモはありません。フレームワークをダウンロードして、例を開いてください。それも同様に印象的です。
私はここで他の多くの回答を読みましたが、なぜ1980年代初頭のUIガイドラインに記載されているAppleで失敗するのかと言います。それでもApple彼らがUISegmentedControlを作成してiOSを作ったとき、型から離脱しました。マーティンが彼の質問をするのに十分な理由があると私は信じています。現実の世界で機能する非常に説得力のある代替案があると思います。
たぶん、通常のボタン（大きな領域をクリックするため）と通常のラジオ/チェックボックスコントロールを組み合わせて試すことができます。 「1つだけ選択」などのテキストの説明を追加する必要があるため、これらのコントロールを完全に削除することはしません。または「複数選択」。
ラジオ/チェックボックスを淡色表示して、それらがほんのわずかなヒントであることを確認することもできます。
私があなたの解決策で見る問題：
- ボタンは通常は選択されていませんが、何らかのアクションを実行します（予期しない動作）
- 単一選択オプションと複数選択オプションを区別できない
- ユーザーはラジオボタンとチェックボックスに慣れています。ユーザーは、それらがどのように機能し、何が期待できるかを知っています。
- グリッドソリューション：ここでは、何がクリック可能かがまったくわかりません
簡単な解決策の1つ：ラジオボタンやチェックボックスのような外観と動作のボタンを作成しますが、ボタンを大きくしてクリックしやすくします。
Philがお役に立てば幸い
オプション：
- スライダー。私はスライダーを特に興味深い選択肢だと思っています。「1〜10の間でこれを評価してください」のような質問です。溝あり、なし。
- 選択ボックス。すべての選択肢を表示する必要がない場合があります。すべての選択肢を示すことがいかに重要かを決定します。
- 上記で説明したもの。
うーん、あなたの選択だと思います。詳細は Alan Cooperの本：Face 3について を参照してください。
私は一般的にフィルが上で言ったことをエコーしますが、文字通り現代のブラウザと同じぐらい古いWebフォームの規則を変更しようとしている理由を自問することもお勧めします。 Philが言うように、ユーザーはラジオボタンとチェックボックスがどのように機能するかを知っており、たとえ目的を明確に説明できなくても、ラジオでは複数の選択肢が許可され、ラジオでは1つしか許可されないのが2番目の性質です。
上記のように、「最大の問題は、標準サイズのラジオボタンとチェックボックスをクリックするのが難しいことでした。特に、アンケートの質問が多すぎてユーザーが疲れた後です。」しかし、なぜこのように感じるのかはわかりません。これが真実であることを示唆しているエンドユーザー調査は何ですか。フォーム/調査の疲労は通常、ページにフィールド/質問が多すぎる場合に発生します。フォームを論理セグメントに分割し、進行状況バーを表示することで軽減できます。
提案されたソリューションでは、フィルが言うように、グリッドではクリック可能なものを明確にせず、ボタンは複数の選択を行う簡単な方法を提供しません。ユーザーがCTRLキーを押しながら複数回クリックできるドロップダウンの規則がありますが、チェックボックスのみを指定できるのに、なぜそうするのでしょうか。
既に述べたように、ラベルを含むフォームフィールド全体がクリック可能になり、クリックが簡単になり、さらにユーザーを支援するためにフォントサイズと行の高さを増やすこともできます。これらの考慮事項を超えて、あなたが提案している方法で慣習を破る理由がわかりません。
通常、ユーザーに標準コントロールを提供する方が、ボタンのようなチェックボックスではなく標準チェックボックスの方が直感的であり、私たちの側からの作業は少なく、多くの場合、物事をユニークにすることに気づきますが、シンプルなことでうまく機能します。少ない方が多い場合が多いですが、反対に、マトリックスの質問は、提案されているように非常に良いアイデアです。
ここでの最良の解決策は、標準タイプの入力コントロールを使い続けることですが、それらを大きくすることです。
これにより、入力のタイプを認識できるようになりますが、ターゲットサイズを大きくすることで入力の使いやすさが向上します。これはおそらく、入力制御状態のさまざまな画像で実行できます。
Philの答えの下で指摘したように、CSSでこれを行うと問題が発生する可能性がありますが、JavaScriptで回避できると確信しています。もちろん、ユーザーエクスペリエンスがブラウザー間で一貫していることを確認するために、多くのテストを行う必要があります。
チェックボックスとラベルのペアに関するerikrojoのソリューションに同意します（「この全体がクリック可能なホバーアフォーダンス」の形式を使用します）
マトリックスに関しては、提案は「星評価」システムの形式ですが、おそらく軸の周りに視覚化されます（中立）：
bad great
[ | ]
カーソルを合わせると、軸に沿ってどこにあるかがわかります。範囲バーのビジュアルと、現在のわかりやすい評価（数値ではなく）を示すツールチップが表示されます。
bad great
[ |--- ]
^good
そして、クリックすると「ロックイン」されます。
bad great
[ |XXX ] good
あなたの平均的なジョーがチェックボックスとラジオボタンの違いを本当に知っているかどうかをテストしたことがありますか？同様に、1つ以上の回答を持つ可能性はあるが、選択できるラジオボタンしか提供されない質問を彼らに尋ねます。次に、複数を選択しようとしたかどうか、またはラジオが選択できるのは1つだけであることを無線が認識しているかどうかを確認できます。それらの前にチェックボックスとラジオボタンを配置して、違いを説明するように依頼することもできます。
私は似たようなものに取り組んでいて、あなたのようなデザインを思いつきましたが、人々が指摘したように、どちらが複数選択であるかを判断する方法がありませんでした。ボタンの左側に丸ではなく四角があるため、ユーザーが複数選択であるとユーザーが判断できるとは思いませんでした。適用します。
チェックボックスとラジオボックスの交換に関する提案の課題は、2つのタイプの動作を視覚的に区別できないことです。最高のUI設計は、ユーザーがコントロールと対話する必要がある前に、常にユーザーの期待を設定します。エリクロホの反応についてコメントするのに十分な担当者はまだいませんが、それは確かに既知のイディオムを活用しながら、より大きなヒットゾーンを享受できるという利点があります。
グレンが示唆するように、スライダーには、一度に1つの状態しか持てない現実の触覚ユーザーインターフェイスでモデル化するという利点があります。そこには、ラジオボタンのように曖昧さはありません。残念ながら、スライダーには独自の実装と使いやすさの課題があり、多様なコントロールセットを持つフォームのコンテキストでレイアウトするのははるかに困難です。
ダイアルはスライダーの変形であり、ユーザービリティの大きなヒット（コントロールの動きは回転しますが、ユーザーのマウス入力は不等角である傾向があり、これにより異なる実装間の混乱）
別のアプローチとして、単一選択コントロールと複数選択コントロールの両方に追加のコンポーネントを設計し、ユーザーが利用できる選択の数を正確にユーザーに通知する方法があります。実世界の要素を使用してビジュアルを説明しようとすると、好きな方法でそれをデジタル表現に抽象化できます。電球の列を考えてみましょう。 5つの可能な答えがあり、すべてまたは一部を選択するか、まったく選択しない場合、5つの電球があり、それらすべてがオンになっています。回答ボタン（電球ではなく、直接操作することはできません）をクリックすると、電球が消え、何らかの方法でクリックしたボタンが選択されます。追加の回答を選択し続けると、より多くの電球が消えます。
この概念を続けると、私が多肢選択、単一回答の質問がある場合、銀行には電球が1つしかありません。最初から答えが1つあることは明らかです。
明らかにあなたのインターフェースで電球を使用することはばかげて見えるかもしれません（または多分そうではないでしょうか？）が、あなたはそのアイデアを得ます-私たちは、ユーザーが各質問に対して行うことができる選択/回答の数についての期待をすぐに設定します。このアプローチの1つの欠点は、ユーザーが先に進む前にすべての選択を「使い果たした」必要があるとユーザーが感じる場合があることです。これは、ユーザーが最初の選択を行った後（複数の回答が可能であっても）、次の質問がアクティブまたは利用可能になることを明確にすることで簡単に軽減できます。これは、次の質問の無効化/非表示から、現在の質問の要件が満たされていることを示すチェックマークやその他のインジケーターの表示まで、無数の方法で行うことができます。