Accordions are gaining popularity in the design of a web user interface. This blog of ours throws light on accordions, their usage, and the best practises which you can look at adopting while using accordions.
Accordions are
Accordions can be loosely envisaged and used as content management tools. An accordion menu enables dynamic switching whenever the content becomes too much or too heavy to handle. The need for an accordion menu arises when you want the web user interface to provide a great user experience. So in cases, like say an FAQ page, where the answers are long and hence you have to hide content to enable easy viewing and scrolling, an accordion menu becomes appropriate. Multiple panes to ease viewing pains, which is what accordions are!
Accordions are found in
Common accordions are found in websites where there is a sliding menu effect or when drop down menus are found with the hovering effect in place. This helps in enhancing the user experience, while at the same time ensuring that all the content is viewed.
Accordions are found in content which is placed on tabbed widgets. Such menus leverage tabs to handle the content which flows, instead of using the conventional vertical lists. Java Script has made this process super easy. Such accordions can also be rendered using CSS3. Additionally in CSS3, you can eschew with much of coding.
The different types of accordions are
- 3d accordions: Usually rendered using CSS3, they help in creating 3d effects, replete with rotation
- Material Lists: For adding lists and ease the viewing of every header. This accordion is of great use whenever lists are used, and it enhances usability.
- Animated accordion: used to showcase various animations. To know further see: CSS Based Animated Accordian
- Dark UI accordion: Used in places where the web interface needs a contrast or highlighting of menu options is needed
- Full Width Content: When highlighting the essence of minimalism or web user interface is enriched with a full width content placement
- Multi level accordion: To emphasis on different options
- Color accordion: To use color coding for emphasis
Best practises for using accordions
- Limit the number of accordions on a page to 5-6. Anything more means your page is too wordy!
- Keep the content within every accordion to a minimal length. Your reader should read, find it easy to read, and understand whatever they have read. Longer reads means scrolling, exhausting as the user has to read more, and hence not a great user experience.
- Do not put call to actions in some accordion in a page. Not all accordions in a page are read. So tread here with caution.
- Do not get caught in minimalism! Do not use just 1 accordion per page. Strike a balance with the number of accordions used.
As can be seen accordions come in multifarious forms, and when used properly can rally boost up the user interface. Use with caution and reap benefits!
Disclaimer: All graphics/images are copyright to their respective owner unless stated otherwise. If you are the owner or you want to remove any of the graphic/image from this page please contact us HERE.
