A message from our CEO about the future of Stack Overflow and Stack Exchange. Read now.
29

This is called an accordion navigation control, or accordion menu. Use when you want the benefits of a normal sidebar menu, but do not have the space to list all options. Use when there are more than 2 main sections on a website each with 2 or more subsections. Use when you have less than 10 main sections Use when you only have two levels to show ...


24

I would choose option 3. Use arrows, but have the arrow pointing right when closed, and down when open. download bmml source – Wireframes created with Balsamiq Mockups The reason for this is that the arrow now always points to the content it relates to. If you have an arrow pointing up then it could be misinterpreted as pointing to the preceeding ...


21

I don't think accordions are falling out of favour and while I haven't seen them being used as commonly as tabs, they are still used on some prominent sites. Here's an example of the "General Account Settings" page on facebook. However, there are a few disadvantages, which is why I only use accordions when the following apply: If expanding a section ...


18

I suggest combining these: chevrons on right (more natural, especially on touch, but no offense if you leave it on left) - of course, the whole bar should be clickable to expand/contract - not just the chevron indent for the lower level background color (lighter for lower levels) shadow (to show that lower level is behind/below the higher one) optionally: ...


16

From Wikipedia: The plus and minus signs (+ and −) are mathematical symbols used to represent the notions of positive and negative as well as the operations of addition and subtraction. Their use has been extended to many other meanings, more or less analogous. Plus and minus are Latin terms meaning "more" and "less", respectively. There is the ...


15

No, don't close one when you open another. The reason for this is that the whole screen will start jumping around all over the place when you start closing accordions programatically. For instance - if the user selects item Four from your example they would expect the accordion to open from that point on the screen, but because Item 1 would close at the ...


13

This is one of the most common UX issues, you'll see it in many sites with no justification. Perhaps interestingly, in user testing you'll see people clicking on the (non-clickable) area, then quickly targeting the text - this happens very quickly and people seem completely unfazed, nearly as if they got used to this issue. There is no sense in how the ...


10

In my opinion, an accordion might present problems in some situations: When it's too high. If the accordion is higher than the page, users can't see some of its options. This is likely to happen when two or more panels can be opened at a time. When it's nested inside another accordion. It doesn't work because it's confusing. If it's necessary to make ...


9

Lance Gutin at Vidget did some user research on this. My only take-away from it is that it is a bad idea to use no icon, and putting the icon on the right increases task time. I think the problem is that this is a problem that has no good solutions. Analyzing the results, the most convincing data involved icon location. Presented with an icon to the right ...


9

I spend quite a while looking at various options for accordions (partly in writing the question), and although not definitive, my current thinking is as follows: Left vs right side If you have checkboxes in your accordion, it makes sense to have the indicator on the opposite side to your checkboxes. This is mostly to avoid the situation with many ...


8

The two arrows (or carets) does not represent the exact same thing. The mail button has the arrow on the right brings down a drop-down menu which disappears when focus is lost. This pattern has been seen since early GUI (e.g. early Windows) and we are still using it. The circles label has the arrow on the left expands a tree view node, which stays expanded ...


7

Horizontal accordions have one advantage over carousels in that they do provide a complete overview of available content, whereas carousels by design only hint at additional content. Accordions provide overarching structure, carousels focus on item level details. If your content has a meta-structure and is not simply a collection of items then use a ...


7

Accordions What Problem Does This Solve? When there are too many items to fit into a limited space or when the number of items, if displayed all at once, would overwhelm the user, then the question is how to give the user access to all of the items in digestible chunks and without requiring scrolling, which can remove the user from the context or page ...


7

I have not seen this pattern employed exactly as you describe. My relevant experience in information-rich webapps stems from enterprise health-monitoring and deployment software, which has a deep navigation hierarchy. In my opinion, the left-navigation and the main content should not both employ accordions. Left hand navigation is typically vertical, and as ...


6

