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?
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.Sign up to join this community
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.
Before for left-to-right languages.
After for right-to-left languages.
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?
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).
Icons go on the left because users scan from left to right and icons help users scan.
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.