It used to be all the rage–it used to be part of every webmaster’s toolbox. To have an uncluttered, sleek-looking layout, we all used to make our layouts look something like this:

Looks pretty cool, right? It’s easy on the eyes, if a little amateurish (because this was one of my first attempts at doing a design like this).
But there’s a big problem with this layout, and it’s staring us in the face.

There are no descriptive words in the navigation. None at all. It’s just Roman numerals. Tidy and clean it may be, but it makes no sense to the user upon first landing on the page. What do you click on to get to the page you want? There are no hints.
Why Sensible Navigation Matters
More and more, our sites are being used for informational purposes rather than just places to display our skill at Photoshop and coding. To meet that need, we as designers and developers need to make our site as easy and quick to use as possible.
The problem? When we’re busily designing and coding a layout, we might not think that having to hover over an image-mapped navigation (like the example above) to find out what you’re about to click on is a pain. But to our users, it’s one more obstacle in getting to the information they need.
Think about how we ourselves use websites. We don’t like it when a site doesn’t “make sense” logically or doesn’t make content clear and available. So why should we inflict that on our users just for the sake of making our navigation “pretty” or “uncluttered?”
Making Navigation Both Logical and Tidy
Here are two ways to make navigation look good AND easy to understand:
- Choose explanatory icons where possible; there are many great symbol/icon fonts out there that can make wordless navigation still understandable. My current favorites are Socialico and Modern Pictograms.
- Simplify and shorten the text of your navigation links as much as possible without losing the meaning. For instance, instead of labeling a link as “back to home page”, just simply label it “home”.
You can even combine icons with a simple text label underneath them if you so choose–that can look just as clean as the icon by itself. Whatever style of simple and elegant navigation you choose, you’ll definitely have happier users!
One thought on “Stop Coding This Right Now, part 2: Nonsense Navigation”