1

When looking an expandable panel, such as those which one might find in an accordion and considering the situation where the arrow is positioned on the right hand side of the element which is to open, which of the following two arrow directions is the most likely to imply to the user that the panel content opens below the heading:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

To be precise, I am looking specifically for answers that concern controls where the arrow moves on click to indicate something opened and ends up in the down pointing position to indicate that the panel is open.

  • The one pointing down. :) – Matt Rockwell Jun 23 '14 at 19:47
  • in most cases that seems to be used to indicate that the content is open – Toni Leigh Jun 23 '14 at 19:49
  • @colineSharpe look at the one in the top left of this site next to StackExchange – Matt Rockwell Jun 23 '14 at 19:53
  • @MattRockwell I edited my question, I am looking for something about specific opening content where the arrow moves, the stack exchange one is a bit more like a dropdown than the sort of expandable panels I mean – Toni Leigh Jun 23 '14 at 19:54
1

It depends on the location of the arrow.

For arrows that are on the left of your accordian menu (before the text) it seems to be the convention to do it like this:

right pointing arrows on accordian menu

and it is much more intuitive to have the arrow icon on the left side (pointing at the text).

When the arrow is on the right side of the text, there seems to be no particular convention (the arrows can point left or right). It makes a little more logical sense to me to point the "closed state" arrow towards the text, but the direction of scanning, and the distance of some of the arrows from the menu item text (gestalt: they don't look like they belong to the text) makes having the arrow on the right side unintuitive.

enter image description here

In all of the above examples, the arrow indicates the current state on the menu item (sideways for closed, pointing down for open).

However there is another paradigm using up/down arrows:

enter image description here

In this example the arrows are used to indicate the state that the menu item will be in if you click on it, rather than indicating the current state.

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.