How to make icons representing users differentiable when users do not have the same role/importance

Question

Consider the administration part of a web application. I want to display the list of all users, with a hierarchical structure like this:

admin 1
 - sub admin 1
 - sub admin 2
   - simple user 1
   - simple user 2
 - sub admin 3
   - simple user 3
 ...

The application is organized as follows; There are admins, sub-admins and simple users. The admins can manage everybody, the sub-admins can manage the users, and the users have no access to admin related privileges.

My goal is to add a small icon on the left of each user, in order to add clarity to the structure (even though the left padding already makes it quite clear). I was thinking of a simple silhouette.

So my question here is: How to differentiate the icons (silhouettes) of the admins, the sub-admins and the users using the same graphical basis? Is there a recurrent color code in web applications (e.g. red for admin, green for subs and blue for users) that I could use, or is there another simple way (and graphically as simple as possible) to make it clear who is what?

When googling for icons, the main idea for "admin" users icons is to add a small key to the silhouette. There are some existing threads but not really what I am looking for: Most appropriate icon for user responsibilities?

Any help would be much appreciated!

Answer 1

This is a great user experience question.

For icons that represent different tiers of access control across a given set of permissions, it is very appropriate to have them all share a common base element. The respective roles' icons can each then be distinguished on the basis of additional design elements, given each more or less visual "weight" corresponding to its relative position within the permission hierarchy. Lower tiers' icons should be simple, and higher tiers' icons should be more complex.

Consider as an example the U.S. Army's enlisted rank insignia. From Private to Corporal and all the way up to Sergeant Major of the Army, the insignia designs share common elements but increase in complexity. That level of complexity is the design variable used to convey meaning.

Regarding additional differentiators like color - be judicious about introducing it to further distinguish icons. Color can be a powerful information design variable to work with but only if it is used sparingly and consistently, with discipline. In most contemporary web UIs, colors have common meanings...yellow = "warning/caution," red = "destroy/delete/error," green = "success," etc. Once you start using those colors for other purposes you essentially add to the learning curve and ask more of users.

In your case it is probably unnecessary to introduce color as another distinguishing feature for the icon set, it would only be ornament and probably add noise/overhead to the experience. This underscores AndroidHustle's point about the introduction of graphical flare, and the cost vs. the benefits.

Answer 2

I would actually advice you to reconsider including an icon for every singe item in the tree.

Now, why do I say that? Well, as you already mention, you already communicate clearly in the tree which role a user has depending on how indented the item is in the tree. Adding more content, showing the exact same information in another way would in this case not really aid the user. In fact, it may run the risk of the tree starting to feel cluttered.

Another argument to weigh in is the factor of redundancy a graphical element has in a UI. In a case with many users on the same level, you would get the same icon repeated for each item in the list, which would make it redundant. It's always a good thing trying to design around information and graphics redundancy, since this will make the UI feel lighter.

I realize you may want to add some graphical flare to the tree, and though that is a legitimate reason I would still advice you to reconsider. Add content only when you can argue good reasons for how it will aid the user and improve the over all UX.

Answer 3

You could use persons icon:

A suit and tie for admin: http://www.iconfinder.com/icondetails/22191/128/client_male_man_user_icon

A tie for sub-admin: http://www.iconfinder.com/icondetails/22178/128/administrator_employee_geek_male_man_suit_user_icon

And a casual guy for simple user: http://www.iconfinder.com/icondetails/22254/128/male_man_user_icon

The icons are mere examples, you could place some medal, like navy badges.

Try to use some icon that can represent different levels of power