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.

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.

right aligned arrows

left aligned arrows

share|improve this question
    
I asked a similar question a while back. Take a look at the answers there. ux.stackexchange.com/questions/22085/… –  mawcsco Nov 27 '12 at 14:47
add comment

3 Answers 3

up vote 7 down vote accepted

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 Windows Live Desktop Mail newsreader

Mac OS X Finder http://quince.infragistics.com/Patterns/Examples/07d686f4-1f5a-4b40-8c62-a5f1e2dee682.png

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.

share|improve this answer
    
The examples you provided were very supportive. I think I am leaning more towards the arrow on the left. The only concern I had was the arrow on the left of the text looks visually busy. However I think that could be fixed with some spacing. –  Courtney Jordan Nov 28 '12 at 19:38
add comment

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.

share|improve this answer
add comment

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.

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.