web-dev-qa-db-ja.com

テーブル行の複数のアイコン/インジケーター

私はグループ(75-125人)のすべての人々をリストするテーブルを作成しています。一目で識別できるように、このグループの主要な役割を持つ特定の人々にフラグを立てる必要があります。フラグを立てる必要のある役割は最大10個あり、1人の個人が1つのグループに複数の役割を持つことができます。

私の当初の考えは、役割フィールドを使用して各人の役割を示すアイコンを表示することでしたが、凡例があっても、アイコンの数がわかりにくく、すぐに識別しづらくなる可能性があることを心配しています。

Icons

考えられる代替策は、テーブル内の各役割のフィールドを表示することですが、これは貴重な画面スペースを無駄に浪費しているようです。

enter image description here

これはUX 101の質問かもしれませんが、ガイダンスはありがたいです。

8
Dave MC

アイコンの数が多くなりすぎるのを心配するのは当然です。あなたが本当に明白なアイコンを見つけることができない限り、これはユーザーにとって圧倒的になるでしょう。

  • 役割を少数のカテゴリに分割し、各カテゴリにアイコンを割り当ててみてください。たとえば、「管理」カテゴリを1つの列にアイコンで表し、次に2番目の列にそれらの役割名をリストすることができます。

  • 次のように、各ロールのアイコンとテキストの両方を表示できます。

mockup

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

3
Franchesca

多くのアイコンをテーブルに混ぜるよりも、それらをヘッダーラベル(ホバーのツールチップ付き)として使用したり、ユーザーにこの役割があることを示す単純なチェックマークを使用した方が簡単な場合があります。このアプローチは、均一な列幅を可能にし、テーブルをはるかにスキャンしやすくすると思います。 enter image description here

3
Tyrus

アイコンの使用に関する問題は、ユーザーに、どのアイコンがどのユーザーグループに関連しているかを思い出そうとする追加の認知的負荷をかける必要があることですそして、ユーザーがテーブルを下にスキャンすると、もはや各アイコンの意味を表すテキストインジケータとしてのヘッダー。

アイコンを使用する代わりに、単純な視覚的インジケーターを使用して、ユーザーがグループに属しているか、または目盛りのようではないかを示す、単純化されたアプローチを使用することをお勧めします。これにより、ユーザーは左から右にスキャンしながらコンテンツをすばやくスキャンし、ユーザーが所属するすべてのグループをすばやく確認できます。この例(別の機能を示しています)を以下に示します。

enter image description here

ただし、さまざまな役割の一覧を1つの列にまとめる場合は、アイコンを使用するのではなく役割を一覧表示し、ユーザーが各アイコンの意味を常に認識しているようにする必要があります。

enter image description here

1
Mervin

テーブルを使用する代わりに、別のデザインパターンを試すこともできます。

  • 人が「アイコン」の数を制限できると想定すると、デスクトップビューに表示されるようにそれらを表示できます。

  • アイコンのリストが大きくなる可能性がある場合、「タップ」するとカードが反転してより多くの情報が表示されるモバイル体験を適応させることができます。

Card List

1
Igorek

ここでの最良のオプションは、ユーザーが何をする必要があるかによって異なります。

1。ファウンダーを見つけるためにリストをすばやくスキップできることが重要である場合、2番目の例のように、ファウンダーを独自の列に配置することは理にかなっています。メンバータイプの列を一目で確認して、探している列をすばやく見つけることができます。

separate columns for member type


2。個々のメンバーについてすばやく学習することが重要な場合は、 @ Mervinの提案 すべてのユーザーの役割をまとめてリストすることで、テキストが最も効果的に機能する可能性があります。 ({a}アイコンが広く認識されているか、{b}ユーザーが毎日システムを使用しているか、{c}スペースが厳しく制約されていない限り、テキストはアイコンよりも優れています個々の行に関する情報を探しています。)

enter image description here
2つのデザインの主な違いは、通常のユーザーが
1。は、検索したいメンバーのタイプを知っていますが、そのメンバーが誰であるかは知りません
または
2。は、情報が必要な人を知っており、その人に関する情報を探しています。

0
Graham Herrli

あなたは「10まで持つことができる」と言います...しかし、ほとんどの人はいくつ持っていますか?

ほとんどが1つまたは2つの役割を持っている場合、最大2つのアイコンと、それを必要とする人のための「詳細」リンクを表示できます。

もう1つの考えは、ユーザーが主要な役割を特定し、必要に応じてそのアイコンに「詳細」へのリンクを表示することです。この方法でも、他のユーザーに最も価値の高い情報のみを表示すると同時に、ワンクリックまたはホバーするだけで追加情報が利用可能になったことをユーザーに通知します。 -ジョシュ

0
JoshC

原則として、アイコン自体を使用して複雑な概念を伝えることは、複数の解釈を行う傾向があるため非常に困難な企業であり、特定の役割ではなく、より大きな役割のグループを識別することを強くお勧めします。ただし、アイコンを使用する場合は、正しい意味が伝えられるようにラベルを含める必要があります。

または、アイコンを忘れてグループ内のすべての人をタイプで分類し、複数のロールを持つメンバーに関連付けられた複数のタグを設定して、ユーザーがフィルターを使用してリストを関連する名前に絞り込むこともできます。それが役に立てば幸い

0
Okavango

テーブル内のデータを単純化することは、読みやすさにとって重要です。フロントエンドテーブルを作成するときは、SQLテーブルをある程度行う場合と同じ原則を使用します。

データベースの場合は、役割ごとに新しいアイテムがあります。返された1つの列挙子またはcsvの代わりに。だからあなたのテーブルで私はそれをします。

ここであなたに起こったと思うのは、「アイコンはここでかっこいいだろう」という考えを持っていたということです。そうすれば、アイコンは実用的ではないが、まだ実装したいことに気づきました。ソリューションが複雑すぎます。

目盛り付きの列はこれを完全に行い、疑いの余地を残しません

編集:

または、役割とアイコンの中央揃えで、役割が適切に管理されているように見えない場合もあります。

左から揃え、幅を設定し、アイコンの上にカーソルを置くとツールチップが表示されます。ただし、余白が多すぎる可能性があります

ユーザー1 | V |

ユーザー2 | X V |

0
LiamHT

リストが非常に大きい場合、アイコン付きの複数の列は機能しないと思います。チェックボックスを選択してロールを追加することを好みます。

0
MikeD

ユーザーがリストに頻繁にアクセスし、役割が最大10になる場合は、アイコンとマウスオーバーツールチップを使用して説明することをお勧めします。

クイックビジュアルスキャンでは、アイコンは単語よりもはるかに優れています。いくつかのやり取りの後、ユーザーはアイコンとその意味を学習します。

それ以外の場合、ユーザーがリストに頻繁にアクセスしないか、将来的に役割が10を超えるようになる場合は、1つの列と単語を使用し、アイコンは使用しないことをお勧めします。

0
DesignerAnalyst