web-dev-qa-db-ja.com

ラジオボタンが外側の円全体を埋めないのはなぜですか?

私の質問は簡単です:

ほとんどのラジオボタンが外側の円全体を埋めないのはなぜですか?

標準のラジオボタンの例:

Example of standard radio button

(異常)完全に埋められたラジオボタンの例:

enter image description here

これは、ある変形形態の推論のためのものですか、それともまったく異なるものですか?

ボーナス質問:インターフェースまたは設計システムで、完全に満たされたラジオボタンを使用することは許容されますか?

47
RobbyReindeer

黒い円が「はい」または選択されていることを意味する一方で、白い円が「いいえ」または選択されていないことを意味することは完全には明らかではありません。ユーザーがフォアグラウンドおよびバックグラウンドと見なすものに応じて、どちらの方向に進む場合もあります。次の(かなり不自然な)例を考えてみます。

Simply a black and white circle on a gray background

どれが選択されていますか?ライトのように「ライトアップ」したもの?それとも「インクで満たされている」のでしょうか?

選択されるものは何かのグラフィックadditionを含むべきであるという暗黙の仮定があります。したがって、円内に円が追加されます。また、チェックボックスとの類推によって考えているかもしれません。チェックボックスをチェックに追加して、選択を表示します。

これは、標準を破って色を反転させた場合でも「機能」します。

White filled circle for selected

これは、ユーザーが色を知らない場合にも機能することを意味します。これは、特にグレースケールに限定されていない今日重要な問題です。このため、標準ではないことに加えて、ラジオボタンが完全に埋まることは常に避けます。

個人的には、「ラジオボタン」という用語は、比喩的には外観ではなく動作(多くの選択肢の1つ)を指していると思います。 他の歴史的要因が一般的な外観を決定した可能性があります 。 1970年代と1980年代にGUIが発明された当時、最も一般的なラジオボタンはカーラジオのプリセットでした。あなたが例外を見つけることができると確信していますが(私はあります)、これらは一般に(1)円形ではなく長方形で、(2)はではありません選択した状態を示します–一度押すと、ポップアウトし、機械的なフラグやライトは表示されませんでした。ですから、スキューモーフィズムはそれとは何の関係もないと思います。

97

完全に完全なラジオボタンは、箇条書きのテキストと簡単に混同される可能性があると思います。

enter image description here

空の円は知覚的に不完全さを感じますが、塗りつぶしが必要か、または塗りつぶす必要があります。

enter image description here

多くの場合でさえ、これらのリングの1つはすでに満たされているため、それらは満たされなければならない(チェックされている)と感じるようになります。

enter image description here

34
Danielillo

アクセシビリティは、ラジオボタンの元となった物理的なボタンに加えて、このスタイルのラジオボタンの理由の1つであると考えています。

ボタンが完全に塗りつぶされている場合、ボタンの色に依存してその状態を示します。これは、特に標準以外の色を使用する場合、多くの人々を混乱させる可能性があります。


Radio button styles

画像の最初の行では、画像自体の1つがボタンの状態に関する情報を伝えていません。多分白黒であなたは状態を想定することができますが、これは他の色では失敗します。

2行目の画像では、内側の円の状態がボタンの状態を明確に示しています。

30
Sinstein

ラジオボタンは、物理的なラジオボタンに触発されました(明らかに十分です)。ボタンがフレームから飛び出していたり​​、「3D」でした。これらをシグニファイヤーと見なします。これらのシグニファイアは最初のインターフェースに進みました。実際には、ボタンがフレームから飛び出し、押されたときに他のすべての押されたボタンがキャンセルされます。

今日の時点では、ラジオボタンはチェックされた後でも認識できるはずです。したがって、「標準」に従ってそれを持っているのが最善でしょう。私はあなたの例のようなラジオボタンの例を見てきましたが、コンテキスト内では、それらを一部のユーザーのラジオボタンとして識別しましたが、混乱を招く場合とそうでない場合がありますが、ユーザーテストが必要になる場合があります。

