web-dev-qa-db-ja.com

丸いチェックボックスはわかりにくいですか、それとも受け入れられている標準ですか?

今日 dribbble.com を閲覧していて、フォローしているデザイナーの1人が新しい post に出会いました。彼は丸みを帯びたチェックボックスを使用していた新しいモーダルフォームを投稿しました。これまでに見たことがない。

enter image description here

これは受け入れられた標準ですか、それともラジオボタンのように見えるため、ユーザーが(特にそれらをチェックする前に)混乱しますか?

更新:見つかりました 別の場所 も使用しています。

アップデート#2:一部のコメントを読んだ後、これがiOSにも存在することに気づきましたが、気が付かなかったのです。また、モーガンの他の作業に戻った後、このタイプのチェックボックスの元のデザインは、現在のiOSのデザインの再設計であることがわかりました。

enter image description here

これがどこから来たかについての私の推測は、丸い通常のiOS削除ボタンの変更としてです。ラウンドチェックボックスが表示されるのはメッセージを削除するときだけなので、いくつかのメッセージを削除する準備ができていることを表示する明確な方法であったに違いありませんが、ラジオのように見えるという事実は考慮されませんでした。ボタン。アイテムを削除するときにもonlyが使用されるようです。

enter image description here

82
Matt Rockwell

インターフェイスでそれを見た場合-特に項目が選択される前に、チェックできる項目は1つだけだと思います。タイトルの文言だけでは、複数選択が可能であることを示しています。このデザインは、アイテムの選択ではなく単一のアイテムを選択する人々の数が通常よりも多くなると思います。

私はここで受け入れられた傾向をすべてどこでも曲線にする以外に利点を理解していませんが、かなり丸みを帯びた長方形も同様に機能し、より直感的で標準的になります。

純粋なグラフィカルの観点からの外観を嫌いではありません-affordanceの観点からは正しいとは思いません。

-更新を編集-

丸みを帯びた正方形で再設計しました:

enter image description here

-さらなるアップデート-

興味深い補足として-最近(下に)Googleスプレッドシートビューフォーム調査(UXPinから)でこれを見つけました。チェックボックスの外側の形状を組み合わせているため、複数回答の質問と単一回答の質問の外観は非常によく似ていますが、単一回答のオプションにはラジオボタンの内側の円形があります。

それがどのように使用されるかについて混乱はありませんでしたが、この表現は非常に珍しいことに気づきました。実際、これは私が初めて見たものです。これは非常に興味深いと思います。

enter image description here

131
Roger Attrill

チェックボックス 円ではなく、箱のように見えるはずです。結局、彼らはチェックサークルではありません。他の人が述べたように、わずかに丸みを帯びた角は問題ありませんが、ユーザーインターフェイスは常にチェックボックスを正方形、ラジオボタンを円形として表しています。あなたの例の背後にいるデザイナーはおそらく、機能よりもスタイルを優先して、異なるものにしようとしています。

40
jimp

チェックボックスは正方形である必要があります。Cooper、Reimann、およびCroninが About Face に書いたように(強調は私のものです):

従来、チェックボックスは正方形です。ユーザーは形状によって視覚オブジェクトを認識します。正方形のチェックボックスは重要な基準です。直角度には本質的に良い点も悪い点もありません。それはたまたま最初に選択された形状であり、多くのユーザーはこの形状を認識することをすでに学んでいます。このパターンから逸脱する正当な理由はありません。 マーケティングやグラフィックアートの人々の意見に関係なく、ダイヤモンドの形や丸みを持たせないでください。

2回目のアップデートの「チェックボックス」の丸は、 Apple独自のヒューマンインターフェイスガイドライン に違反しているようです。

人々は、標準のビューとコントロールがアプリケーション全体で一貫して外観と動作を期待しています。

標準のユーザーインターフェイス要素の推奨される使用法に従ってください。このようにして、ユーザーはアプリケーションの使用方法を学習するときに、以前の経験に頼って支援することができます。

...

標準アクションを実行するコントロールの外観を根本的に変更することは避けてください。慣れていないコントロールを使用して標準アクションを実行すると、ユーザーは使用方法の発見に時間を費やします。それらは、もしあれば、あなたのコントロールが標準のコントロールが何をしないのか疑問に思うでしょう。

特に、そのドキュメントにはチェックボックスやラジオボタンについての言及はありません。

Mac OS Xガイドライン ラジオボタンとチェックボックスの使用方法を説明します(「チェックボックスの代わりにラジオボタンを使用して、ユーザーが1つだけ選択できる一連の選択肢を提供します。」)、および標準のチェックボックスコントロールは、角が丸い正方形です。

27

丸い「ボックス」は、ラジオボタンの異なるグラフィック表現であることを意味します。紛らわしいもの。

そうであろうとなかろうと、文脈を読まないと分からない。丸みを帯びたボックスは1つですが、認識の不協和を引き起こすほど機能的に近い別のウィジェットの視覚言語を使用する場合ほど、サークルは役に立ちません。

8
Nathanael

これが機能するかどうかを確認するには、dribble.comの投稿に十分なコンテキストがありません。アプリのコンテキストでは、これらの丸みを帯びたチェックボックスは大丈夫かもしれません。それらの1つがデフォルトで(常に)チェックされている場合にも機能する可能性があります(つまり、チェックマーク画像が機能の理解に役立ちます)。

ただし、丸いチェックボックスが標準ではないことは間違いありません。これらは見た目は良いですが、混乱を招きます。 ヤコブのWebユーザーエクスペリエンスの法則 は、「ユーザーはほとんどの時間を他のWebサイトに費やしている」と述べています。

6
Jacque

IOSのバージョンが混乱しているとは思いません。 WindowsとMac OSの両方で長年にわたって提供されている、ドットが含まれているおなじみの円の標準的な意味でラジオボタンと見なされないのは、ティックアイコンの使用です。ティックは、チェック(クロス)ボックスに似たチェックボックスを示します。周囲のボーダー形状ではありません。もし彼らが正方形の箱で丸い点を使っていたら、これは混乱を招くだろうと私は信じています。しかし、なぜ?ティックは、クロス(またはチェック)の代わりに何年も使用されてきました。やることリストの完全なボックスを見てください。これに戸惑う人はいません。したがって、私の見方では、デザインに適切な図像が使用されている場合、周囲の境界線の形状が何であるかは問題ではありません。ボートを押し出します。スターを付けることができます。そうではない。 :)

0
Darren