web-dev-qa-db-ja.com

チェックボックスフィールドセットの選択肢が多すぎる場合はどうしますか?

Webアプリケーションでアカウントを管理するためのインターフェイスに、ユーザーの役割を管理するためのインターフェイスがあります。

役割は基本的に 役割ベースのアクセス制御-(RBAC) コンテキストの役割です。

仕様:

  • ユーザーは複数のロールを持つことも、まったく持たないこともできます。
  • ロールがあるかどうかに関係なく、すべてのユーザーは常にデフォルトの「メンバー」ロールを持ちます。この「メンバー」ロールのメンバーシップは削除できず、常にすべてのユーザーアカウントに「固定」されます。

これを考慮すると、チェックボックスグループが最も適切なコントロールのようです。

mockup

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

しかし、私は6つの役割+デフォルトのメンバー役割しか持っておらず、フィールドセットはすでに少し長く見えています。最大12から14の役割を取得すると、事態はまったく使用できなくなります。

非常に長いフィールドセットの代わりに使用できる代替手段や他のコントロールはありますか?上記のモックアップでは、フィールドセットはほとんど不可能です。システムに100個の役割がある場合に使用します。

要件は次のとおりです。

  • ロールの名前と説明を表示できるようにする必要があります。
  • ユーザーは複数の役割を持つことができます。
  • ユーザーのロールを追加または削除するのに多くの労力を費やすべきではありません。
  • ユーザーはすべてのロールを表示できるはずです。 StackExchangeの「タグ」機能は適切に機能しますが、この場合、オートコンプリートプロセスを開始するためのロールの名前を「推測」するのは難しい場合があります。

グループに関する説明:

現在、ロールを作成するプロセスは非常に簡単です。ユーザーは、ロールに名前とオプションの説明を与え、いくつかのチェックボックスをオンにすることで権限を設定します。

部署やグループなどの感覚はありません。作成された役割は、どの部門やグループにも固有ではない傾向があり、非常に一般的である傾向があります。異なる部門で働く2人が同じ役割を持つことができます。

このような状況で、グループ化を行う他の方法はありますか?それとも、役割をアルファベット順に並べられたリストとして提示するだけですか?

19
F21

私にとって、この設計を簡略化するために私がすべきことは3つあります。

1)ロールのリストからメンバーロールを削除する必要があると思います。ユーザーはこれを変更できないため、グループの一部であってはなりません。代わりに、他の場所で選択した他のすべての役割と一緒に一覧表示できます(おそらくデフォルトの役割、基本の役割などの説明的なタイトルを付けて)このロールを表示する必要があるかどうかを検討することもできます。はい、システムはそれについて知る必要がありますが、ユーザーのメンタルモデルの一部である必要がありますか?

2)の説明は常に存在する必要がありますか?人々が役割が何であるかを知ったら、彼らはもはや説明を必要としません。彼らはロールオーバー/ホバーまたはクリックでポップアップに表示されませんか?または、隣接するテキスト領域に表示されることもありますが、これは関連性が低いため、おそらく理想的ではないソリューションです。説明を削除するとスペースが大幅に節約され、リストが長くなる場合はチェックボックスをグループ化することもできます。

3)アイコン/イラストをリストに追加するというアイデアはとても気に入っています...時間がたつにつれて、ユーザーにとって役割がより記憶に残るものになるでしょう。

mockup

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

また、ユーザーが上部のウィンドウからロールを削除できるようにすることもできます。最近のように、多くのUIでタグを削除できます。