While I cant say I have seen a website preforming the show hide function with a button; I believe the more typical convention is to preform show/hide events with the anchor (link) tag if an icon is going to be included. Also the convention appears to be when contents are expanded to have a downward pointing arrow and when contents are contracted to have an ...


6

Here's one to get the discussion rolling. What I see is a question about the best representation of the system state in an accordion menu. Visibility of system status from Nielsen's 10 usability heuristics. Following are my rationale for each option: No symbols at all, just colour to indicate the expansion: State represented by color. Minimal design and ...


6

The ones that I personally like best from those are these, but not for any of the reasons mentioned In the first one, aside from the background color, it's obvious that the items are dropped down from the item above them because the sub-items are all indented. In the second one, it's obvious that the item and the text below it belong together because, ...


6

If you have a separator line between the "Landing page" text and the chevron (arrow), it implies that selecting each performs a different task, which is fine. An app that I did usability testing on used this separation, and it was clear to those that I tested that they performed different actions. Interestingly, when I used the iOS detail disclosure ...


6

You're correct about the matrix of checkboxes becoming ugly :) It's also not scalable to smaller screens (if that's a concern). Several solutions come to mind: MultiSelect This seems like a great use case for a multiselect. The advantage being its scalable to nearly any number of potential options, only selected options are shown, and its searchable so ...


5

I think it makes sense to expand the first accordion by default so that users can start typing right away without clicking any controls. If the user has to go through each accordion you can reveal the next accordion if the user filled in the previous accordion. When the user fills in an accordion and clicks Submit the next accordion opens up and the previous ...


5

I agree that generally you would not close one section when you open another - why unnecessarily restrict the user? However, there can be occasions where it might make sense to do so, and if implemented well it can present a very slick experience. To make it work: each section needs to be of identical size so that the larger frame does not shift around in ...


5

As with Ben Brocka, I have not heard of it "falling out of favor". Historically, there was some initial concerns about their compatibility with certain browsers (mostly IE), but those have largely subsided (except when it comes to mobile-phone compatibility), and now you can make accordions based on pure CSS. Format-based changes If for some reason or ...


5

I assume you refer to this pattern: Or its variant: I can only share the following pointers: Toggle-state-action-ambiguity These controls suffer from the toggle-state-action-ambiguity, where the state is opposite from the action, yet the two are packed into one control. Toggle switch buttons famously have the very same issue. What makes it even more ...


5

As you've discovered, the iOS Human Interface Guidelines document (or HIG) makes no mention of an accordion, however they do refer to the UITableView. This StackOverflow question gets the credit for that. There are also other accordion solutions, such as this one on YouTube. But I think your question isn't "How do I do this" but "Is it OK to do this?" That ...


4

The main difference between tabs and expanders is that tabs remove the old block of content when the user selects a new content block so see, while, with expanders, old content blocks by default remain visible when the users selects a new one. Tabs are thus preferred when the user is zeroing in on a single specific piece of content, and nothing else on any ...


4

if you want to let user focus on one button, i think there is a way to do it. like below, when you click edit, the button will turn to "cancel". If you don't want to save your input, you can click cancel. but if you want to save it, the save button is right below the content(click it ,the item will draw back and open next), you won't miss it if you finish ...


4

Yes you should give user control over the app, always! It is one of the points you check for in heuristic evaluation. I use ISO 9241-110 Ergomics standard for interactive dialog and controlability is one dedicated chapter of it. What happens, if one enters a wrong, but valid working email? How can I correct it, if I recognise the error? A Sidenote: Why did ...


4

Let focus the user on a single task, the registration. Then ask the user to invite others – colleagues and friends – in order to share the same experience. The onboarding is a very critical step and if you add too many features the risk is that the final user experience get complicated.


4

I don't think most websites are trending away from accordions towards carousels. Sites are trending away from carousels, and they are also trending away from accordions (if I were to speculate, perhaps at a slower rate). Disadvantages You asked specifically for potential disadvantages of using accordions instead of carousels, so: If you need to present ...


Only top voted, non community-wiki answers of a minimum length are eligible