web-dev-qa-db-ja.com

チェックマークの規則から逸脱する

単一選択と複数選択の切り替えの選択について、少し異なる規則を作成したいと思います。デフォルトのラジオボタンやボックスのチェックマークの典型的な外観が嫌なので、次のデザインを思いつきました。

toggle button ideas

例は、複数選択オプション(正方形)と単一選択(円)のデフォルト、ホバーオーバー、および選択状態を示しています。これらのボタンは主に、ユーザーがベストアンサーを選択するか、該当するすべてのアンサーを選択するよう要求される標準テスト環境で使用されます。

この機能の設計を平らにして単純化し、ユーザーにそれを理解してもらうことはできますか?誰かがこの機能の例を持っている場合、ラジオボタンやチェックマークのデフォルトの外観なしでこの機能を本当に感謝します!

編集:

ここでみんなの意見を入力し、さらに検討した後、私は気を緩めて標準を守ることにしました。これは評価ベースのコンテンツ用であり、最終的には、可読性が標準を曲げようとする私の望みよりも優先されます。以下は私が一緒に行くことに決めたものです。

enter image description here

フィードバックをお寄せいただきありがとうございます!

5
Jean Baptiste

これは可能ですが、真空状態での外観に注意してください。

ユーザーは、1つの選択肢が他の選択肢よりも「選択」されているように見えるように、グループ内にいくつか(または少なくとも2つ)存在するため、ラジオボタンの場合はかなり安全です。

問題は、ページにチェックボックスが1つしかない場合、またはすべてが選択されているチェックボックスが複数ある場合に発生します。それらがすべて同じ状態にある場合、どちらがオン状態であるかを判別するために、それらを視覚的に比較するものは何もありません。一目ですべてのボックスがオンかオフかを判断するのは難しいでしょう。

たとえば、他に視覚的な手がかりがない場合、このボタンはオンになっているかオフになっていますか? Unclear toggle state.

これに対する解決策は、他のコントロールがどのように見えるかに依存します。すべてのボタンが空/オフのチェックボックスに似ている場合は、必要なコンテキストを提供できる可能性があります。選択したボタンのテキストを太字で表示する必要がある場合もあります。

ホバー/インタラクティブ/アクセントの色が表示されている選択した色と異なる場合、ユーザーはどの色が何を意味するかを理解するのに苦労する可能性があります。 「ボタンをクリックすると黄色に変わりますが、チェックボックスをクリックすると青緑色または白色に変わります。どちらがオンになっているのですか?」対話性を示す色であるためにUIの残りのコントロールが青緑色である場合、白いボタンが目立ち、選択したボタンのように見えることがあります。

ユーザーは、これらのコントロールを選択すると、ボックスに何らかのマークが表示されることに慣れています。従来のチェックボックスを使用したくない場合は、ボックス内の小さい正方形/円をマークとして使用することを検討してください。 Sample with small square for checkmark.

9
Nathan Rabe

一部の内部アプリ、特にユーザーが多くの選択を行わなければならないアプリでは、これに似たものを使用しています。チェックマークを外すと、ページが「よりクリーン」になり、ユーザーはそれを気に入った。現在、サンプルサイズは小さく(約30ユーザー)、一般的なWebユーザーの代表ではありません(内部のアプリとダッシュボードに幅広く取り組んでいる財務専門家です)が、好意的な反応を示しています。

ユーザーベースでできる限りテストを行いますが、私のユーザーベースはポジティブです。

1
Mayo