Compacting information on a webpage can help give a visitor quick overview of all the content on the page.  It can also be a cool little effect when you click on a bar and it expands with text further elaborating on such topics.

One place I’ve seen this accordion effect more frequently is on Frequently Asked Questions (FAQs). There’s a question, and then a larger answer. Having all the questions grouped together allows the visitor to skim over each until they find the appropriate question and its answer.  When you find the question you’re looking for, clicking on it displays the answer.

It’s all good until you want to read more than one answer on the page. You have to click on each question. This can sometimes cause a side effect of closing any previously opened answers. This prevents seeing two (possibly related) answers at the same time. What benefit is there when you’re hiding everything I’ve selectively chosen to read. If I really don’t want to see the answer, I’ll click on the bar and have the answer disappear.

The accordion looks to be the next generation of the FAQ, the first being a little repetitive. Old FAQ formats had an index of questions, each being a (anchor) link. Clicking on a question would take you down the page to the question accompanied with an answer. I actually prefer this, as all the questions and answers are on page, one after another, always displayed.  Even if it’s repeats the question twice.  It provides both formats (short list of questions and the long expanded version) depending on what you’re looking for.

There are two uses of an FAQ. One is to find a single question, which the compact mode is good at. The other is to explore the common questions and answers to gain more insight on what the service or product is all about.  A simple solution is to add an expand all button if you do choose to go with the accordion style FAQ that will serve both worlds.