web-dev-qa-db-ja.com

複数オプションと単一オプションUI

私たちが作成しているダッシュボードには、ユーザーが選択できる2つのオプションセットがあります。

複数のオプション(チェックボックス) enter image description here

および単一のオプション(ラジオボタンの動作)

enter image description here

コンポーネントの外観は似ていますが、用途は異なります。

ユーザビリティテストでは、ユーザーはこれらのコンポーネントを問題なく使用したり、製品の他の部分で使用するために問題がなかった機能を使用して理解したりしました。

しかし、私の設計者の同僚は、コンポーネントは異なるように見えるべきであり、ユーザーは一見するとチェックボックスなのかラジオボックスなのかを理解する必要があると主張しました。

私の目的は一貫性を保ち、認知負荷を下げることでした。

考えや意見はありますか?

編集1:UIを更新しました。フィードバックをありがとう@ 200_success

33
Deniz Erdal

場合によります。ユーザーがこのフォーム/セクション/設定を表示する頻度はどれくらいですか?

頻繁に使用される長いセッションアプリケーションにより、ユーザーはコントロール、特に頻繁に使用されるコントロールの動作を思い出すことができます。

これの一部はApplication Postureと関係があります

ソブリンアプリケーションは、ユーザーの注意を長期間独占するプログラムです。

GoogleドキュメントとMicrosoft Wordは、ソブリンポスチャアプリケーションの良い例です。ユーザーはドキュメントの操作に長時間を費やしています。

対象となるユーザーは通常、中級者であり、長期間の使用でこれらのコントロールに繰り返し遭遇します。

同じように見えても動作が異なる特定のコントロールは、長時間の露出を繰り返した後でもそれほど難しくありません。

別の投稿で指摘されているように、私たちのほとんどはツールバーに慣れています。

enter image description here 別の例は、タスク管理アプリケーションであるOmniFocusです。

インスペクターパネルには、繰り返しイベントとスケジュールされたイベントの詳細が表示されます。イベントを含める曜日を示す複数選択トグルがあります。チェックボックスと同じ効果があります。

enter image description here

イベントのメンタルモデルは、最初はより明確であり、おそらくこれらのコントロールの使用に役立ちます。

イベントには以下があります。

  • 開始日
  • 終了日
  • 頻度
  • 繰り返し

たとえば、日曜、月曜、水曜の空手クラスに行けることは明らかです。必要に応じて複数の日を選択できます。

1回限りのフォーム、めったにアクセスされない「設定」ページ、めったに発生しないUIは、明確なラベルやコントロールがないと困難な場合があります。

私はあなたのより広い文脈を明確にしていませんが、明確なラベル付けは、初めてまたはまれにフォームに遭遇するユーザーにとって重要です。

enter image description here

ユーザーテストで確認されているため、良い場所にいるようです。一部のコンテキストでは、不慣れな領域に挑戦する永続的な「最初のタイマー」を設計することを覚えておいてください。

33
Mike M

これらのコンポーネントの外観を変える必要はありません。

あなたのケースは、Wordのようなテキストプロセッサのツールバーのよく知られているトグルに似ています。これらのフォント設定トグルは、チェックボックスのように機能します。

enter image description here

また、これらのWordの配置コントロールはラジオボタンのように機能します。

enter image description here

注意してください、それらはまったく同じに見え、混乱や問題を引き起こしません。なぜなら、私たちのメンタルモデル(システムがどのように機能するかについてのユーザーの見解)では、テキストの一部が太字、下線、および筆記体である場合があることを理解しているため、それぞれのトグルはチェックボックスのように機能する必要があります。また、テキストを左右に同時に配置することはできないので、配置コントロールがラジオボタンのように機能するのは当然のことです。私たちはそれを知っており、それについて追加のリマインダーは必要ありません。

ユーザビリティテストでは、ユーザーはこれらのコンポーネントを問題なく使用したと書いています。これは、コンポーネントの動作がユーザーのメンタルモデルに一致することを意味します。つまり、ユーザーは、複数の年齢層と1つのビュー(リストまたはサムネイル)のみを選択できることを理解して期待します。

A.クーパーの「顔について3.インタラクションデザインの要点」からWordのトグルの例を取り上げました。彼は、チェックボックスまたはラジオボタンへのよりグラフィカルでよりスペース効率の良いアプローチの例としてこれについて書きました(第21章:コントロール、チェックボックス(p。443)およびラジオボタン(p。446)を参照)。また、クーパーは、これらの2種類のトグルの外観を変える必要があるとは言いませんでした。

52
Lana

あなたのデザイナーの同僚は正しいと思います。

ここでオプションを見ると、どのようにしてそれらと対話することができ、どのように使用されるかがわかります。

enter image description here

enter image description here

チェックボックスに四角形を使用し、ラジオボタンに円を使用することは非常に古く、一般的であり、ほとんどのユーザーが認識できます。したがって、この場合は単に問題が解決されます。

6
Asqan

ほとんどの通常のユーザーは、ラジオボタンとチェックボタンの違いを知りません。多くの場合、意味のある場所で複数のラジオボタンをアクティブにできないと、動揺することがあります。

視覚的な違いなしで実行しても、1人のユーザーを混乱させることはありません。あるものを選択すると、他の選択が削除される場合もあれば、そうでない場合もあります。そして、特にそれが理にかなっている場合、彼らは気にしないでしょう。

それらに違いを持たせたい場合は、ラジオボタンの丸い角(オプションの間でもかまいません)とチェックボックスのある角のある角を使用しませんか?デザインはシンプルなままで、「知識がある」人はすぐに違いを確認できます。

1
Carl Dombrowski