How to Create a better FAQ page for end users

Posted in Tutorials4 years ago • Written by 29 Comments

FAQ (Frequently Asked Question) pages have become commonplace on many websites for many reasons. The main, is that they offer a way to provide support, most commonly, customer support, without having to re-iterate solutions to common problems. For larger companies, a good FAQ page can even have an effect on the amount of support staff that are needed to be hired, yet browsing the internet, I continually find FAQ pages to be neglected, and a navigational nightmare. Similarly, Google for some articles on FAQ page design, and you’ll find near to nothing that’s helpful.

While designing a recent project in Photoshop (a software sales theme), I decided the support area was something I wanted to get right, with the focus falling heavily on the FAQ page. I wanted to get a feel for how I wanted it to work, and so I got thinking; What is it that the end-user wants when they arrive. I came up with these thoughts,

  • Ease of reading – the hierarchy of the text needs to be distinct
  • Organization – questions should be split into categories
  • Navigation – finding their way to the information they want should be made easy, and quick

With these three points in mind, I came up with a tidy, and importantly clean FAQ page concept, the demo of which can be found below. I’m going to talk you through how it was made, and teach you how to build it yourself.

Click this link for a demo of the FAQ page we are going to make. You can also download the source code here.

Tutorial Requirements

This tutorial assumes you are fairly comfortable using the following languages

  • Html
  • Css
  • jQuery

Step 1 – Structuring our Html

Our html is split into two main sections. Within our wrapper, we have a primary column, and a sidebar column.

<div id="wrapper">
	<div id="primary></div> <!-- Main content column -->
	<div id="sidebar"></div> <!-- Sidebar Column -->
</div>

The primary content column is where we are going to split our questions into simple categories. Each category will have a title, a list of the questions with links, and then the questions split up using a definition list. The markup we are looking for goes like this. (This shows a category with two columns)

<h3 id="1">Lacus pulvinar
<ul class="section_menu">

	<li><a href="#1_1">Lectus massa adipiscing, mattis. Turpis integer massa.</a></li>

	<li><a href="#1_2">Integer enim montes mauris, arcu est.</a></li>
<!--<span class="hiddenSpellError" pre=""-->ul>
<dl class="faq">
	<dt id="1_1">Lectus massa adipiscing, mattis. Turpis integer massa.</dt>
	<dd>Ultricies in mus, magna rhoncus augue, nec magnis facilisis integer ut pellentesque aliquam sit! Enim odio, porta augue, sed turpis dolor ultrices porttitor arcu massa cum elementum hac in vel, magna magnis, enim scelerisque? Amet aliquam, magna dis porta platea. Cras aliquet. Arcu mid eros aenean parturient cras ac egestas tempor? Lundium parturient dapibus, ridiculus ridiculus dapibus! Quis eros amet.</dd>
	<dt id="1_2">Integer enim montes mauris, arcu est.</dt>
	<dd>Et ridiculus vut dis vel integer pid? Adipiscing nec tristique dictumst tristique duis rhoncus sed, scelerisque. Porta, diam augue vel augue porta enim. Et! Tristique montes. Auctor! Pid tristique purus montes. Quis? Sit, enim. Egestas! Tristique amet mattis adipiscing, proin elit adipiscing integer! Enim, odio. Etiam ac, nunc est purus turpis. Nunc! Pid cras scelerisque mid habitasse. Cum magnis.</dd>
</dl>

It is important that you match up the navigational links for each category of questions with their ID’s. Notice that the first question in this category has an id of “1_1″, and the link the first question has a href of that id. This is important in solving our navigational problems for the user. Similarly, notice that the category title has a numerical id, to show that this is the first category. These id’s need not be numerical, they can be whatever you want, as long as they are unique to the category / question.

Moving onto the sidebar, this is where navigating the bigger picture comes into place. We’ve linked up out category questions, but how to users navigate to the categories themselves? Through the sidebar is how.

Within the sidebar, we are going to include a header, and another navigational menu linking to our categories. You can build upon, this of course, and add whatever you want to your sidebar, possibly a quick contact form, or support contact details.

<div id="sidebar">
	<h3>Select Category</h3>
	<ul class="section_menu">

	<li><a href="#1">Lectus facilisis vel</a></li>

	<li><a href="#2">Vut magna</a></li>

	<li><a href="#3">Lacus pulvinar</a></li>
	</ul>
</div>

Step 2 – Creating our layout and typography with Css

