6

When a user visits a site they are presented with some sort of Navigation Structure. Typically the arrow is a standard convention that alerts a user that when this item is clicked an action will occur. It can be presented from expandable side navigation, returning to a previous page to other multiple actions.

Throughout navigating various websites on personal computers to mobile devices I have noticed that arrows can be a bit misleading. Some sites give the impression their side-navigation expands but once you click the item the user is directed to another page or vice-versa.

Through research I have noticed sites like Think Geek using arrows to direct users to new pages while plus signs are used to display expandable content.

Think Geeks website

CSS-Tricks uses a longer version of the arrow that directs users to a new page with more information.

CSS-Tricks website

You-Tube has used arrows on multiple items that almost seem to be over-abundant, unneeded, and a little confusing.

enter image description here

enter image description here

Can Arrows have multiple uses from expanding content to directing users to a new page? Are there any best practices regarding the usage of arrows on websites?

Improve this question

2 Answers 2

Reset to default
1

Arrows always designate direction and movement and guide the eyes to wherever arrows point.

The one thing to always keep in mind is to keep things consistent - ideally, adhere to general standards of the platform or media you are working in, but if in doubt, at least do keep things consistent in your own domain.

Here is a UX.SE question concerned with expand arrows and here you can find an insteresting article about arrows in general

Improve this answer
0

Arrows, like any symbol, can take on whatever meaning you desire, but realize you also need to take into account the 'typical uses' that people are already accustomed to.

In your examples, I see fairly common and consistent uses. Arrows pointing to the right indicate 'going to some content'

Arrows (or, more specifically, triangles) pointing down refer to drop-down menus or expandable content.

And there are exceptions, of course. Often expandable content may also be indicated with a right-arrow, but preceeding the text as such:

 > expandable content

\/ expanded content

(I believe this originated from the original Macintosh OS)

And +/- also work as well (made common with early Windows OSes)

Improve this answer
2
  • I have an accordion style row element. I do know about the convention if arrows precede the content. Which is arrows pointing right in collapsed state and down in expanded state. In my design I have the arrows to the right of the content since I have checkboxes on the left. Where should my arrows point?
    – imbakaran
    Jan 10, 2013 at 20:56
  • @imbakaran that's a good question. You should post it as a question rather than a comment/answer. If you can, show a wireframe/visual as well.
    – DA01
    Jan 10, 2013 at 21:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.