[〜#〜]更新[〜#〜]

dnbrvの回答で示唆されているように、グループ化も良い方法です。ただし、私の好みは(タブではなく)フラットスタイルのグループ化です。リストが長すぎる場合は、スクロールを使用できます。

色はグループを強調するのに便利です(上部のセクションのタグまで移動できます)。

enter image description here

ユーザーがアイコンライブラリを介して独自のアイコンを選択できるようにすることができます。たとえば、Facebookには次のようなものがあります。

Facebook icon library

Balsamiqでは、ライブラリからアイコンを選択して、色を選択することもできます。また、強調に役立つことが多いサイズを選択することもできます。 Balsamiq icon library

20
Lisa Tweedie

基本的なソリューション。

企業全体のGUI設計のガイドライン このような状況では、選択リストを使用することをお勧めします。 5〜6個の役割を表示し、スクロールバーを置いて残りを表示できます。このようにして、ユーザーはリストの内容を把握し、スクロールバーを使用してそれらをすべて表示し、必要なものを選択できます。また、パネルのチェックボックスよりもリストにロールを追加/削除する方が簡単であるため、柔軟性も得られます。

それをさらに良くする

リストには、既に選択したアイテムを十分に簡単に表示できないという欠点があります。さらに、選択は少し難しい操作です。ユーザーは、複数の項目を選択するために押し続けるボタンを認識していない可能性があります。解決策は、2つのリストを持つことです。 1つは使用可能なロールを示し、もう1つは選択されたロールを示します。ユーザーは、ドラッグアンドドロップするか、ボタンを使用して操作できます。これは次のようになります。

The dialog

次に、ユーザーがロールを選択して追加を押すと、次のようになります。

The same dialog in a different state

実際の例

このソリューションは、実際にはデスクトップアプリケーションでかなり頻繁に使用されます。以下は、人気のあるIDEであるNetBeansのスクリーンショットです。

NetBeans dialog

スクリーンショットには、無効化されたアイテムも表示され、一部のアイテムを追加または削除できないことがユーザーに明確に示されています。 「メンバー」の役割にも同じ概念を使用できます。ボタンには選択状態も反映されます。たとえば、[使用可能なテーブル]リストの項目が選択されていない場合、[追加]ボタンは無効になります。先ほど述べたように、下部のテキスト領域を使用してロールの説明を表示できます。

10
hellodanylo

私の解決策は、以前の答えを組み合わせたものです。それらすべてには良い点がありますが、頭に釘付けにするものはありません。

チェックボックスは問題ではありません。問題は選択肢の数にあり、分類法で簡単に解決できます。部門、職務、制服など、役割を割り当てた人にとって必要なものを簡単に見つけるのに意味のあるものごとに、役割をグループに編成する必要があります。

グループが完成したら、チェックボックスのタブに変換します。ステータスを簡単に確認できるように、リストの上に既に割り当てられているロール(「削除」/「割り当て解除」コントロールを含む)を表示する必要もあります。割り当てられたリストの役割の上にマウスを置くと、ツールチップが少なくともグループ名とともに表示され、十分なスペースがある場合は役割の説明も表示されます。すべての役割のリストで役割の上にマウスを置くと、その役割の説明がツールチップに表示されます。

mockup

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

2
dnbrv

リストが100以上のエントリに拡張される可能性がある場合は、3つのアプローチを検討します。

  1. チェックボックス付きのリストボックス。これは、標準のチェックボックスよりもかなり多くの数に対応します。

  2. たとえば「DBO」を選択すると、これを構成する役割が自動的に選択されるように、役割をグループ化します。

  3. これの拡張ですが、ロールタイプのセットを定義し、これらからの選択を許可します(のみ)。また、おそらく@Gangaの2つのリストを使用して、新しい役割タイプの定義を許可します。これを拡張して、ユーザーに「xxxと同じ役割」と言うことを許可します。

あなたは人々がこれをどのように使うかを考える必要があります。 100個のロールがある場合、それらすべてを選択する必要がある人はほとんどいません。それは意味をなさない-ほとんどの場合、彼らは誰かをxxxとして、あるいはyyyのように設定したいと思っています。したがって、機能を提供したり、役割の任意の組み合わせを許可したりしながら、この方法で彼らが物事を行えるようにします。

そして実装レベルでは、これらのオプションはどれも違いはありません。いずれの場合も、ユーザーにロールを割り当てるだけです。これらの選択方法についてです。

1

私はコンボボックスで常に成功を収めてきました。基本的には、ドロップダウンの項目にチェックボックスがあるドロップダウンを取得します。

mockup

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

ドロップダウンが折りたたまれているときはいつでも、選択した内容を見ることができ、展開されているときはいつでも入力してオプションのいずれかにすばやくシークできます選択する必要があります。また、あまり場所を取らない。

EDITは、拡張された動作の説明を変更したため、非常に大きなリストに適しています。

1
Matt Lavoie

メンバーなどの基本的な役割を表示し、残りを表示する「詳細」ボタンを表示することができます。タブ付きのインターフェースも役に立ちます

0
andywhizwang