First off, we want our FAQ page to look universal in all browsers, so as always we will apply a css reset. We also want the FAQ page to be easily readable, and look stunning yet simple. For this I’ve used a modified version of the text.css that comes with 960.gs, instead using Myriad Pro, and Helvetica as our fonts. Since this section of css is large, and very basic, you can copy and paste it from here.

Starting off with our basic styles, we are going to create our layout columns, and center our page in the middle of our window.

/** Center our page in the middle of the window **/
div#wrapper{
	width:960px;
	margin: 0 auto;
	position:relative; /** Important later on **/
}

/** Give our primary column a width and float it to the left width a right margin **/
div#primary{
	width:720px;
	margin: 20px 40px 0 0;
	float:left;
	display:inline;
}

/** Position our sidebar to the right of the primary content bar **/
#sidebar {
  	left:760px;
  	position: absolute;
}

You’ll notice that we have absolutely positioned our sidebar rather than float it to the left of our primary content column. This is important for something special we are going to do with our sidebar later on.

Now it’s time to start adding some subtle styling to our page content to bring it up to standard and make viewing it extra eye pleasing. We’ll start off with two basic styles on our h3 and a tags.

/** Give our category headers room to breath **/
h3{
  	padding-top:30px;
}

/** Color our links blue **/
a{
	color:#0986e3;
	text-decoration:none;
}

/** Add a hover effect to links **/
a:hover{
	text-decoration:underline;
}

You’ll have noticed some of the class names I dropped into the html when we created it. These include section_menu and faq. They’re used to style our navigational menus (sidebar included), and our questions themselves.

/** Styling the navigational menus by adding a subtle background, and padding **/
ul.section_menu{
	background:#ededed;
	padding:20px 10px;
}

/** Style our faq questions **/
dl.faq{
	margin-bottom:30px;
}

/** Make the question itself stand out **/
dl.faq dt{
	font-weight:bold;
	color:#000000;
	padding:25px 0 5px 0;
	display:block;
}

/** Add a divisor below the question answer **/
dl.faq dd{
	padding-bottom:25px;
	border-bottom:1px solid #cccccc;
	display:block;
}

Step 4 – Creating a static sidebar with Jquery

Now we are going to start using Jquery to improve the usability of our page. Currently it looks nice, and works well for a page without any javascript, but we can make it so much better! Start by including jquery in the had of your page. We are going to load it directly from google.

<script><!--mce:0--></script>

Secondly we are going to add slightly the html of our sidebar. Add another div wrapping all the content of your sidebar. In our case, I’m going to give it an id of “sidebar_content”.

<div id="sidebar">
	<div id="sidebar_content">
		<!-- Sidebar content in here -->
	</div>
</div>

We also need a bit extra css, and css for our sidebar for when it becomes fixed.

/** Position our sidebar content at the top of our sidebar, and give it the width of the full sidebar **/
#sidebar_content {
  	position: absolute;
  	top: 0;
  	margin-top: 20px;
	width:200px;
}

/** When the sidebar becomes fixed, it'll fix to the top of the page **/
#sidebar_content.fixed {
  position: fixed;
  top: 0;
}

You may not understand the fixed class yet, but the following Jquery will help clear that up for you. Create a script tag in the head of your document, below, the Jquery we are loading from Google, and insert this code.

$(document).ready(function () {
	var sidebar = $('#sidebar_content');
	var top = sidebar.offset().top - parseFloat(sidebar.css('marginTop'));
	$(window).scroll(function (event) {
		var ypos = $(this).scrollTop();
		if (ypos >= top) {
		sidebar.addClass('fixed');
		}
		else {
			sidebar.removeClass('fixed');
		}
	});
});

This may look daunting if you’ve never touched Jquery before, but don’t worry, we’ll step through it line by line. We start off with the Jquery basic of when the document is ready, run this code. The create two variables.

	var sidebar = $('#sidebar_content');
	var top = sidebar.offset().top - parseFloat(sidebar.css('marginTop'));

Our first variable, “sidebar”, assigns the variable sidebar, with the selector pointing to our inner sidebar div. We called it “sidebar_inner”, but you may have called it something different.

Our second variable, top, calculates the distance of the sidebar from the top the top of the page, minus any top margin that we have applied.

$(window).scroll(function (event) {
	var ypos = $(this).scrollTop();
	if (ypos >= top) {
	sidebar.addClass('fixed');
	}
	else {
		sidebar.removeClass('fixed');
	}
});

This snippet of code starts off by saying, if the window is scrolled, carry out this code. I starts again by creating another variable by calculating how far from the top of the page we are, and assigning it to the variable “ypos” (position on the y-axis).

