Tag Info

Hot answers tagged

27

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


15

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


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


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


11

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


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


7

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


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

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


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


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

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


2

Tabs give a clear indication that it contains some data, but an Accordion (especially the very styled ones) will look like a piece of information or decorating text or something...some user may not even click at the accordion to know if its contains something. Reference: Self experience as user & web designer.


2

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


2

I work with the SlideDeck team, so I thought I'd chime in. SlideDeck actually allows you to turn off the vertical spines, if you're looking to go for a more traditional carousel appearance - one of the skins that comes with it allows you to do this. In terms of customization, it's really only limited to your skill and comfort with HTML/CSS/jQuery.


2

Thought this article might help you decide. http://baymard.com/blog/accordion-style-checkout In summary accordions are becoming more popular as a check out style. Something I have been suggesting for several years. But it looks like you have to think very carefully about the design. I tend to agree with Roger that when designed well shutting down an ...


2

The difference you described exists only because this is a non-exclusive accordion, meaning it doesn't exclusively show a single panel at once, since multiple panels could be expanded at the same time. Or you can call them collapsible panels, which is where accordion originally came from, people have the need that only 1 panel should be opened at a time, ...


2

Which menu is best really depends on your situation. More specifically the number of menu items and the relationship between them. If you have few items (less than about 15), don't bother with the overhead of an accordion menu. If the you have many items, you then need to decide whether your users believe that there is a clear relationship between them or ...


2

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


2

I think arrows pointing down on the left work best, the +s and -s are annoying and make your brain confused. I like left-side things, but I'm right-handed, so that might have an influence. And the arrows pointing down or across are nice, you can usually easily understand what they mean. There should be an indent too, the colors should have a medium contrast, ...


2

Accordions have a number of problems. The other options tend to scroll out of the viewport if one item is open. Also, the options are never in the same place. And they don't handle multiple levels very well. It's really not that great of a pattern for navigation but it solves two important problems: Space. Accordions are a really compact master-detail ...



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