22

これはラジオボタンの歴史についての素晴らしい記事です: https://www.jitbit.com/alexblog/242-the-history-of-a-radio-button/

記事で述べたように:

ラジオボタンの名前は、古いラジオで電波を切り替えたり、場合によっては周波数をプリセットしたりするために使用されている実際のボタンにちなんで付けられています。ボタンを押すと、他のすべてのボタンが飛び出します。

ですから、それは変則的な理由でした。

「システムと実世界の一致」の原則に基づいて、完全に満たされたラジオボタンはユーザーを混乱させると思います。それはそれを述べています:

現実の慣例に従い、情報を自然で論理的な順序で表示するインターフェイスは、ユーザーへの共感と謝辞を示します。

ユーザーはこの形式のラジオボタンを他のWebサイトで使用することに慣れているので、変更する正当な理由がない限り、標準を使用する必要があると思います。

16
Aline

チェックされたラジオボタンが完全に塗りつぶされると、特に2つのラジオボタンしかない場合は、どのボタンが実際に選択されているかがわかりにくくなります。 「黒く塗りつぶされた」ボタンの代わりに「白で塗りつぶされた」ボタンがアクティブであると同じくらい簡単に考えることができます。

7
kajacx

他の回答は非常に有効ですが、重要な点を見逃していると思います。完全に塗りつぶされたラジオボタンは、黒い背景では見えません。選択したアイテムの色を交互にすると、ラジオボタン内でコントラストが強制されるため、これを防ぐことができます。

2
Kgee

これはあなたの質問への直接の答えではなく、主題全体に関するいくつかの興味深い情報です。

擬態性はヒューマンコンピューターインタラクションの側面です。既知の機能を持つ現実世界のオブジェクトを、同様の機能を持つデジタルオブジェクトに関連付ける設計上の選択です。これは通常、人々が物事の動作に関するメンタルモデルを開発しているため、同様の機能でアイテムをデジタルで複製すると、その目的が自動的に伝達されるため、機能します。

ラジオボタンのメンタルモデルでは、ラジオボタンを押して1つの選択を行うことができます。これを理解すると、リスト内の項目の横にあるチェックが選択を示すというメンタルモデルであるため、複数選択はチェックボックス用に予約されていました。

現実世界でユーザーがラジオボタンに遭遇したことがない場合はどうなるなど、skeumorphsimとメンタルモデルに依存することにはいくつかの問題があります。その場合、彼らはこれがどのように機能するかについてのメンタルモデルを持たないでしょう。さまざまなデジタル構成のベースとして使用された現実世界のアイテムの一部が1960年代と1970年代のものだったため、これはますます可能性が高まっています。これはあなたが触れていたものだと思います。ラジオボタンは、今日のリストから選択可能な単一のアイテムのスキューモーフィズムの基礎として使用する適切なオブジェクトですか?多分。

人々が古いラジオと接触する可能性は低いですが、デジタル形式のラジオボタンセレクターの普及により、ほとんどの人にその機能のメンタルモデルが与えられました。他の回答で述べたように、優れたデザインでは、メンタルモデルが異なる2人のユーザーがどの選択を行ったかを示すことができます。そうは言っても、ラジオボタンがこのタイプの選択の基礎である必要はありません。大多数の人々のメンタルモデルに逆らうことは苦労する可能性があることを覚えておいてください。ユーザーテストは、提案している変更が意図した対象者に適切に反映されるかどうかを識別するのに役立ちます。誰かが新しいアプローチに進んで挑戦し、テストを通じてデザインを磨いたため、デザインにいくつかの優れた進歩がありました。

2
AxGryndr

どのボタンが押されたかを示す視覚的なインジケーターがあった機械式ボタンの付いたラジオを見たことを覚えています。私が覚えているのは黒いボタンがあり、その中に可動部分があり、ボタンを押すと開いた一種のくちばしのような形をしていて、ボタンの上部中央に白いインジケーターが表示されていました。これはイラストと同じですが、色が逆になっています。

0
user124640