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 have been working on a project that involves reconstructing a page side navigation. Throughout the project i've researched current trends in navigation structure and noticed arrow placement on the left. Are current trends steering away from the right side arrow? Does the left side arrow provide for a better user experience?
I have provided examples below with right and left arrow placement.
I'd say go with the second example (arrow placement to the left of the text). Why's that? Well, take a look at for instance the Explorer of Windows and you'll notice the arrows being placed to the left, or e.g. in the Component inspector of Google Chrome. In other words, this is most likely where users expect the arrows to be placed (based on previous usage). Some other examples:
Windows Live Desktop Mail newsreader
Mac OS X Finder
Are current trends steering away from the right side arrow?
To be honest I have not seen examples of this recently so I'd say yes.
Does the left side arrow provide for a better user experience?
Well, it's probably the most familiar experience for the users, so in that sense, yes.
As we can see in this article Best position for collapse indicator on collapsible content Microsoft use arrow at right BUT in this case as we can see the direction is up to down not left to right as in your mockup
So I would say if it is:
for accordion menu it can be on the right with up to bottom direction to expand and with arrow direction bottom up to close when it is opened. The guide line for an arrow and it opposite is the same vertical.
for multi-levels like directory expand on the same screen for example on pc screen it is better on left. On the right I tried and in some cases I didn't see my expand icon with very long label. My icon was outside my pop up. In this case for icon use convention of the operating system
for multi-levels navigation on a mobile device page by page convention is on the right with only direction arrow from left to right. Because in this case the message is the same than next button. And convention for Next button is on the right. But the close button is on the top on the left on the next screen and sometime it is an arrow right to left or "back" label.
I forgot it is on right on mobile device to respect this "on mobile device insure you don't hide content with your hand..." so right is good for thumb.
I think each arrow presentation has different use cases.
The right side arrow is used mostly for single level navigation and lone items.
This appears to be the standard for standalone items, such as buttons and links, where the idea is "click here and go somewhere else". Same for the drop-down list.
However, the left-hand triangles, are being used specifically as part of a multilevel accordion design pattern. Clicking on an item opens the sublist below. In this case, I very seldom see them on the right, and I think they just make more sense on the left.
I definitely think the left arrow here provides a better user experience.
