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.

I want to display a list of permissions, with tick icons to indicate what permissions a user has. Where should I place the tick icons - before (on the left) or after (on the right) each item?

enter image description here

share|improve this question
    
Welcome to UX.se Chandru! You need to provide some more information before we can help. Can you show your mockup/screenshot with the checklist? What platform is the checklist for? And, any other relevant information. –  rk. Jun 18 '13 at 14:27
4  
Im not able to add image. It ask for 10 reputation. –  Chandru Jun 18 '13 at 14:28
    
What is the context of the checklist? Is the user adding the checks or is the user just reading the list? –  rk. Jun 18 '13 at 14:46
    
User just viewing the list... We have to indicate the user you have the permission for these things..... –  Chandru Jun 18 '13 at 14:50
    
Check box with checkmark is often and near always at right but checkmark to say the option is in a good state is sometime at right to let the user to read and have the context before understanding the icone...netherless. ..don't forget to put the check mark green...because in this case if it is yours color and form can be more important than place to help the your users –  pierre lebailly Jun 21 '13 at 17:01

6 Answers 6

As noted in previous answers, I would go generally with a check mark on the left side, especially for lists where most of the items are checked. (for left-to-right languages)

However, in confined space as dropdown menu (modal window), you can notice disruptive spacing issues when you have more unchecked items than checked ones. I wouldn't be afraid to use checkmarks aligned right in this case coupled with colour differentiation. Often creates more balanced result.

share|improve this answer

Icons go on the left because users scan from left to right and icons help users scan.

Where to Place Icons Next to Button Labels

share|improve this answer
2  
Can you elaborate a bit on your answer? Link only answers can be problematic for several reasons. And yes, I recognize the irony of this comment :) –  Charles Wesley May 19 at 21:16

I would add a feature to your product to let the user specify their "handedness". If they're right-handed (as most people are) place the check mark on the right. If they mouse with their left hand, put the check marks on the left.

Now, it gets interesting if this is a touch interface - something like a tablet or a touch phone. In the case where the user holds the tablet with their left hand, the check marks should be on the right, since that's the hand the user is going to be using to tap the screen (and vice versa holding with right and tapping with left).

share|improve this answer

I would go with a check mark on the left side.

Reason being: Since the list is in English, the user will be reading from left to right. The length of the text need not be the same, leading to uneven right end. But the starting position on the left will be the same. Makes for easier scanning.

share|improve this answer
    
Thanks for your answer! –  Chandru Jun 18 '13 at 15:04
10  
I'd stress that the text should be left-aligned if you do this –  Peter Jun 18 '13 at 15:07
    
I agree, to the left as it is easier to scan . –  rubysoho Jun 18 '13 at 15:46
    
It would be interesting to experiment with the checkmark on the left side when inactive (an uncompleted task) and then moving across the list item when the user taps the checkmark to mark the item complete. As I envision it, the checkmark would create a strikethrough line as it moved across the list item. What are people's thoughts of this interaction, and has anyone seen something similar in production? –  Luke Bornheimer Jun 20 '13 at 6:47
    
@LukeBornheimer You can look at some of the To do list apps for the interaction you mentioned. They do not switch the sides of the tick mark - usually they have a check box and when you check the item, the text is striked-off. –  rk. Jun 20 '13 at 13:42

Before for left-to-right languages.

After for right-to-left languages.

share|improve this answer
    
Thanks for your answer! I using left to right language... –  Chandru Jun 18 '13 at 15:05
14  
"and after for right-to-left languages" in a sense is also "before"... :-) –  Marjan Venema Jun 18 '13 at 16:22
    
@Chandru There are exceptions to the rule. Sometimes the label is on the left so that the check marks align with other fields, and reading labels is not inconsistent. But, when on their own it's left-to-right. –  Mathew Foscarini Jun 18 '13 at 16:25
    
@Chandru is it your feeling for right-to-left langage or it is a real ergonomic norme or standard made by right-to-left natural langage ? –  pierre lebailly Jun 21 '13 at 16:57

A check icon on the beginning reads as a bulleted list - an unordered list of elements.

An aligned check icon at the end gives the impression that it's a checklist - a list, likely ordered, of things that must be accomplished (and possibly have been accomplished, since they are checked off).

Which are you trying to provide? An unordered bulleted list, or an ordered checklist?

share|improve this answer

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.