29

In the following images I've animated a button dropdown where the arrow animates to the downward position when displaying the dropdown menu.

Wondering if there is any usability studies on this or if it's mere personal preference.

You can see the animation here if it makes any difference https://dribbble.com/shots/2369431-Daily-UI-027-Dropdown

IMHO I think that the arrow should point towards the content. So when the dropdown is active, it makes most sense for it to point down, when the content goes away, it points up, where the content came from.

Inactive State

Active State

Improve this question
  • 2
    When the dropdown works with a click (rather than a hover), I often see this interaction with a sideways arrow - it points right when the content is hidden then points down when the content "unfolds". – wavemode Nov 25 '15 at 15:44
  • 71
    If nothing else, having looked at that first button before really reading the text, it felt really wrong. – user56945 Nov 25 '15 at 15:59
  • 2
    Not really an answer, but I've see both methods used. For example, say you have a button to swap between single- and multi-something. Sometimes, the button specifies what it does, so "single" means it's currently multi, and clicking it changes to single. Other times, the button specifies the current state, so "single" means it's currently single, and click changes it to multi. In that context, I prefer the button tell me current state, while in the example you gave I prefer the icon show what happens when I click. I'm not sure there's a universally-correct answer. – MichaelS Nov 26 '15 at 9:42
  • The first one definitely looks very confusing. I'm fine with the second one but then as a static icon. – miva2 Nov 26 '15 at 13:28
  • 1
    it points up, where the content came from - Um, really? The content came from above the button?? No way. It comes out of the button! – TaW Nov 27 '15 at 1:27
42

I would consider two things here:

  • Visual connection to action
  • Common standard implementation

To the first point - visual connection: If you see an arrow that points up, you expect something to happen in that direction. You will automatically look up, not down. So every action that goes to a different direction will feel alien, detached. So this argument says: If arrow is pointing down, things should go down.

The second point - standard implementation: If you take a look at mobile standards, you will find, that arrows that point left and right control a back-and-forth progress: The "back" button has a left pointing arrow and the right will point to the right. The reason for this is most likely PAGES in a book, where the next page is "after the current one", which requires an action on the right.

The UP arrow usually represents a "return to top", or a collapse functionality, while the DOWN arrow - even by default html - implies actions that OPEN something that is hidden. What I try to say is: Making it differently will oppose common standards and rather confuse.

Thus, I would always let the arrow point in the direction that the action will happen: If it drops down, point to the bottom.

Improve this answer
  • 3
    Thanks for your feedback Jan! Really helpful thought process. So do dropdown arrows function differently than accordion / folder arrows? I think it's very common for folder structures to point to the content after they've been clicked e.g. codyhouse.co/demo/multi-level-accordion-menu/index.html – whatsnewsaes Nov 25 '15 at 14:38
  • 8
    No, I do not think that a chevron/arrow is a good mechanism to indicate the "opening" of a collapsed content box. In the past, we had the same logic applied to collapsibles, as described above. If you want to create a folder-like appearance, I would rather go to "+" and "-", which would indicate "more detail" and "less detail". I would not consider the example you presented, since this mechanism also is used for link indication, and thus not clearly distinguishes itself from a collapsible. – Jan Nov 25 '15 at 14:57
  • @whatsnewsaes: moreover, the button symbol does represent the action that is being triggered, not the current state. You press + or v, and the collapsible thing unfolds downwards; you press - or ^ and it folds up again. – Bergi Nov 26 '15 at 9:08
  • 1
    You are quite right though @whatsnewsaes, folder arrows do work a different way to dropdown buttons. It seems there are different common practices based on slightly different situations! – joeytwiddle Nov 27 '15 at 2:24
39

A button should show what will happen when it is next clicked - not point to something else.

When the button above a closed menu is clicked, the content will drop down - so the should point down (to where the content will appear)

When the button above an open menu is clicked, the content will move up into the button - so the arrow should point up.

Improve this answer
  • 5
    Except possible when it is an on/off switch, when it should contain the current state. – Prinsig Nov 25 '15 at 16:37
  • 5
    I know that this makes sense, but I have a problem. My music player shows a Pause icon when it is playing and Play icon when it is paused. So if it is on but no headphones connected, I always get confused if I am trying to figure out if it is playing or not. – user67695 Nov 25 '15 at 17:33
  • @Prinsig I have a problem with power buttons on computers or monitors which go dark when the device is off: the black button with dark icon on a black box is invisible. (I put correction tape next to power buttons.) This is a bad design choice: something that disappears when you most need to locate it! The button should be a different color. – user67695 Nov 25 '15 at 17:35
  • @nocomprende That's why the status of the player should be shown at another place than where the button action is. I'm confused by this as well since my player does what your does. – yo' Nov 25 '15 at 23:22
  • A state is a state and it belongs in a label but a Button is about triggering an action. So the Button should always show the Action, e.g. 'Start' and not the state ('Started'). While this sounds very decisive I admit I have my own problems with this. The last time I decided to make a 'Start' button and additionally show the state as a color, so it now is green when running and show 'Stop' and is red whenn stopped and shows 'Start'.. – TaW Nov 27 '15 at 1:24
