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.

While most of the more recent examples I've seen around the Web seem to prefer placing an open/close carat icon before its corresponding menu/selection label, there seems to be no standard on whether this is in fact better or worse than placing the carat after the label.

This example from Gmail's left sidebar illustrates the issue -- both examples are being used in adjoining interfaces:

enter image description here

I tend to follow the mantra that consistency is key, but this is a pattern that seems to lack consistency all over the place. Any arguments one way or the other?

share|improve this question
add comment

2 Answers

The two arrows (or carets) does not represent the exact same thing.

The mail button has the arrow on the right brings down a drop-down menu which disappears when focus is lost. This pattern has been seen since early GUI (e.g. early Windows) and we are still using it.

The circles label has the arrow on the left expands a tree view node, which stays expanded until clicked again to collapse. This pattern has also been seen since early GUI and still being used (although in the past the plus/minus (+/-) signs are used, most recent GUIs tend to use arrows instead).

I think the pattern is very consistent if you think this way. They has been used for so long that we are already used to these patterns as idioms.

share|improve this answer
    
This is absolutely correct. It's not an "Open/Close" caret. One is an indicator that interaction will yield a dropdown menu. The other is an indicator that interaction will yield an expansion of a tree. –  GollyJer Oct 15 '13 at 19:02
    
Thanks for the thoughts! This is a great reminder to think in terms of user interactions and objectives rather than visual features. –  Mike McDearmon Oct 15 '13 at 19:09
add comment

Personally, I think it's an aesthetic decision. Especially when dealing with words/headings that are different string lengths.

share|improve this answer
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.