Navigation's weird baggage

Of all the aspects of a website, navigation seems to collect the weirdest baggage. I think at times designers sometimes strive to stand out by being different. But navigation really needs to remain somewhat consistent so that visitors don’t end up struggling to get around.

I’m going to start by picking on McDonalds Australia. For starters the home page is asking me a question I don’t care to answer: do you have a fast connection or a slow connection”. McDonalds can afford to get away with these antics I guess. They already have “the brand” so they don’t have to execute a positioning message quickly as outlined in episode one. In the positive the answer to this question of questions allows me to directly contrast two navigation techniques.

The blue pill (dial up website)

So if we choose the blue pill (bear with me, more strained Matrix references follow) and opt for the dial-up experience we find in my opinion an attractive plain old website. What you will notice across the top of the site is top level navigation. It isn’t brain surgery; the major topical areas of the site are sliced up into areas that people can explore. That top level navigation is persistent – it is on every page. Likewise the footer navigation is persistent, the footer nav is usually dedicated to legal mumbo jumbo and there is no exception at McDonalds Australia.

Once a top level element is navigated to we find second level navigation. I am going to ignore the fact for the moment that the second level nav is on difficult to read grey text on black background. The second level nav exposes a structure which is common to many sensible navigation schemes - the hierarchy. Hierarchies are not suitable for all occasions. Anybody who has tried to organise word documents into folders by date created to then search for them by client name has experienced “hierarchy bias” (at times it makes you wonder why we are still encumbered with hierarchical file systems in our operating systems, ok, it makes me wonder). For many small business websites though, a hierarchy works almost optimally.

I say almost because there needs to be some accounting for the fact that a certain percentage of visitors are going to think the thing they are looking for is down one branch on the hierarchy when it is actually down another.

The way to deal for this is to provide links within the content section of a given page to other areas of the site that at first you would guess people are potentially aiming for. An example of this is What Goes into Our Food, where a link through to some fine detailed nutrition content would not have gone astray. Maybe that got missed because the detailed nutrition information is conveniently tucked away into PDF documents.

The Red Pill (broadband website)

The red pill reveals a whole new reality. If you can’t see it try temporarily allowing popups. It appears the site needs a few tweaks given the introduction of IE7.

Past the popup block hurdle. Wow, it is novel. Maybe I am not the sharpest tool in the shed, who knows? My opinion is if you have to explain it chances are it ain’t working. I guess the trouble with this total departure from everything you knew and loved about the web is that it departs from everything you knew and loved. The model of the web is an extremely simple one, yet it is so often overlooked. In fact I think it is so simple it is often flossed over without any greater appreciation for why the web works the way it does. The model while deceptively simple is extremely powerful. At the heart is the uniform resource locator (URL). If the full power of the URL is not something you have considered you may want to read up on REST. The REST vs. SOAP war of distributed computing is what opened my eyes to the concept of a URL being so important to the architecture of the web. Mostly because it puts into such stark contrast the old style remote procedure call method we were collectively doing for a good 20 years plus prior to this new model that fell out of hyper linking documents.

The REST model makes possible the total approachability to the web for so many millions of people it is scary to consider just how successful it is. For example, without the URL there is no browser history, therefore no forward and back buttons. Imagine the web without that little metaphor. You can’t? Take another look at McDonald’s “red pill” site. The concept is actually executed but did you guess it was hidden behind the golden arches in the top left corner? It doesn’t make sense to build the navigation metaphor within the browser into each new site as a different experience.

Throwing away the URL has other costs besides having to rebuild browser history from scratch. Interlinking between sites is gone because each site is a self contained silo. That would kind of put a stop to PageRank ergo Google. It also means no bookmarking, or in fact sharing links to relevant areas within a site through email or any other communication media for that matter. One more downer, on the technical side, since the focus of interchange of information on the web starts and ends with URLs if you throw them away you lose all the caching and scaling benefits the model provides as well (yes technically, the flash objects are using http behind the scenes so URLs are playing their part – but the point is it isn’t happening at the document level).

Was that dramatic enough? Having content in pages that are joined together with links is really important. In fact that is kind of the definition of a website until it is replaced with the red pill weirdness. If you are building a website don’t depart from documents that are referenced from URLs. Plain and simple you lose too much by throwing away the model of the web. An extra tip, all flash sites are the typical victims of this line of thinking. In general, if flash or other rich plug-in style media types are considered parts of a well executed site, not a site unto themselves things have more of a chance of staying on track.
With the lesson on web architecture out of the road let’s move on to the specifics. The red pill site does evoke that wow factor, no doubt. But it is like a game with sexy graphics and no game play. The first impression is great but the lasting usefulness leaves something to be desired. Moving the elements through some attraction function to the mouse cursor seems cute at first but Fitt’s law (a basic tenet of human computer interaction) really doesn’t deal with moving targets for a reason!

The “what’s new” element on the first circle (the home circle?) with the McFeast on it (yay it’s back!) provides a really constrained view of the choices and exploring them is done through subtle deft mouse movements again. My opinion is to leave the what’s new element out altogether and make the McFeast click through to the What’s New subsection (the floating light bulb) as that is where all the choices in the what’s new element lead anyway.

Next, the first level navigation choices I feel are diluted because the sub sub choices are visible floating behind them. While it is a hierarchy, the whole thing provides every single choice as a single click from that first opening screen. That is just too much choice up front. Smart navigation doesn’t work that way. It lets a path be taken and provides a recovery method to find a new path if the direction a user takes isn’t the direction sought. Basically, for McDonalds I would advocate removing the homepage in its pop-up blocked glory. I would also remove the red pill site and just use the blue pill site wholus bolus. If that isn’t fancy enough then judicious use of flash to illustrate and engage within the blue pill site would be a much better use of technology.

Points of the post:

• The majority of this post was dedicated to explaining web sites are web pages with links between them. Seems pretty obvious doesn’t it? Sometimes the basics need to be revisited even when designing a website that rivals sliced bread.

• Navigation works best as a hierarchy of links. If you are having a website built for you, make sure you get a good look early on at the hierarchy and that it makes sense for your intended audience. If you are building a website I hope you have a hierarchy set out before you started!

• The persistent navigation elements on any website are a precious resource. Use them wisely.

• The cherry on the navigation cake is taking those visitors that got lost down a path and righting them so they find what they are after.

Happy navigating.

All "A Tag Short of Compliance" Blogs

In his real job, Luke Amery works on shopping cart software. He is the technical director of On Technology, Australia's leading e-commerce development company.