32

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
6
  • 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, 2015 at 15:44
  • 73
    If nothing else, having looked at that first button before really reading the text, it felt really wrong.
    – user56945
    Nov 25, 2015 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, 2015 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, 2015 at 13:28
  • 2
    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, 2015 at 1:27

10 Answers 10

Reset to default
46

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
4
  • 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, 2015 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, 2015 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, 2015 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, 2015 at 2:24
42

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
7
  • 6
    Except possible when it is an on/off switch, when it should contain the current state.
    – Prinsig
    Nov 25, 2015 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, 2015 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, 2015 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, 2015 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, 2015 at 1:24
27

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: [edit; website was updated and no longer shows this dropdown]

Improve this answer
3
  • 1
    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, 2015 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, 2015 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, 2015 at 6:09
12

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
  • 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, 2015 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, 2015 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, 2015 at 16:34
4

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
1
  • 1
    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, 2017 at 23:32
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
1

Because of the very problem you identify, no interface should depend on down and up arrow to expand information.

Instead, they should start with a right arrow/triagle/chevron, like ►, to show the item is closed, changing to down ▼ once open.

This will be self-explanatory to the user, regardless of whether the second position is pointing up or down, because it's at a ninety-degree different angle.

If you start out with a down or up arrow, the user has to wonder whether that means it's closed, or it's open-but-empty. A problem people run into every day. Half of interface designers decided "up" means "click to move this menu up and close it", the other half that it means "is already already up and closed".

But a right arrow clearly means "it's closed now, click to open".

Note that the real interface design experts, those for operating systems, tend to do what I describe, or else use +/- instead.

The up and down arrow is poor interface design, no matter what.

MacOS File Tree

Windows File Tree

Ubuntu (Linux) File Tree

This is what web developers should do, as well.

Improve this answer
3
  • So that means every arrow to the right expands information to the bottom? I don't think that is self evident.
    – Nash
    Jun 21, 2021 at 6:50
  • Any configuration is going to need to be learned. But this is one that's already been learned by pretty much 100% of all computer users, for decades.
    – Kaz Vorpal
    Sep 11, 2021 at 22:21
  • You're giving examples of hierarchies. The OP was about a flat list. While I do see the similarities, they don't necessarily coincide.
    – JNF
    Mar 3, 2022 at 7:49
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
0

In general, buttons should indicate what action is going to be performed when clicked.

Arrows Buttons

Arrows can indicate either action or state - up-down arrows for action, right-down arrows for state.

  • For horizontal items that open a list, the up-down arrows should show an action, where down arrow is used to unfold the list, and the up arrow to fold it.

  • For vertically stacked items (vertical nav/folder structures), the right-down arrows should be used to indicate which children branches belong to it (so not an action), i.e. a closed list is indicated by the right arrow as neither the items above nor below it belong to it. An open list is indicated by the down arrow to signify all the children below it, until the next sibling or the end of the list, belong to it.

    The - button in +/- buttons to condense the list items can be confused for removing a group from the list and therefore the user may be more cautious to click on it if they believe it will in fact remove the group. Arrows won't create that type of confusion.

  • For standalone items (which is technically a horizontal OR vertical list with just 1 item in it), either of the above options can be used and it shouldn't be confusing at all to the user as long as the arrow combination is used correctly.

    So to answer the OP, in this case, the arrows should be switched so that the up arrow folds the list and the down arrow unfolds it.

Other Buttons

Not what the OP asked about, but people commented about power and play/pause buttons and I don't believe it's as complete of an answer without talking about them, too.

  • Power/on-off buttons: should mimic physical buttons, which usually indicate the state of the device - lit up and/or get pushed in when on, and have no light and/or protrude farther out when off - so the button should show that same state accordingly.

  • Play/pause buttons: should follow the general rule for buttons where it indicates the action. It's unintuitive for the play button to perform a pause action or for the pause button to perform a play action.

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 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.