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?


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.

  • 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. Oct 15 '13 at 19:09

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

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.