We then enter an if statement, that says: If the distance to scroll to the top is greater than the distance that the sidebar is from the top, give it to class of fixed. If not, don’t give it the class of fixed. This is where the fixed class we created earlier on comes into play. Easy huh? =)

Step 5 – Making a smooth page scrolling effect

So we have a lovely fixed sidebar as we scroll, without the traditional glitchy jumping that used to be commonplace with fixed sidebars, but out internal page linking still jumps directly to the destination, and while this is good, it isn’t very eye pleasing, so we are going to add an animated page scroll. Since the jquery to achieve this is too complex for us to hand write, we are going to use a plugin called localScroll, and another called ScrollTo for our animation. Download them both from here, and include them in the head of your document again, this time between our Google hosted Jquery, and our custom written Jquery.

<script src="jquery.scrollTo-1.4.2-min.js"></script>
<script src="jquery.localscroll-1.2.7-min.js"></script>

The implementation of this is stunningly easy. Simply add to our custom Jquery this one line of code.

$.localScroll();

Note : Make sure you place this line of code within the jquery wrapper,

$(document).ready(function () {
	// Somewhere in here!
});

And there you have it! A fantastically usable, and simply beautiful FAQ page that means the user can easily navigate between categories and questions, without having to spend ages scrolling through search pages, and loading page after page for different categories, or even clicking to open a single question.

Further Discussion

Have some thoughts on the usability of this page? Give them to me, I’d love to hear them. This is as much a proof of concept as it is a tutorial introducing you to basic html, css, Jquery, and plugins, but I’m sure there will be people out there who will feel a perfect FAQ page is something else. If so, what would you do?

20 Written ArticlesWebsite

Matt is an 18 year old web designer from Scotland, UK. He loves creating beautiful websites across different platforms. High on his things to learn fully are Jquery and php. He is extremely excited by css3 and html5 and can't wait to see them rolled out fully. To learn more about Matt, follow him @QwibbleDesigns, or check out his portfolio.

