25

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

  • 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
  • 5
    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
28

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.

  • 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
  • @rk. Yes, I've seen it something similar in Any.do's iPhone app, though the interaction and endstate are different than my proposed options. In Any.do's iPhone app, there is no checkmark next to each list item and you simply swipe across an item to mark it complete at which point, a strike appears through the list item and a "x" shows to the right for clearing the item. It's strange their iPhone app doesn't include checkmarks and yet, their Chrome extension does (which you click to mark a task complete and then the strike appears through and the "x" appears to the right as it does in the app. – Luke Bornheimer Jun 20 '13 at 18:10
16

Before for left-to-right languages.

After for right-to-left languages.

  • 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. – Reactgular 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
3

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?

0

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).

0

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

  • 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 '14 at 21:16
0

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.

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.