Pretty FAQs

There are many ways to create an FAQ page, some more useful and usable than others. Here I’ll talk a few that I see often, and make a suggestion on a better way to handle FAQs.

#1 – The simple list.

This goes something like this.

Question 1
Answer 1 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Question 2
Answer 2 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Question 3
Answer 3 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

This is okay… it’s certainly easy to read. With the bold headlines it’s easy to scan.This is a popular solution, but if you have a large number of question/answer pairs it can become quite a long page to scan.

#2 – Link list to answers.

This goes like this (note the links don’t work, this is too short to illustrate that functionality):

Question 1
Question 2
Question 3

Answer 1 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Answer 2 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Answer 3 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Again, this can become very long. It also forces the user to bounce back and forth between the list at the top and the questions below – you’d want to insert ‘back to top’ links strategically in the answer list. And you’ll need to create the links from the questions and the link anchors for each answer, it can be a lot of work for a big FAQ page.

#3 – Accordion.

This is the solution I use most often. It gives extra interactivity and feedback for the user, and works well for a long FAQ list because the questions and answers are presented in a very compact format. There’s no bouncing up and down the page as in example #2. Here’s a live example to try out and a screenshot of how it looks:

There are a number of good plugins in the WordPress plugin repository that will help you easily create an accordion like this; some may need some CSS styling and others will have more customizations built in. Here are a few that I and my clients have used:

• Accordion Shortcodes
• Accordion or FAQ
• Accordion
• Collapse-o-matic

So if you’re using a text-based FAQ or need to make a new FAQ in your site, consider checking out one of the more interactive accordion plugins to give visual interest to your question-and-answer list.