Good way to create an easy to navigate FAQ?

September 28, 2012 3:00 PM

What is a good way to create an FAQ-type document so that it looks good and is easy to navigate on a computer?

I'm trying to rework a 30 page word document listing a bunch of questions and answers so it is easy to navigate on a computer. The less coding required the better!

I've tried creating a list of all the questions at the beginning with a link to the full question and answer later in the document (kind of like this), but I don't like the bouncing back and forth to and from the front of the document you have to do.

I'd like something where either the questions are permanently to the side of the screen and then clicking on one question will show the answer in the main window, but with the questions still showing on the side. Kind of like this library has here. It seems like this is similar to (or the same thing as) an html help file (which I like because it seems like it allows you to put your questions/topics into a hierarchy), but I'm doing this for a client and I don't know how to make these so they don't look like they're from the '90s.

I'm definitely open to any suggestions. Obviously I'm at a bit of a loss. Thanks!

posted by quam6246 to computers & internet (8 answers total)

What you're looking at in your latter example is a 2-frame site layout, which is an antiquated, but effective way of displaying the sort of information that you'd like to display. Tutorials for how to do this are plentiful - just Google it. As far as web layouts go, this is about as simple as it gets.

You can easily mimic the frame layout with a more modern tablet-based layout, which is also quite simple. In fact, finding ready-made table-based layouts is quite easy. Just find one that looks right, then plug and chug.

Alternatively, you might want to look at something like this.

Of course, putting this in a browser might by overkill. Why not just create an indexed PDF? This will let users browse by topics (and even sub-topics) listed on a side bar, while content is displayed in the main pane of their PDF reader.
posted by BrandonW at 3:08 PM on September 28, 2012

If you want to use a paid software app and/or you need to publish it in multiple ways, you could consider the followig ones (but of course I realize this might be overkill):

Help+Manual
HelpScribble
Dr. Explain
posted by Dansaman at 3:11 PM on September 28, 2012

An alternative to a framed display is the use of Tiddlywiki. This site has a FAQ based on that platform.
posted by yclipse at 3:57 PM on September 28, 2012

all the best FAQs I've navigated were similar to your first attempt. Just create a link at the end of every answer that bounces you back up to the top. I like to have the ability to search questions and answers for keywords and those type of FAQs are the best for doing that.
posted by any major dude at 4:06 PM on September 28, 2012

For what it's worth, I really hate TiddlyWiki. I hate the animation (which probably can be shut off somehow). I hate that things don't close. Of course, on the flipside, I also hate FAQs where you click the question, the answer unfolds and then you click another question and the previous answer folds.

Either your first proposal (long list with links back to the top) or something like what BrandonW linked to is my preference.

If you have a lot of different sections, I wonder if it would be worth making sort of sub-FAQs. Have one sort of contents page and then have each section be a separate page.
posted by hoyland at 4:12 PM on September 28, 2012

Take a look at this demo application made with the Dojo Toolkit. If you view the page's source, if you're familiar with HTML it's relatively simple and well-commented as most of the "heavy lifting" is done in the javascript libraries. The folders and content displayed are separated out into this JSON file. You should be able to trim just a few pieces of the application off to get it as you want.
posted by XMLicious at 4:35 PM on September 28, 2012

I'd do this in plain CSS with a sidebar table of contents set to position: fixed. This page has a walkthrough and demo (it also has a demo where the feature is implemented in a more annoying way using Javascript).
posted by adamrice at 4:38 PM on September 28, 2012 [1 favorite]

Have you looked at Sphinx? It's a documentation generator that uses ReStructured Text to create beautiful documentation in a wide variety for formats including HTML.
posted by RonButNotStupid at 6:58 PM on September 28, 2012