Thoughts on Accordion Usability
It’s no big secret that I’m not a particularly big fan of the accordion control. In almost every case I encounter, the use for the accordion is to provide an alternative view to stepping through complex forms. While it can certainly be made to accommodate this use-case, it has to be one of the most abused applications of the container. What’s worse is that I fear we’ll see a lot more of it in the not too distant future.
Let’s take a common complex form that many of us here in the United States are very familiar with as an example - the Internal Revenue Service (IRS) Form 1040. The basic 1040 as pulled from the IRS web site has no fewer than thirteen different sections (nine on the conservative side). Let’s stop and think about this then for a second as it relates to the accordion. What does the accordion look like with thirteen sections in it?
I’ve only had to complete the few sections here to get the point across. The first section fills in nicely. The second section leaves copious amounts of extra space lying around. My favorite however is the fourth section, in which I’ve run out of room and stopped after only nine fields. The actual Form 1040 goes on for another nine fields - the “Tax and Income” section is the longest with 23 fields. The “one size fits all” approach of the accordion creates this white space feast or famine situation.
On the positive side, the accordion does fundamentally provide contextual information to the user. We always know where we are and how much we’ve got left to go. Is that really the best way to display the content? Should we just shove our forms into Flex and everything else will just magically improve? What are some of the alternative displays we might choose for this type of complex form?
When I find myself struggling for how to implement something in Flex, I ask myself “How is it accomplished in the day-to-day applications I encounter on the desktop?” To be fair, this question in its own right is somewhat flawed because what we really want is something rich and engaging. We like to think of this as desktop applications in the context of RIA, but it’s really just falling back on an earlier metaphor. But I digress…
Just how is a complex form displayed in a desktop application? It may seem elusive at first, but we see them every time we install a new application - wizards. The parts that are broken about complex forms on the web aren’t “Next” and “Previous” but rather the waits and refreshes that accompany the approach. With RIA however we can offer instantaneous feedback. Let’s apply the “wizard” metaphor to a complex form, and throw in a splash of Flash for emphasis.
From a usability perspective this is better and worse. While the forms aren’t crowded by the container itself any longer, we’ve lost most of our context. Where are we in the form? A little extra UI chrome can bring this out to the user - something for which we now have space. Perhaps a menu bar (ButtonBar in Flex) across the top of the form? Maybe thumbnails of the various form sections? In fact, you now have enough space to take it forwards to RIA and include context-sensitive video help.
For the record here, I didn’t come up with the blur effect on forms. This is actually how a form in one of our demos is transitioned (thanks to Adobe’s Experience Design team). The effect has been very popular in customer demonstrations, and I’ve had many people ask me how it is accomplished. I’ve even had one colleague suggest that I build a framework for the behavior. Suffice to say it isn’t that complex, and I’ve attached the source (video files) if you’d like to see for yourself.
I didn’t come up with the page thumbnails either - you can see that in Adobe Acrobat Reader. Once again I go to the desktop for inspiration. What I did come up with however is a way to generate the thumbnails at runtime based on the forms. What? Yup, whenever navigation occurs from one form to another, the thumbnail gets updated dynamically at runtime. Credit here goes to the bitmap features in the Flash Player. The source (video files) for that is also included in the example.