In this video, get an overview of the accordion fold design pattern. Learn why it is used, where it is used, and discover its strengths and weaknesses.
- [Instructor] In this installment of the Applied Interaction Design series, we take a look at the accordion fold design pattern. This pattern is one of the more ubiquitous in the biz and can be found on all devices ranging from smartphones to websites. Its popularity is primarily due to its use for progressive disclosure, which means bringing important details into focus and even more detail with a tap or click. Another reason is real estate on a screen is at a premium. And an accordion fold can pack a ton of info into a rather small space. When opened, another benefit becomes evident. The design stays focused on the screen, displaying critical information while everything else is easily a click or a tap away. If we dissect an accordion fold, a few items are always there. There's always a title. There is an expanded and a collapsed state. There is an icon showing expansion or collapse. And there's always a way to close the menu. From there, how the items look, move, and interact with each other and the user are up to you. For the look, are they cards or strips? When opened, do the items push the other items down? Do the items move up or down or from the right or the left when the fold is opened? If icons are used, are they intuitive? By leaving all of these decisions up to you this is where issues can arise. Make a mistake with any one of these and the user is going to be confused. Thus it is important to plan the design pattern before you start. And I urge you to resist the urge to go for cool. There is a place for cool but never for an instant forget there is a very fine balance between cool and information access. If the user can't access the information, he or she is going to have a really bad experience.