web-dev-qa-db-ja.com

チェックボックスのリストは、必ずしも複数の選択肢を意味しますか?

私は現在、eコマースWebサイトの使いやすさを確認しています。ユーザーが製品を検索すると、検索を絞り込むためのフィルターオプションが提供されます。

次のチェックボックスのリストを使用できます。

mockup

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

ユーザーが複数の選択肢を選択することはできませんが、これは私にはかなり珍しいことです。たとえば、ユーザーは1000ドルよりも安いすべての製品を同時に表示することはできません。

チェックボックスは必ず「ゼロ以上の選択肢」を意味し、ラジオボタンは「1つの選択肢」を意味するという規約があるのか​​と思います。

9
Leo

Lisa/Macintosh、Xerox Star、およびMicrosoft Windowsの元のGUIガイドラインでは、チェックボックスは、その名前が示すように、選択またはマークしたい場合に(チェックマークで)マークできるものです。選択を解除したい場合。各チェックボックスの選択は、アクティブ化に関して互いに独立しています。

一方、ラジオボタンの名前は、カーラジオやホームラジオ/チューナーのボタンに由来しています。一度に1つのラジオ局しか選択できないのと同じように、ラジオボタンのリストから選択できるオプションは1つだけです。

したがって、あなたの質問に答えるために-はい、広く受け入れられているすべてのガイドラインと慣習によれば、最初から、チェックボックスは「ゼロ以上の選択肢」を意味し、ラジオボタンは「単一の選択肢」を意味します。

興味深いのは、これらが過去25年以上にわたってユーザーインターフェイスに根付いてしまい、起源が忘れられてきたことです。

オリジナルのUIウィジェットのガイドラインはオンラインで利用できるとは思いませんが、Windowsチェックボックスの現在のレンディションは次の場所にあります。

http://msdn.Microsoft.com/en-us/library/windows/desktop/bb246460(v = vs.85).aspxhttp://msdn.Microsoft.com /en-us/library/windows/desktop/bb226806(v=vs.85).aspx

ラジオボタン(「オプションボタン」に名前が変更されました)の場合:

http://msdn.Microsoft.com/en-us/library/windows/desktop/bb246443(v = vs.85).aspxhttp://msdn.Microsoft.com /en-us/library/windows/desktop/bb246423(v=vs.85).aspx

そしてここにアップルからの対応するガイドラインがあります:

https://developer.Apple.com/library/mac/#documentation/UserExperience/Conceptual/AppleHIGuidelines/Controls/Controls.html

ページを下にスクロールして、ラジオボタンとチェックボックスに関するセクションを探します。

この問題に関するJakob Nielsenによる議論については、次の記事を参照してください。 http://www.nngroup.com/articles/checkboxes-vs-radio-buttons/

これが彼の顕著な点です-増幅と例については彼の記事全体を読んでください:

どのウィジェットをいつ使用するか

1984年のInside Macintoshの初版以来、チェックボックスとラジオボタンを使用する場合のルールは同じです。以降のすべてのGUI標準と公式のW3C Web標準には、これら2つのコントロールの同じ定義が含まれています。

  1. ラジオボタンは、相互に排他的な2つ以上のオプションのリストがあり、ユーザーが1つだけ選択する必要がある場合に使用されます。つまり、選択されていないラジオボタンをクリックすると、以前にリストで選択されていた他のボタンの選択がすべて解除されます。

  2. チェックボックスは、オプションのリストがあり、ユーザーが0、1、またはいくつかを含む任意の数の選択肢を選択できる場合に使用されます。つまり、各チェックボックスはリスト内の他のすべてのチェックボックスから独立しているため、1つのボックスをオンにしても他のチェックボックスはオフになりません。

  3. スタンドアロンのチェックボックスは、ユーザーがオンまたはオフにできる単一のオプションに使用されます。

18
yosh m

はい、規則があります:

チェックボックス=複数の選択肢のオプション

ラジオボタン=オプションの中から1つだけ選択

14
Mark Gavagan

ユーザーが学習したチェックボックスの動作は、複数のオプションを選択できるようにすることです。

あなたの場合、それはいくつかの以前の機能の遺物かもしれません。奇妙な依存関係を持つフォーム。

2
Dominik Oslizlo

