Tag Info

Hot answers tagged

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


18

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


15

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


14

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


14

Good question! Tabs have unlimited height and they can span a number of screens, while an accordion must fit on one screen. It's not a technical limitation, of course, but it would be a terrible idea to make an accordion that expands away out of my field of view, because then I'd have to scroll down to click the next "bar", just to have it expand up and ...


12

In Designing for Senior Citizens | Organizing Your Work Schedule (UXmatters, 2010), several "experts" including Dana Chisnell, Steve Baty, and Pabini Gabriel-Petit discuss the issue of designing for senior citizens. The article references original sources at the end. Specifically, they mention legibility through color and typography usage. They mention ...


12

I'd say the convention is for the arrow to point right when collapsed and down when expanded. See this example, were the third one is opened:


11

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


10

This question is more about What is the established paradigm? than Which one is better? in an absolute sense. Really we are just talking about which symbol to use for the same functionality. The only issue is what expectations the users have about each symbol; it is rather silly for someone to claim that + and - are inherently bad. + and - were a longtime ...


8

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


8

I’m not sure there’s a definitive answer yet. Here’s how I see the options. Arrow Conventions Trees have used right-pointing arrows for closed and down-pointing arrows for opened, which, as FreshCode mentions in his answer, has been generalized to expanders. It’s a reasonably well established convention, going back to Vista for Windows and the mid-1990s ...


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

Senior citizens and E-commerce websites: The role of perceived usefulness, perceived ease of use, and web site usability (PDF, 2008) Age differences in constraints encountered by seniors in their use of computers and the internet (paid content,2011) “Partnering with Seniors for Better Health”: computer use and internet health information retrieval among ...


6

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


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

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


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


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


4

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


4

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


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


3

I don't think it's likely that users will miss the accordions in option 1 unless the graph is full page and the items are pushed right to the bottom of the viewport. I do, however, see several problems with option 2: It could imply both item 1 and item 4 are open, which implies that the accordion can be interacted with in a non-legal way. It could also ...


3

When to use an accordion What problem does an accordion solve? It solves the problem of not having enough space to show all items, so instead, you collapse all but one of them and allow the user to toggle between them. The downside is that the toggle controls are dependent on the length of the contained content. In your case, it sounds like the contained ...


3

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


3

I'd probably go with a long single-page form. In general, I would probably suggest having them all available at all times. It's ok to have a long page, as long as there's nothing restricting you to a certain page size. (Ex: if you're designing a kiosk or something.) People have no problems with scrolling, and the annoyance of having to scroll a long way ...


3

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


3

If you objective is to showcase your work (and the work is limited to single digit books) then a grid is better than an accordion. In a grid, you can see all the books and the summary, link, etc. in a single view. Compared to that, in an accordion you have to click on the title of the book to get the remaining details like cover, summary and other things. ...


3

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


3

If the experience will be mainly on mobile devices, I would choose the accordion style. Anchored top menu and "back to top" affordances are a bit harder to use on mobile devices and take up space in ways that aren't friendly on phones. You can program an accordion to stay open when another is expanded. I wouldn't supply an "expand all" control. While they ...


2

I am quite into using arrows when exploring a tree/file structure. But I feel the contents of an accordion is much like a dialogue, specifically I am not expecting a tree. Accordions to me have their expand/collapse switches on the right (which is where I think you are placing your left/down symbol) and trees have theirs on the left. They use +/- or arrow ...



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