View Full Version : Clean and simple navigation

11-01-2010, 11:01 PM
I hope the emoticon is a light bulb.

I'm slowly developing a web site in which each page is a multiple-choice box that guides people through a decision tree.

I've made the pages absolutely simple so that the only differences between them are in the multiple-choice boxes.

My question is: What kind of navigation bar will work best with this design? The main thing is that, visually, it needs to be super clean, uncluttered, and super simple. Not to mention that I'll be adding this navigation bar to pages that are already posted. :roll:

Here's the first page of the tree:


I would love some input on this.

11-02-2010, 10:24 AM
Well, the simplest navigation is just a list of links styled with CSS; http://www.corrosiveonline.co.uk/tutorials_css_navigation.php Is that what you mean?

11-02-2010, 02:54 PM
Hmm--sorry that question is so unclear.

A link list is the simplest for me, but not so simple for a user. The nav bar could have hundreds of links in a multi-level list, plus "search by" with several variables, "advanced search," and on so forth. It's going to be repeated on each page, and it needs to be easy to use on a small screen, such as a smart phone's screen. It needs to be simple to use and clean-looking on the page.

There are primers on navigation styles--pop-ups, drop-downs, accordion, tabbed panels, etc.--but I don't know the pitfalls of extending each one to multiple levels. Which style would you suggest I look into? And/or where might I find a tutorial with pros and cons?

11-02-2010, 03:45 PM
If you are going to have hundreds of items in your navigation, it's not going to be clean or simple or easy to use. You might want to consider another scheme for navigating the site. Perhaps a form that allows you to make several choices which are processed to determine the results page???

11-03-2010, 07:09 AM
Yeah, I need to think this over some more.

Maybe a set of radio buttons that say "Where the hell am I?" and "How the hell did I get here?" Just kidding. [Giggles uncontrollably.] Ha.

Thanks, guys.

11-03-2010, 07:13 AM
"Where the hell am I?" and "How the hell did I get here?"

If these are the two questions you are trying to answer then look at breadcrumbs. They map out the path you have taken :)

d a v e
11-03-2010, 04:03 PM
have a look at some sites with 100s of products e.g. ikea or something and see how they do it

11-04-2010, 06:18 AM
Breadcrumbs! Never heard of them, but it sounds GREAT.

Thanks, ya'all!

11-10-2010, 01:17 PM
They map out the path you have taken :)
Well.. not exactly :) They reflect where you are in the site hierarchy, not the path you used to get to the page. For example, you could go from a shortcut on the homepage, and right to a page buried deep within the site, and the breadcrumb would be 'home > products > widgets > blue widget".

It's interesting because the breadcrumb analogy obviously comes from the story about Hansel and Gretel (http://en.wikipedia.org/wiki/Hansel_and_Gretel), and how they used breadcrumbs to find their way back. So calling the navigation type 'breadcrumbs' might be misunderstood.

11-10-2010, 04:08 PM
Even so, it would help a lot, because for most of the site there'd still be only one way to get to a specific page. Two, max. I have to look into this more. Thanks!