Green Bar Redesign: New Features

Where The Heck Am I?

One thing about the old design was that it was difficult to know exactly where you were in the site. Sure, you could look at the url and guess that

http://www.greenbar.ws/4adults/attitude.cfm

meant you were somewhere in the Green Bar 4 Adults section. The problem is there are 33 documents in that section! The navigation system of the old design wasn't very helpful in letting you know where you were or where you have already been.

To solve that problem, this new design has two features. First, at the top of the page you should see some green text that looks like this: "Green Bar » Site Info » Green Bar Redesign » Where The Heck Am I?". That line lets you know the hierarchy of the site. It tells you the you're in the "Extras" section of the Green Bar Web Site, and that "Green Bar Web Site Redesign" is the parent of the document you're currently reading. With that knowledge, you have a pretty good idea what order the documents are supposed to be read in. That line of text also matches the document title in your browser's title bar.

Where The Heck Have I Been?

The second major problem with the navigation system of the old site was that you really had no way of knowing exactly which documents you had already read, and which ones you hadn't. To make matters worse, the text on link buttons didn't even match the title of the document they linked to. Considering that the major portion of this web site is text, and that text was written to be read in a particular order, it should be easy to see why the navigation system was not helpful.

When the WWW was originally created, and the scripting language HTML was designed, the intent was that documents containing text could be linked together in a logical manner so they could be easily read. The markup of HTML was designed to provide documents with structure, and links stood out from the rest of the text by underlining and coloring.

We've come a long way since then, and HTML has grown to include many more structure elements and a few style elements. All of that resulted in my ability to replace a simple text link with an image, which makes the page look pleasing, but defeats the original purpose of the HTML link (actually, it's called an anchor). You see, when you visit an HTML page, you're supposed to be able to tell where the links are. Once you visit a linked document, you're supposed to be able to tell that you did.

All of that simply means that, however pleasing the original design was, it wasn't a good user interface. The word "interface" means "interaction between", not "I've hidden several links on this page, let's see how long it takes you to find them!" "Interaction" suggests that you do something, and get some feedback from the site that allows you to choose what other actions to take. With the old design, your action was to click on one of those rollover graphics. The only feedback you got was a new document.

This new design lets you know which documents you've already visited by changing their color to a darker green. It lets you know which documents you haven't visited by leaving their color a much lighter green. It lets you know which document you are currently on by disabling the link and turning its color black. And, it still has a "cool" rollover effect that doesn't involve pre-loading a lot of graphics, and 67 lines of Javascript code.

Where The Heck Am I Going?

So, to navigate the site, you have the green bar on the right containing the links. Each section of the site has its own set of links, although you'll only see the links for the section you're in. That's not a problem though. At the top of a link section, you'll see the name of the section and a line. Each section name is a link to the top page in that section. Clicking on "Green Bar 4 Adults" for instance, will always take you to the top page of that section.

Clicking on "Green Bar Home" will always take you back to the main page of the site, and so will clicking on the Green Bar graphic at the top of the page. It works regardless of what page you are on, or how deeply you go into the site. In case you want more, if you drag your mouse over the big green text at the top of this page, you'll see that it changes color just like a link. That's because it's a link back to the top of whatever part of the site you're in. That text is always the title of the current document, and it always takes you up to the top of the section.

Just to show you that I want your experience on the Green Bar Web Site to be positive, uplifting, and helpful, you'll notice that there always seems to be a link to the Site Map at the top of the link bar. Of course, the old design had one of those too, but that design really needed it. Click on the Site Map link, and you get an easy to read, and understand, list of every document in the site, showing the sections, subsections, and side links (those are links that aren't part of the current document's hierarchy, but contain information that may enhance the document's content).

There are three more things about this new design that are not only new, but much more helpful to you! First, it's more accessible than the old design. Second, any browser can access everything on the site. Third, it's much more printer friendly. On the next page, I'll tell about each one of these. More»