FAQ Pages: Best Practices and Examples

FAQ pages are a vital part of many websites. While not every site needs one, if you’re selling something, providing a service, or giving information about a complex subject, an FAQ can make life much easier for your visitors.

The format of an FAQ varies considerably from site to site, so there’s not really one “right” design method. But there are some key things to remember, and to keep it simple, just remember F.A.Q.: Focus on information, Assist visitors through interaction, and Question the status quo. Read on for an explanation of each and ideas for how to implement them. We’ve also covered three examples of FAQ pages for reference.

Focus on Information

We all know content is king. But when it comes to FAQ pages, the information you’re presenting really is the absolute most important thing. You have to make sure the content you’re presenting is done so in the most efficient and effective way possible.

Information Comes First

The entire point of an FAQ page is to provide information to your visitors. When you’re designing these pages, make sure you put the information first. In other words, don’t let your design decisions overshadow the content.

Avoid flashy designs, gimmicky layouts, and other design elements that detract from your page’s content. Stick with an easy-to-read typeface, appropriate contrast, and a fairly simple layout.

Organizing Longer FAQs

Think about how best to organize your FAQ page. The longer your FAQ page is, the more care you need to take to make sure visitors can find the answers they’re looking for.

Categories are the best way to organize a longer FAQ. Of course, how you define your categories is entirely up to you, and should be dependent on the specific site. The goal of categories is to make it easier for your visitors to find the information they’re looking for, so make sure the categories are logical and don’t have too many questions within them. But you also don’t want to have more categories than are necessary.

Remember, anything you do with regards to organization in your FAQ should be done with your end-user in mind. You want to make it easier for your visitors to find what they’re looking for. By making the information easier to find, you increase the likelihood that they’ll do business with you.

Make It Easy to Find

What’s the point of having a Frequently Asked Questions section if your visitors can’t find it? The answer: there isn’t one. Your FAQ page has to be easy for your visitors to find, or you might as well not even include one.

There are a few logical places to put your FAQ. The first logical location is in your main navigation. Some sites use a FAQ link rather than a “help” or “about” link, depending on the nature of their site.

The next logical place to put it is as a subsection of your help or about pages. If someone has a question about your site or your company, the help or about sections are the first places they’re likely to look.

Assist Visitors through Interaction

The way your users interact with your FAQs is of vital importance. Think through the way your visitors will actually use the information you present, and make it as easy as possible for them.

Clickable Questions

If you have more than eight or ten questions in your FAQ, or if the answers to those questions are more than a paragraph each, it’s a good idea to list your questions without showing the answers directly under them, to make the content more scannable.

There are two ways to go about making clickable questions. The first is to list your questions at the top, and place your answers separately at the end, with anchor links to connect the questions to their corresponding answers. This is a great method to use if you don’t want to deal with JavaScript.

The other method is to use JavaScript to hide the answers. With this method, when a visitor clicks on a question, the answer will appear immediately below that question. Some designers animate this (with an accordion or slider effect), while others just have the answer appear, making the other questions jump down.

Make It Easy to Ask a New Question

If someone can’t find the answer to their question within your FAQ, it’s likely they’ll want to ask you directly. Make sure you include a question form or a contact form that’s easily accessible from your FAQ page.

Question the Status Quo

While FAQ pages need to maintain focus on providing information to visitors, there’s no reason you can’t get creative in the way your FAQ pages look and act. There are a number of different ways you can make your FAQ page stand out from the crowd, and it’s an area many designers overlook and don’t dedicate much time to.

Here are some ideas for unique FAQ interfaces. While I can’t guarantee they haven’t been used before, I’m sure I haven’t seen them used on any FAQ pages. Yet.

Modal Windows

Modal windows are used for all sorts of things, so why not FAQ pages? Modal windows, if designed and implemented well, can add an extra layer of refinement to a site, and really set it apart from its competition. Some specific ideas for implementing modal windows:

• When a visitor clicks on a category, have the questions and answers for that category appear in a modal window.
• If you don’t have a huge number of questions, consider having their answers open in modal windows. This can be particularly useful if you want to keep the question page in line with your overall (text-unfriendly) site design, but want the answers to be easier to read.
• Another idea is to use modal windows to integrate your FAQ with the rest of your site. Link to FAQ topics within your other pages and have them appear in modal windows directly on the page. This makes it easier to find information on the particular topics without having to leave the page a visitor is on.

Column View

Probably not the best name for this layout, but the name does fit. Basically, with this design, you’d have all your questions in one column, and when someone clicks on a question, the answer would appear in an adjacent column. You could make the columns scroll independently of each other or together. This is a pretty basic modification, but would work really well integrated with a minimalist site design.

Horizontal Scroll

I have yet to see a website that makes use of horizontal scroll within their FAQ page. With widescreen monitors becoming more and more common, horizontal scroll is only going to get more popular. Why not try it out on a FAQ page?

Tabbed FAQ

If you don’t have too many categories, why not used a tabbed interface for your FAQ? This would be particularly useful if you use AJAX tabs to make transitions between categories seamless.

Tag Clouds

If you have a very large FAQ, consider organizing with a tag cloud rather than standard categories. People are becoming more and more familiar with tag clouds, and they provide a great way to find information while remaining a bit less formal than regular categories.

Summary

FAQ pages can be one of the most useful parts of any website, but without proper thought put into the user interface, they can also be a black hole of information. Make sure you think about how your visitors will actually use your FAQs, and make sure you consider their needs throughout the design process. And don’t forget to test your FAQ page along with the rest of your site’s interface!

Further Resources

• The Perfect FAQ Page!
  A post from Thierry Koblentz that digs into the coding aspects of designing a great FAQ page.
• How to Write an Effective FAQ Page
  A post from Web Hosting Geeks that focuses on the content a FAQ page should include.
• Designing Your FAQ Page to Presale
  A post from The Dabbling Mum that talks about the information architecture of FAQ pages.
• Common Pages – FAQ Design
  A very short page from the COI Usability Toolkit that provides some very valuable information on making more usable FAQ pages.