Positioning the Open/Close Caret

Question

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:

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?

Answer 1

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.

Answer 2

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