25

Arrows pointing in our reading direction (right or down) point forwards. Buttons should indicate what happens when clicked. The arrow on a dropdown button should point right or down as it indicates new content will be visible once clicked.

Once the dropdown has been opened, clicking the button again should close it. Therefore the arrow should point upwards or left.

enter image description here enter image description here

source: http://movio.co/movio-cinema/

Improve this answer
  • I think this is acceptable, but it could be argued that you close it by selecting the first item--which isn't the case at all. As such, I'd argue that the icon shouldn't change at all. The actual act of using the drop down is enough to communicate what is going on. – DA01 Nov 26 '15 at 6:00
  • 1
    "it could be argued that you close it by selecting the first item--which isn't the case at all". It doesn't matter where you click, on the button or any item, the dropdown will close in all cases. Heck, it even closes if you click anywhere else on the page.. – Martyn Nov 26 '15 at 6:04
  • 1
    I agree. I just don't think it's necessary to show that with an icon change. Does it hurt? Probably not. – DA01 Nov 26 '15 at 6:09
10

Since you're asking about the direction of the arrow, you might like to check out the Microsoft standards for glyphs and arrows.

Samples of arrows and glyphs

Scroll down from here, to the table that lists the different types of arrows and glyphs. It says things such as this:

  • Chevrons point in the direction where the action will occur, to show the future state.
  • Arrows point in the direction where the action will occur, to show the future state.
  • Expand containers expand or collapse the container content in place when navigating through a hierarchy. They show the future action.
  • Rotating triangles somewhat resemble rotating levers, so they point in the direction where the action has occurred—so they show the current state.
Improve this answer
  • 3
    You can improve this answer by quoting the relevant text. As it's written, we have to read all the page to find the interesting part (in this context). – A.L Nov 26 '15 at 14:59
  • 1
    The relevant content is in a table. I don't know how to enter a table in this system, unfortunately. I have now reproduced a small portion in the answer, per your suggestion. Thanks. – JeromeR Nov 26 '15 at 16:18
  • Thanks. The only solution to enter a table is to use ASCII-art, I think your list is good. You may use the following image as an example: i-msdn.sec.s-msft.com/dynimg/IC725384.png – A.L Nov 26 '15 at 16:34
3

You generally expect a button to show what action it will perform, not the current state of what it toggles.

Consider the play/pause button of a media player. You press play-icon [ > ] and it changes to [ || ] to indicate the action performed when clicking again is now to pause.

Improve this answer
2

To drive this point home even further, I point to the Material Icons by Google. The name of two icons can give you an idea of what the overall consensus for this topic is.

As pointed out, the icons adhere to the idea that you want to indicate what clicking that icon will do. When the content is already expanded, you want to provide an expand_less icon. When the content is hidden you would want to indicate that you can expand for more content using the icon: expand_more

enter image description here

Improve this answer
  • Great, now we have to discuss imprecise naming. "Expand less" doesn't mean "collapse"; it means "don't expand fully," or "contract somewhat," which is not the likely result of clicking an arrow that completely collapses a thing. "Expand more" is simply redundant, unless you can click it repeatedly to expand the expanded expansion ... Double plus ungood! – mc01 Nov 29 '17 at 23:32
0

The more I've thought about this, the chevron arrows indicate to the action that can take place when it's a clickable action. Therefore, think of it as a drawer of content to be displayed.

With a drop-down button, it should be pointing down in the resting state because you can "pull" the content down when it's clicked. And push it back up when you want to hide it.

Improve this answer
-1

If you truly want to know look at the websites of large corporate companies. Many of them hire the best designers out there. While looking at these websites most of them have the arrow pointed downwards. In my opinion, the arrow should be pointed downwards. If the arrow points up and the user clicks or taps the given drop down, the arrow pointed up can cause a contradiction in the mind of the user. Moreover, a contradiction as such, may cause a slight distraction or even an irritation to the user. One could say that I am being a bit far fetched, but I personally don't think that it is worth a slight risk for just pointing an arrow upwards when its just as easy to eliminate the small risk by pointing the arrow downwards.

Improve this answer

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.