Good alternative to accordions?

5 Mar 2010 - 6:20pm
4 years ago
8 replies
1606 reads
jennfish40
2010

Can anyone suggest an alternative to accordions that breaks a workflow into chunks but still allows the user to have multiple sections open at a time?

Comments

5 Mar 2010 - 6:55pm
Patricia Colley
2010

A concertina?

But seriously folks... sounds like faceting might work, but without more detail, I'm not sure what you're trying to achieve. 

5 Mar 2010 - 8:14pm
Petteri Hiisilä
2004

Hi Jennfish,

One way is to have all sections open when the web page loads, but put only the most expected/appreciated content into them. The rest of the content opens by clicking a "More..." link at the bottom of the section; and the next header slides down revealing the extra options.

With this pattern it's important to not make the section header rows look like they were following the typical accordion design pattern (filled background color), because they aren't. Instead, make them look like normal headers. The only difference is the link to reveal more content between the headers.

Also, when the user clicks the link, the bottom of the page must scroll down to reveal the content, but everything above must stay still. If everything moves when only small interaction was expected, there will be a #WFT moment.

If you carefully consider the sections and their contents, you may find that out of five sections, only 1-2 will have a variable content height to the extent that such interaction is even necessary. Most sections would have all of their contents always visible, and the rest would have a "More..." link to reveal more. That's quite often the case.

Hopefully this helps.

- Petteri

 

(My message didn't appear through a regular reply, so I copy-pasted it in the site. I'm sorry if this is a repeated message.)

8 Mar 2010 - 12:39pm
jennfish40
2010

Thanks for the input! I have contemplated using something similar to the "more" link to hide some of the information that isn't as crucial to the workflow but I think it will only solve part of the problem. I'm not sure what faceting is. Patricia, can you explain a little more?

8 Mar 2010 - 2:09pm
Laura Malone
2009

One way I have dealt with this is to use psuedo-accordians (i.e. panels that can remain open if the user desires).  In this case only one panel open at a time is the default behavior, but the user can over-ride the close action by  checking a "keep panel open" option if they want to view more than one panel at a time. In other words, they can open and close panels at will. While this does contradict the expected behavior of panels, I predict that the expected behavior will change because this is a more useful and flexible way to utilizing the benefits of panels.

-- Laura

14 Mar 2010 - 6:51pm
Joshua
2009

Jennfish,

This person modified the typical accordion behavior (modifying jQuery UIs implementation), so they act more as toggles per section, versus one section at a time.

http://www.michaelkeck.de/projects/jquery/

Josh

26 Mar 2010 - 3:40pm
Petteri Hiisilä
2004

Hi Jennfish,

One way is to have all sections open when the web page loads, but put only the most expected/appreciated content into them. The rest of the content opens by clicking a "More..." link at the bottom of the section; and the next header slides down revealing the extra options.

With this pattern it's important to not make the section header rows look like they were following the typical accordion design pattern (filled background color), because they aren't. Instead, make them look like normal headers. The only difference is the link to reveal more content between the headers.

Also, when the user clicks the link, the bottom of the page must scroll down to reveal the content, but everything above must stay still. If everything moves when only small interaction was expected, there will be a #WFT moment.

If you carefully consider the sections and their contents, you may find that out of five sections, only 1-2 will have a variable content height to the extent that such interaction is even necessary. Most sections would have all of their contents always visible, and the rest would have a "More..." link to reveal more. That's quite often the case.

Hopefully this helps.

  • Petteri

-- Petteri Hiisilä Senior Interaction Designer, owner / iXDesign

Mobile: (408) 256-0430 (USA), +358505050123 (FIN) Twitter: http://bit.ly/aDaP8R LinkedIn: http://bit.ly/1n1zTR

"People don't resist change, they resist being changed." - Peter Scholtes

On 6.3.2010, at 1.55, jennfish40 wrote:

> Can anyone suggest an alternative to accordions that breaks a workflow into chunks but still allows the user to have multiple sections open at a time? > > (

26 Mar 2010 - 3:40pm
jason zietz
2007

Technically an accordion interface only has one section open at a time, so it sounds like that isn't what you're looking for.  You can simply divide the workflow into sections which can be hidden/revealed on demand.


As Patricia said, more information regarding the problem that you are trying to solve would be helpful.



On Fri, Mar 5, 2010 at 4:45 PM, jennfish40 <contact@ixda.org> wrote:

Can anyone suggest an alternative to accordions that breaks a workflow into chunks but still allows the user to have multiple sections open at a time?

(
26 Mar 2010 - 5:31pm
Matey Odonkor
2009

Use windowshade component in FLEX
http://dougmccune.com/blog/2008/02/09/windowshade-component-added-to-flexlib/




On Fri, Mar 5, 2010 at 7:08 PM, jennfish40 <contact@ixda.org> wrote:

Can anyone suggest an alternative to accordions that breaks a workflow into chunks but still allows the user to have multiple sections open at a time?

Syndicate content Get the feed