Noupe

---

FAQ Pages: Best Practices and Examples Posted: 24 Jun 2010 03:28 AM PDT By Cameron Chapman 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 consdirably 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. 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 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. 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 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 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 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 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 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 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.

You are subscribed to email updates from Noupe To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610