29 Comments Best Comments First
  • Robert

    Friday, July 9th, 2010 12:09

    2

    Good original tutorial. Big thumbs up.

    +2
  • Jared Detroit

    Saturday, July 10th, 2010 07:00

    11

    That’s a really cool FAQ page. Definitely something I need to implement.

    I’ve found FAQ pages to be great for long tail search results.

    0
    • Christopher

      Sunday, November 27th, 2011 07:40

      29

      I just finished my FAQ, it was well worth it. The inspiration came from this site’s posts and comments.

      0
    • Matthew Corner

      Saturday, July 10th, 2010 15:27

      14

      Thanks Jared, glad you liked it.

      0
  • Bill

    Saturday, July 10th, 2010 04:09

    12

    Include them in the head of your document again, this time between our Google hosted Jquery, and our custom written Jquery.good

    0
  • Abhishek Bhardwaj

    Friday, July 9th, 2010 12:09

    1

    Nice tutorial :)

    0
  • Matthew Corner

    Friday, July 9th, 2010 22:42

    9

    It’s nice but it goes back to the fact I’m having to do all the work to find the right question. I have to work out which category page to load, and then scroll through endless questions =)

    This tutorial hopes to solve some of these problems. I know you have far far more FAQ pages, but even having an index of questions at the head of each category page linking to each question allows you to half the work your user is doing.

    0
    • Joe Stevens

      Thursday, July 15th, 2010 17:13

      17

      Thanks for the advice.
      I have a table of contents button there that if you click it it shows all of the questions in that section then if you click the question it scrolls to the answer.
      I guess I have to make that button more obvious though if you didn’t notice it.

      0
  • Sabine

    Friday, July 9th, 2010 12:15

    3

    Awsome Tutorial Matthew.
    Yust what I’m looking for.
    Thanks!
    Sabine

    0
  • Warren Parsons

    Friday, July 9th, 2010 18:31

    4

    You should be aware that HTML ID attributes must begin with a letter. Your IDs which consist solely of numbers are invalid.

    0
    • Matthew Corner

      Friday, July 9th, 2010 22:43

      10

      Ahh, thanks for pointing that. I did know this, it just didn’t click while I was writing or coding this article.

      The main thing though is that they work for the scrolling, you just wouldn’t be able to apply any question specific css unless you changed the id’s to start with a letter.

      0
  • Richard

    Friday, July 9th, 2010 21:10

    5

    For these kind of tutorials a demo is a must:)

    No working one?

    0
  • Fano

    Friday, July 9th, 2010 22:42

    7

    Question for ya: Why does the smooth scroll effect not work without the #sidebar ?
    Much appreciated!

    Fano

    0
    • Matthew Corner

      Saturday, July 10th, 2010 15:26

      13

      Smooth scroll works for me when I remove the sidebar.

      0
      • Rob

        Friday, May 13th, 2011 19:04

        25

        Doesn’t work for me as well, I downloaded the demo and removed the #sidebar, the smooth scrolling effect disappears. Please help, much appreciated.

        0
  • Rich Ashby

    Friday, July 9th, 2010 16:32

    6

    Great tutorial. Really smooth scrolling and clean design. Nice one!

    0
  • andy

    Monday, July 12th, 2010 11:44

    15

    Missing a back to top link.
    The page, dependent on content, could be huge, the user would benefit from this simple piece of functionality.

    Other than than … all good.
    Nice resource.

    0
  • Jorge

    Thursday, July 15th, 2010 04:03

    16

    This snippet of code starts off by saying, if the window is scrolled, carry out this code. I starts again by creating another variable by calculating how far from the top of the page we are, and assigning it to the variable “ypos”

    0
  • kabin

    Tuesday, September 13th, 2011 08:38

    26

    Google for some articles on FAQ page design, and you’ll find near to nothing that’s helpful.

    0
  • Christopher

    Saturday, September 17th, 2011 19:49

    27

    Very useful, thank you. I was getting part of it right, but clearly not enough. This helps. Thank you,

    Christopher

    0
  • Matthew

    Thursday, October 27th, 2011 20:37

    28

    Does anybody really design web pages like this anymore? Get rid of all of the up and down scrolling mumbo jumbo – it’s completely unnecessary just to read a simple sentence.

    0
  • Kiley

    Friday, May 6th, 2011 22:05

    24

    I am experiencing the same thing, it doesn’t work when I do not have a sidebar. I’m not sure why. Can someone help?

    0
  • Kate

    Tuesday, April 19th, 2011 21:50

    23

    Thanks so much! It took a few tries to get the css working with my template, but it looks lovely. Now I’m irritating everyone with “Look, it scrolls! Click it, click it!” Oh well, they already thought I was weird. Thanks again!

    0
  • John

    Friday, July 23rd, 2010 16:54

    18

    For some of my questions there are a “sub-terms” which made the bottom border difficult. Instead, I added a top border to adjacent dt’s:

    dd + dt{
    margin-top:25px;
    border-top:1px solid #cccccc;
    display:block;
    }

    0
  • Bernard-Charles

    Saturday, July 24th, 2010 20:16

    19

    Wow, this information helped out a lot! This reminds us to pay attention to all aspects of our blogs and websites.

    0
  • Jack

    Thursday, September 23rd, 2010 22:43

    20

    Very nice piece of code Matt. I really appreciate you explaining it to an jquery newbie. Best FAQ implementation I’ve seen so far.

    My only suggestion is to have some type of “back to top of category” functionality”

    Much appreciated!

    0
  • Navas

    Tuesday, February 1st, 2011 06:58

    22

    Nice work Matthew Corner. Really usable.

    0
  • Takahiro Hideaki

    Monday, November 15th, 2010 22:30

    21

    Nice Faqs, i need on of those for my own faqs page on my web site. Thx

    0
  • Matthew

    Thursday, October 27th, 2011 20:37

    28

    Does anybody really design web pages like this anymore? Get rid of all of the up and down scrolling mumbo jumbo – it’s completely unnecessary just to read a simple sentence.

    0
  • Christopher

    Saturday, September 17th, 2011 19:49

    27

    Very useful, thank you. I was getting part of it right, but clearly not enough. This helps. Thank you,

    Christopher

    0
  • kabin

    Tuesday, September 13th, 2011 08:38

    26

    Google for some articles on FAQ page design, and you’ll find near to nothing that’s helpful.

    0
  • Kiley

    Friday, May 6th, 2011 22:05

    24

    I am experiencing the same thing, it doesn’t work when I do not have a sidebar. I’m not sure why. Can someone help?

    0
  • Kate

    Tuesday, April 19th, 2011 21:50

    23

    Thanks so much! It took a few tries to get the css working with my template, but it looks lovely. Now I’m irritating everyone with “Look, it scrolls! Click it, click it!” Oh well, they already thought I was weird. Thanks again!

    0
  • Navas

    Tuesday, February 1st, 2011 06:58

    22

    Nice work Matthew Corner. Really usable.

    0
  • Takahiro Hideaki

    Monday, November 15th, 2010 22:30

    21

    Nice Faqs, i need on of those for my own faqs page on my web site. Thx

    0
  • Jack

    Thursday, September 23rd, 2010 22:43

    20

    Very nice piece of code Matt. I really appreciate you explaining it to an jquery newbie. Best FAQ implementation I’ve seen so far.

    My only suggestion is to have some type of “back to top of category” functionality”

    Much appreciated!

    0
  • Bernard-Charles

    Saturday, July 24th, 2010 20:16

    19

    Wow, this information helped out a lot! This reminds us to pay attention to all aspects of our blogs and websites.

    0
  • John

    Friday, July 23rd, 2010 16:54

    18

    For some of my questions there are a “sub-terms” which made the bottom border difficult. Instead, I added a top border to adjacent dt’s:

    dd + dt{
    margin-top:25px;
    border-top:1px solid #cccccc;
    display:block;
    }

    0
  • Jorge

    Thursday, July 15th, 2010 04:03

    16

    This snippet of code starts off by saying, if the window is scrolled, carry out this code. I starts again by creating another variable by calculating how far from the top of the page we are, and assigning it to the variable “ypos”

    0
  • andy

    Monday, July 12th, 2010 11:44

    15

    Missing a back to top link.
    The page, dependent on content, could be huge, the user would benefit from this simple piece of functionality.

    Other than than … all good.
    Nice resource.

    0
  • Bill

    Saturday, July 10th, 2010 04:09

    12

    Include them in the head of your document again, this time between our Google hosted Jquery, and our custom written Jquery.good

    0
  • Jared Detroit

    Saturday, July 10th, 2010 07:00

    11

    That’s a really cool FAQ page. Definitely something I need to implement.

    I’ve found FAQ pages to be great for long tail search results.

    0
    • Matthew Corner

      Saturday, July 10th, 2010 15:27

      14

      Thanks Jared, glad you liked it.

      0
    • Christopher

      Sunday, November 27th, 2011 07:40

      29

      I just finished my FAQ, it was well worth it. The inspiration came from this site’s posts and comments.

      0
  • Matthew Corner

    Friday, July 9th, 2010 22:42

    9

    It’s nice but it goes back to the fact I’m having to do all the work to find the right question. I have to work out which category page to load, and then scroll through endless questions =)

    This tutorial hopes to solve some of these problems. I know you have far far more FAQ pages, but even having an index of questions at the head of each category page linking to each question allows you to half the work your user is doing.

    0
    • Joe Stevens

      Thursday, July 15th, 2010 17:13

      17

      Thanks for the advice.
      I have a table of contents button there that if you click it it shows all of the questions in that section then if you click the question it scrolls to the answer.
      I guess I have to make that button more obvious though if you didn’t notice it.

      0
  • Fano

    Friday, July 9th, 2010 22:42

    7

    Question for ya: Why does the smooth scroll effect not work without the #sidebar ?
    Much appreciated!

    Fano

    0
    • Matthew Corner

      Saturday, July 10th, 2010 15:26

      13

      Smooth scroll works for me when I remove the sidebar.

      0
      • Rob

        Friday, May 13th, 2011 19:04

        25

        Doesn’t work for me as well, I downloaded the demo and removed the #sidebar, the smooth scrolling effect disappears. Please help, much appreciated.

        0
  • Rich Ashby

    Friday, July 9th, 2010 16:32

    6

    Great tutorial. Really smooth scrolling and clean design. Nice one!

    0
  • Richard

    Friday, July 9th, 2010 21:10

    5

    For these kind of tutorials a demo is a must:)

    No working one?

    0
  • Warren Parsons

    Friday, July 9th, 2010 18:31

    4

    You should be aware that HTML ID attributes must begin with a letter. Your IDs which consist solely of numbers are invalid.

    0
    • Matthew Corner

      Friday, July 9th, 2010 22:43

      10

      Ahh, thanks for pointing that. I did know this, it just didn’t click while I was writing or coding this article.

      The main thing though is that they work for the scrolling, you just wouldn’t be able to apply any question specific css unless you changed the id’s to start with a letter.

      0
  • Sabine

    Friday, July 9th, 2010 12:15

    3

    Awsome Tutorial Matthew.
    Yust what I’m looking for.
    Thanks!
    Sabine

    0
  • Robert

    Friday, July 9th, 2010 12:09

    2

    Good original tutorial. Big thumbs up.

    +2
  • Abhishek Bhardwaj

    Friday, July 9th, 2010 12:09

    1

    Nice tutorial :)

    0

Comments are closed.

54.80.42.23 - unknown - unknown - US