Comments on: Thoughts on Accordion Usability

By: Taldir

Taldir — Wed, 23 Apr 2008 13:00:00 +0000

Hi,

Nice example ! Thanks a lot for sharing it.
I used this wizard example to build an application.

It’s working very well but I am blocked…
With the Accordion, I can use the IndexChangedEvent when the selected element changes. But, how to use such event when the user switch form pages in the Wizard ?

I hope you understood my question… My English is not so good.

Thanks a lot !

By: Phil Plante

Phil Plante — Fri, 01 Feb 2008 00:36:43 +0000

Accordions are very useful to simplify long forms. I think of them as collapsed sections of a written document with the folds representing the familiar model of a vertical outline. Users recognize them. Most of the issues can be managed with features like “show all” or mouseover effects to indicate the hidden content. My concern with your proposed alternative is that you have implied a linear left-to-right workflow. I dont’ think users respond to tabs that way. Also, you provide no way to show everything at once. If it were a multi-part form, how would you avoid hiding data entry errors unless there was a separate save for each tab?

By: Dorai Thodla

Dorai Thodla — Thu, 30 Aug 2007 11:07:46 +0000

I agree with you about the chance to misuse. But I found the pattern very usable in certain situation where the alternatives require you to scroll through the web page vertically.

For example, I find the use of this pattern in Google Reader has improved my reading experience. Now I just glance at the blog titles and decide which ones to explore.

By: sho

sho — Wed, 29 Aug 2007 13:18:59 +0000

thanks a lot… very helpful… i didnt see any contact email on ur website for futher correspondence

By: Kevin Hoyt

Kevin Hoyt — Tue, 28 Aug 2007 15:07:07 +0000

Sho,

A link to the source code is included in the post. At a high level, each screen is placed side by side in an HBox, and then clipped by being placed inside a Canvas without scroll bars turned on. The movement is accomplished using the Move effect, with a BlurFilter being added just before the move, and removed just after the move. The filter has a high value for the horizontal blur, and a small value for the vertical blur, which gives the overall effect of movement.

Hope this helps,
Kevin

By: sho

sho — Mon, 27 Aug 2007 18:55:45 +0000

kevin, very informative article.. sorry to digress, i love the transition effect on that last appliation.. i was wondering if i could get any tips (or code) on how to do something like that.. thanks

By: Sho

Sho — Mon, 27 Aug 2007 18:51:39 +0000

very nice article… sorry to digress.. i love the transition effect on that last application.. i was wondering if i could get any tips on how to do somethin like that… thanks

By: Jre

Jre — Tue, 24 Jul 2007 20:20:40 +0000

I agree that a lot of developers have a tendency to abuse the accordion component as it is a really easy way to cram a bunch of fields into a small area. I think that an accordion relates to checkboxes in the way that both accordions and checkboxes are useful in small quantities. It would be crazy to use 50 checkboxes when you could use a multi selection list instead. Same thing goes for accordions, if you use it properly it can be very efficient.

By: Elias

Elias — Mon, 26 Feb 2007 06:21:26 +0000

Hi
this is a great article and i completely agree with you, but i’m thinking on doing another kind of navigation, a windows control panel like, i mean i want to put several icons on one panel and as the user clicks on one icon it passes to another level or to the form they want.

I haven’t seen this kind of navigation made in flex yet and i’d like some ideas on how to do this if you can spare some time thinking about it i’d appreciate.

By: Lokesh Dhakar

Lokesh Dhakar — Mon, 19 Feb 2007 20:07:55 +0000

Hi Kevin,

The problem, as you stated, with the 1040 form placed inside an accordion is the amount of real estate the chrome takes up. An alternative approach, if you have some horizontal real estate to spare, is to place the navigation on the left side as a set of links in a vertical list. The user works their way from top to bottom. This is similar to your last example, switching the thumbnails for text links and ditching the menubar. Theirs not much pizzaz in this solution, but it works.

Another note about the accordion; I’ve seen users bypass accordions sections because they didn’t notice the inactive sections plopped way at the bottom of the screen. Users tend to keep their eyes above the middle of the screen unless something leads them downwards.