Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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!

share|improve this question
    
Off-topic. –  Anko Dec 11 '12 at 13:04
    
@Anko, I'm really willing to get better in using StackExchange websites, but I still think it is not off-topic. My question is not on a specific icon, but rather on how to manage a collection of icons that should be visually very near and at the same time have a different meaning. I'm not asking you to create an icon (please don't) but on how you would recommend me to differentiate them. anyway thx for the link :) –  leMoisela Dec 11 '12 at 13:41
1  
@leMoisela can you rephrase it so it's avoiding the 'best icon' type wording, as that makes it appear to be an icon request. There is an interesting question in here, but if it's based around requesting icons you'll get those as answers (and possibly get downvoted for the question itself). –  JonW Dec 11 '12 at 15:03
    
thx @JonW. I edited my title hopping it is clearer. –  leMoisela Dec 11 '12 at 15:55
add comment

3 Answers

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

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

share|improve this answer
    
Downvote, because a tie is gender specific. –  kontur Dec 11 '12 at 13:02
2  
kontur: Not in all cultures. British schoolchildren wear ties regardless of gender. Of course, this cultural ambiguity would harm the design. –  Anko Dec 11 '12 at 13:05
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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