Jun 24 2010

FAQ Pages: Best Practices and Examples

Advertisement

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.

The Lulu website offers a straight-forward, content-focused design for their FAQ pages.

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.

Amazon New Seller FAQ

While Amazon’s dual sidebars make the page feel a little cluttered, they still focus on the content within the center column.

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.

Lulu FAQ sidebar

Lulu organizes their FAQ by category and subcategory in the sidebar, making each FAQ category accessible from every other category.

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.

Creative Commons Full FAQ

The full FAQ for Creative Commons uses a table of contents to outline and link to all the questions and answers in their FAQ. It’s a bit long, but still a reasonable way to organize this type of FAQ page.

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.

Creative Commons Abbreviated FAQ

Creative Commons includes a link in their top navigation directly to their abbreviated FAQ, and from there a link to the full FAQ is available.

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.

Amazon Help

Amazon links their most popular FAQ topics from their main help page.

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.

Lulu FAQ Clickable Questions

Lulu lists questions at the top of each of their category pages, linked to the relevant answer below.

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 accordian 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.

Amazon New Seller FAQ Support

Amazon places their support contact methods prominently on their FAQ pages.

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.

Apple Store Modal Window

Apple uses modal windows for explanations on certain things within their store. The same could easily be used to display FAQ information on topics.

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

About the Author

Cameron Chapman is a professional Web and graphic designer with many years of experience. She writes for a number of blogs, including her own, Cameron Chapman On Writing. She’s also the author of Internet Famous: A Practical Guide to Becoming an Online Celebrity.

Comments and Discussions
  • ilz, 24 June 2010

    Nice idea for an article. I agree with the importance of creating a nicely designed FAQ page. After all, the whole purpose is to help the user get info, so it better be user friendly!

  • Jordan Walker, 24 June 2010

    Thanks for the tips and tricks to created in faq page.

  • Max Stanworth, 24 June 2010

    This is good reading, i will have to design an FAQ page for one of my projects so ive boomarked it :)

  • James, 24 June 2010

    Don’t forget that a properly layed out website with good content shouldn’t even require a FAQs page. FAQs should be a page of questions that people genuinely ask. The answers to those questions should also be included elsewhere in the site. The FAQs go alongside good content, not as your main content.

  • Dee, 24 June 2010

    A very good article. Keeping it simple is key to a FAQ section, it’s common sense that people want help so make it easy to get help. Strange, however, that many sites get this wrong and leave me frustrated and going round in circles.

    I’m updating my FAQ’s and will keep this page in mind.

  • cancel bubble, 24 June 2010

    FAQs tend to be frequently asked questions we wish people would ask.

  • Simon, 24 June 2010

    How about “dynamic FAQ”, like on IzzyHelp (click blue bar on right-bottom corner)

  • Danica, 24 June 2010

    Interesting Read..”Clickable Questions” Thats what am using on my site..

  • Jae Xavier, 24 June 2010

    nice roundup of common sense tips. thanks ^^

  • Bogdan, 24 June 2010

    I think it’s quite easy to adhere to best practices: keep it simple! :)

  • DSM Design, 25 June 2010

    Very thorough and informative post, loved it. Keeping it simple is generally the best policy!!

  • villeboy, 28 June 2010

    Nice article. Funny thing is that Lulu.com has changed their outlook after article – for worse. The new FAQ of Lulu seems rather messy.

  • alina, 28 June 2010

    Nice tips and tricks hope it will work best…
    best creative ads

  • craig sullivan, 04 July 2010

    Well,

    Any article on FAQs should start with not using the word FAQ! Lots of people just don’t understand this acronym. Also, there should be a focus on what content is in there (usually it is a dumping ground that grows over time like a big trash heap) and how people can rate, comment and otherwise interact and give you feedback on the quality of the content. Most FAQs suck, are not customer focused and are badly written.

  • Derek Li, 03 August 2010

    Quite interesting blog post. I randomly happened to find this site while I was in the process of work using the internet. I felt the urge to tell you I liked this site and to keep on doing what you’re doin. And keep in mind… enjoy the journey… don’t focus too much on the end result.

  • Sunny, 09 August 2010

    Hey guys!
    Does anybody of you know a Website where they use the “tabbed FAQ” style? Just wanna know how it looks like.
    Thx

  • Navi, 03 November 2010

    Thanks for the post; these ideas (and resources) are very helpful for brainstorming our own FAQ page.

    …I look forward to a similar post on “help” sections :-)

  • Bigboy, 11 November 2010

    good post, added you to my RSS reader. Greetings from DC

  • Jamal Nichols, 11 November 2010

    I love how the further resources you linked to were a page for coding, a page for writing, a page for information architecture and a page for usability of FAQ pages. Very thoughtful.

  • Burton Haynes, 27 November 2010

    This is getting a bit more subjective, but I much prefer the Zune Marketplace. The interface is colorful, has more flair, and some cool features like ‘Mixview’ that let you quickly see related albums, songs, or other users related to what you’re listening to. Clicking on one of those will center on that item, and another set of “neighbors” will come into view, allowing you to navigate around exploring by similar artists, songs, or users. Speaking of users, the Zune “Social” is also great fun, letting you find others with shared tastes and becoming friends with them. You then can listen to a playlist created based on an amalgamation of what all your friends are listening to, which is also enjoyable. Those concerned with privacy will be relieved to know you can prevent the public from seeing your personal listening habits if you so choose.

  • Megha, 13 December 2010

    It is needless to say that FAQ page is one of the most important parts of any website. So, it needs to be arranged with care. Anyway thanks for this informative post. The tips you have shared here are indeed useful.

  • car news blog, 18 February 2011

    Car is new model of our life, i love car modification

  • Thank you for unshared
    But I must put more pictures.
    Affects people to pretty pictures.
    I really liked your site. Good luck.

  • Chris, 17 September 2011

    This is very useful. I like that it gives so many options, and not just one or two. I do not need to search anymore, thank you. Now it is time to create the page.

  • Masood, 01 October 2012

    Nice article…Thax for the article..

  • Tina, 08 December 2012

    This is an AWESOME web design!

  • Peach, 15 February 2013

    Nice one!!

  • Neuk, 06 November 2013

    I have compiled a list of questions that our customers always ask and is just about to start designing the page. Great tips you have here.

    Thanks!

search form
 
image description image description