従来、チェックボックスは単純なオン/オフの選択を示すために使用されてきました。時々、オン/部分的にオン/オフまたはオン/オフ/不確定の状態を示すために使用されます(これは、トライステートチェックボックスの専門用語です)。これは珍しいことであり、多くのユーザーがそれによってつまずくと思います。 (後者の特定の例については、一部のファイルに読み取り専用属性が設定されており、一部に設定されていない場合は、Windowsエクスプローラーのフォルダープロパティダイアログを試してください。)たとえば、「読み取り専用」および「アーカイブ」ファイル属性は相互に関連しており、互いに独立して切り替えることができます。相互に排他的なコントロールでそれを行うには、2つではなく4つのコントロールが必要になります:オフ/オフ、オフ/オン、オン/オフ、オン/オン。 「選択の一部は「オン」で一部は「オフ」」の状態を考慮すると、さらに悪化します。9つの(3 ^ 2)の可能性に膨らみます。 3分の1を追加すると、27(3 ^ 3)のコントロールが追跡できます。 MS-DOSは4つのファイル属性を使用しました:アーカイブ、読み取り専用、システム、および非表示。 「いくつかのオンといくつかのオフ」を使用すると、最大81の可能な選択肢が追加されます(追跡しなくても、16の異なる組み合わせがあります)。

一方、ラジオボタンは、1つの選択肢しか選択できないことを示します。また、通常、デフォルト値を受け入れるか、明示的に選択することにより、選択を行う必要があることも示します。

Webでは、選択肢がほとんどない場合でも、現在選択されている選択肢のみを表示する(コントロールがアクティブ化されるまで)コンボボックスまたは何らかの選択リストが一般的であるようです。私自身、実際のユーザビリティの側面が何であるかはわかりませんが、ラジオボタンは確実に読みにくくすることができます。重要な選択肢がある場合、UI設計の観点から見ると、コンボボックスアプローチには確かに利点があります。

個人的には、ラジオボタンを見ると、1つしか選択できないことがわかります。チェックボックスが表示されている場合、通常は複数の選択肢が考えられます。UIがユーザーの期待に積極的に対応し始めると、木やその他の皮膚で覆われた表面とのフラストレーションと深刻な額の接触が発生します。

参考文献については、どれだけカウントされるかわかりませんが、件名の Wikipediaの紹介文 は、「チェックボックス(チェックボックス、チェックボックス、またはチェックボックス)はグラフィカルユーザーインターフェイス要素(ウィジェット)により、ユーザーは複数のオプションから複数の選択を行うことができます(1つの選択肢しか選択できないラジオボタンとは異なり)、または単純なはい/いいえでユーザーに「はい」(チェックする)または「いいえ」(チェックしない)と答えさせることができます。質問。"。

2
a CVn

これは慣例であるだけでなく、予想される動作が HTML 4.01仕様 で明示的に呼び出されています(他のほとんどすべてのバージョンでも同様です)。

フォームの複数のチェックボックスが同じコントロール名を共有する場合があります。したがって、たとえば、チェックボックスを使用すると、ユーザーは同じプロパティの複数の値を選択できます。

[...]

ラジオボタンはチェックボックスに似ていますが、いくつかが同じコントロール名を共有する場合、それらは相互に排他的です。1つが「オン」に切り替えられると、同じ名前の他のすべてが「オフ」に切り替えられます。

これを逆にすることは、意図的に標準の動作を回避し、ユーザーのWebサイトをより混乱させ、実際に開発を困難にすることです。また、JavaScriptが無効になっているユーザーに対して、これをどのように機能させることができるかもわかりません。

2
Plutor

Leoの元の質問に戻ると、彼は設計されていないUIを継承していると思います。かなり専門家ではないプログラマーが、さらに分析することなく、午前3時にほぼチェックボックスをまとめました。
そして、彼の目標は、ユーザーにスマートな方法で価格帯を選択する手段を提供することでした。
しかし、ユーザーが任意のボタンをチェックできるようにすることで、1つのセグメントではなくいくつかの奇妙な価格範囲を取得し、クエリをプログラムするのが困難であるか、パフォーマンスが悪いため、追加しようとしました。単一の価格帯を強制するための制限。

解決策は、チェックボックスグループを他の方法で置き換えて、価格帯を選択することです。
たとえば、fromおよびtoのようにラベル付けされた2つのラジオボタン列、または1つの列のように下部を修正0 $としてバインド、または 範囲スライダー

0
Juan Lanus