8

I am creating a table that lists all of the people in a group (75-125 people). I need to flag certain people with key roles in this group so they can be identified at a glance. There could be up to 10 roles that need to be flagged, and an individual could have multiple roles in a group.

My initial thought was to use a role field to display icons denoting each person's role(s), but I worry that the number of icons could become confusing and not easy to identify quickly, even with a legend.

Icons

A possible alternative is to display a field for each role in the table, but this seems like an unnecessary waste of valuable screen space.

enter image description here

This may be a UX 101 question, but I appreciate any guidance.

  • 1
    Is there a specific reason you want to use icons to denote the different roles? – Mervin Johnsingh Sep 11 '14 at 18:46
  • Not really, especially if I build out columns for each role. I thought the icons would help fulfill the "identified at a glance" requirement better than text if the roles are combined into a single field. – Dave MC Sep 11 '14 at 18:59
  • @DaveMC, you mention that your second option may be "an unnecessary waste of valuable screen space," but it's the column headers that are taking up the space, not the icons themselves. You could make the separate-column option work by rotating the headers so that each column is only one icon wide. – Graham Herrli Sep 11 '14 at 20:43

10 Answers 10

3

You are right to be worried about the number of icons becoming too large. Unless you can find icons that are really obvious, this will become overwhelming for the user.

  • You could try splitting the roles up into a small number of categories, and assigning an icon to each category. For example, you could have a "management" category represented by an icon in one column, and then a second column that lists their role name(s).

  • You could display both the icon and text for each role like this:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

3

Rather than mixing many icons into the table it may be easier to use them as the header label (with a tool-tip on hover), and a simple check mark to indicate that a user has this role. I think that this approach allows for uniform column width and will make the table far more scannable. enter image description here

  • This wont work on a mobile device. – Mervin Johnsingh Sep 12 '14 at 19:16
  • Sure, hover states will not work on mobile, but a tap/reveal would. Also, mobile was not mentioned in OPs question. – Tyrus Sep 12 '14 at 19:28
  • Agreed, but considering most people do access websites on mobile, I just wanted to point it out. Also a tap would require additional interactions which the user would need to know about – Mervin Johnsingh Sep 12 '14 at 19:33
  • Fair point about the additional interaction... but your first statement, "most people do access websites on mobile" - is woefully inaccurate. – Tyrus Sep 12 '14 at 19:38
  • We can take this on chat if you want to discuss this further but I would like to know your reasoning behind that statement – Mervin Johnsingh Sep 12 '14 at 19:44
1

The problem with using icons is that you are requiring the user to have an additional cognitive load of trying to remember which icons relates to which user group and as the user scans down the table, he will no longer have the header as the textual indicator of what each icon stands for.

Instead of going with icons, I would recommend going with a simplified approach where you just use a simple visual indicator to indicate if a person belongs to a group or not like a tick mark. This will enable users to quickly scan the content as they scan from left to right to quickly see which all groups the user belongs to. An example of this (though showing a different functionality) is given below

enter image description here

However if you are looking at keeping it the listing of the different roles down to a single column, a simpler approach would be to just list the roles rather than using icons and requiring the user to be constantly aware of what each icon means.

enter image description here

1

You could also try a different design pattern instead of using a table.

  • Assuming a person can have a limited number of "icons" you could display them as shown on desktop view.

  • If a list of icons could get large - you could adapt the mobile experience where on "tap" a card flips to display more information.

Card List

0

The best option here depends on what your user needs to do.

1. If it's important to be able to quickly skim the list to find a Founder, it makes sense to put Founder in its own column like your second example. You can glance down any of the member type columns and quickly find the ones you're looking for.

separate columns for member type


2. If it's important to quickly learn about an individual member, then @Mervin's suggestion of listing all of the user's roles together as text could work best. (Unless {a} your icons are universally recognized or {b} your users use your system all day every day or {c} space is severely constrained, text is better than icons when you're looking for information about an individual row.)

enter image description here
So the key distinction between the two designs is whether your normal user
1. knows the type of member they want to find but not who that member is
or
2. knows the person they want information about and is looking for information about that person.

  • At my current company, we actually had a case where we put multiple icons side-by-side in a single field, but that's an exception rather than the rule. Our space was very limited and many of our users use the software all day long. – Graham Herrli Sep 11 '14 at 20:27
0

You say "could have up to 10"... But how many do most folks have?

If most have 1 or 2 roles, you could show up to 2 icons plus a " more" link for those who need it.

Another thought is maybe users could identify their primary role, then just display that icon with a link to "more" when needed. This way too, you are showing only the highest value info to the other users while also letting them know when additional info is available just one click or hover away. --Josh

0

In principal the use of icons (on their own) to convey complex concepts is a very difficult enterprise because they are prone to multiple interpretations, so would strongly suggest identfying larger groups of roles rather than specific roles. However, if you intend to use icons, you need to include labels to make sure that the right meaning is conveyed.

Alternatively, you could forget about icons and classify all the people in the group by type and have multiple tags associated with members who have multiple roles and allow your users to use a filter to narrow down the list to the relevant names. hope that helps

0

Simplifying your data when in a table is crucial to readability. When I make a front-end table, I use the same principles as if I would be doing a SQL table to some extent.

If it were a database, you'd have a new item per role. instead of one enumerator that returned, or a csv. So in your table I would do that.

What I think has happened to you here is you have had the idea of "Icons would be cool here", then you've realized that they arent practical, but still want to implement them. so you are over-complicating your solution.

columns with ticks will do this perfectly, and wouldn't leave any room for doubt

edit:

alternatively, it may be the center aligning of your roles with icons not making the roles seem very well managed.

having them aligned from the left, with a set width, and a tooltip on a hover over the icon could be an alternative. however it may cause too much white space

User 1 |     V  |

User 2 | X  V  |

0

If the list is so big, i think that multiple columns with icons is not functional. I prefer to add their roles with checkbox choice.

0

If your users will visit the list frequently and the roles will be maximum 10, then I recommend that you use icons and mouse over tooltips for their descriptions.

Icons are much more superior than words for a quick visual scan. After a few interactions your users will learn the icons and their meaning.

Otherwise if the users will not visit the list frequently or the roles will increase in the future to be more than 10, then I recommend you to use one column and words, no icons.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.