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 came across this right aligned text dropdown menu on eBay.com: While I'm sure I've seen this before, I've never contemplated the benefits.
In this context, is this method more beneficial than the text being left aligned? It seems like the trend is to use a larger scale and more dramatic contrast between the dropdown menu and the background. Does this method of right alignment work better when the drop-down text size is smaller?
The advantages I can see from the example you provided are it's skim-ability.
To me it looks like Ebay is exploiting a cognitive trick similar to what Spritz's quick reading technology is doing.
Where text is in relation to eachother is very important to lowering the cognitive load required to understand why it is there, to illustrate my point I will take the drop-down menu from your example and replace the words to the right of their context descriptions with their word-types...
Time: adverb adjective
Price+Shipping: adjective number
Price+Shipping: adjective number
Price: adjective number
Distance: adjective number
adjective noun
Number of bids: adjective number
Number of bids: adjective number
This information is provided in such a way that it would barely matter if there were spelling mistakes in the context describers (text on the left) because your brain has already assumed what the text is saying without cognitively thinking about it
S1M1L4RLY, Y0UR M1ND 15 R34D1NG 7H15 4U70M471C4LLY W17H0U7 3V3N 7H1NK1NG 4B0U7 17.
Either their brilliant, or it was just luck, maybe a bit of both. Nice question though! hope this helps.
Generally for most list type items, it is better for it to be left aligned.
Secondary information or actions can be contained as right aligned elements in the second column.
Here's the example from Google:
Another with secondary info:
Normally when creating a menu like this it is best to have the most descriptive word first to aid scanning, and to avoid duplication (e.g. "Price + Shipping" is the first part of 2 menu items, potentially forcing the user to read it twice before finding the option they were looking for). I think that the alignment in this example also hinders scanning, because my focus has to jump about to find the start of the text for each menu item.
I don't see any advantages, but would be interested to know if anyone else knows any.
Right alignment is more common when the dropdown button is far enough to the right of the page that the menu itself is right-aligned. In this case, right alignment of the text is often used to create a clean visual line down the right edge of the menu and to avoid jagged whitespace directly under the menu button
It's not great for scanning the menu options, but it can look a lot cleaner.
No right aligning is not more beneficial than left aligning the text.
Menu's, lists, and grids need to be easy and quick to scan for the right information. The rule of thumb in that case is to left-align text and right-align numeric data.
- Microsoft Guidelines on Alignment
- Great article from xlcubed on alignment
- Post about grid text alignment where JohnGB links to the page from xlcubed
Try searching this forum for text alignment and you'll find a lot more posts on this topic.
Generally your users are accustomed to reading from left to right from a cultural perspective (unless your designing a page for users who read from right to left). Left aligning the text makes it very easy to scan the menuitems without having to adjust your eyes for every new row. Right aligning the text forces the user to actively focus on each row to be able to read it and understand the message.
For numbers it is different and I would suggest you take a look at the article from xlcubed. They provide a good explanation on the benefits of right aligning text in case of numerical data.
