Website Design: Improve your Navigation
|
|
|
| 1.0/5.0 (1 votes total) |
|
|
|
Rich Goldman August 15, 2007
|
There are billions of different Web pages floating around the Internet,
and unless you have the ability to trawl Google and memorise the URL of
every page of every site, there's no way you'd survive out there
without a little help.
Thankfully, we don't have to wander round the Web feeling our way like
a zombie in a maze. Navigation forms the basis of any Web site, and
always has done. Despite the fact that it is a necessity of Web design, it has become something of an afterthought for many designers, as they concentrate on trying to get clever with content.
Navigation remains the single most essential aspect of site
construction, and the wonders of modern technology mean you can guide
your visitors around your site in a range of innovative ways to make
their online experiences all the richer and more rewarding.
What’s the point of navigation?
For the benefit of anyone arriving on the planet in the last few
minutes, the base principle of site navigation is to help your visitors
find their way around your Web site, providing links to all its pages.
Common sense reasons that it is imperative that your site is easy to
navigate or your guests will soon leave the party for pastures new.
The home page of a web site is where visitors form their impressions
about the entire design, and its importance far outweighs that of the
other pages that make up the site. The same theory applies to the
site's navigation mechanism, ie if you manage to convince new visitors
to make the step from your home page to one of your sub pages, the
chances of them wanting to peruse the other delights on your site
increase no end.
Proper site navigation should give the visitor a sense of 'place'
within the site. it should help you maintain consistency throughout the
site, even establishing something of a brand. It's important that
anyone delving through your site knows how to get back to where they
started, otherwise they're likely to flee in frustration.
Your navigation system should also encourage the user to explore other
areas of the site by suggesting pages of related interest, and
challenge their minds by pointing them towards more obscure links
elsewhere online that will interest them. Ultimately, your top priority
when designing site navigation is to ensure that the user doesn't have
to work hard to find everything you're offering.
Traditional navigation
Back in the old days, navigating the Web was a completely different
experience from the one you'll see today. We all know that developments
in Web design software
have made it easy to create prettier pages with flashy graphics and
stylish content, but site navigation has also evolved considerably.
In the late Nineties, when the Web was just beginning to take shape,
the core device for site navigation was the trusty textual link, and a
blue underlined piece of text was your ticket to a world of
information. once clicked, the text link would turn purple (or
sometimes red) to indicate that this was one corner of the Web that
you'd already explored, and this became something that even newcomers
to the Net could get their head around right from the off. Of course,
these conventions still apply today, albeit in a slightly more 'glam'
format.
A few years ago, the closest you'd have got to a graphical interface on
a site would be a series of boxed text links across the top of the page
of running down the side. Occasionally these would be accompanied by
hideous animated G11's or clipart that vaguely represented the part of
the site a link pointed to ('borne' would be a house, contact us' a
phone, 'buy' would be a stack of coins, etc).
Just because these navigation systems seem a little primitive from this side of the Millennium, it doesn't mean
they weren't effective, and they are still used in some form these
days. The Site Map, for instance, was one of the first devices to
appear, and still represents probably the quickest way to find your way
around large Web sites. On the whole though, exploring a collection of
pages in 2003 is a much richer experience than it was seven years ago.
The emergence of modern WYSIWYG design applications and advancements in
graphic manipulation technology have meant that Web developers can get
more imaginative with their navigation bars in order to truly achieve
usability.
Navigation musts
If you mosey along to any Web site worth its salt and look carefully at
how it was put together, you'll notice that all the big sites follow
the same navigation methods a tidy nav bar for effect with a bandwidth
friendly set of textual links somewhere on the page. However creative
you think you are, or however much you want to hurl saliva in the face
of convention, there’s no use trying to fight against these methods.
They work and they always will work, and users are unlikely to stick
around if they don't get what they're expecting.
Textual links, or embedded links, are the most basic form of navigation
and represent a clear, instant method of accessing pages within a site.
These are generally arranged in the form of a series of underlined
words across the top of a page or a list running down the side.
Another key device in the quest for an easy ride online is 'breadcrumb'
navigation. By using trails of HTML links, you can show the route from
the home page to the current page, helping the visitor to move up and
down the menu tree more effectively, especially on large, page heavy
sites.
In order to give the user the richest, most diverse surfing experience,
it's wise to slap in as many related links, within reason, as you can
unearth. The key here is to avoid simply using the obvious links, and
to add pointers to more obscure, off the wall sites that are likely to
titillate your readers, adding greater value to your site in the
process.
It's also important that you position your navigation links in a place
where the user will expect them to be, and where they won't intrude
into the content of your site. Many Web designers
favour the placement of links along the top of a Web page, plus down
the left or right hand side, and at the bottom of each page for good
measure. Basically, you need to make sure that your visitors are never
more than a scroll wheel rotation away from the next page. Make sure
you stick to colour conventions too blue is generally recognised as the
norm for a text link, with purple or red used to indicate a page that's
already been accessed by the browser.
New methods
While these traditional navigation principles should still be foremost
in your mind when designing pages, there are a number of trendy new
devices kicking around town that are also worth thinking about.
Let’s first consider image maps, a navigational tool that has the
potential to be something quite special, but which invariably turns
into a confusing mess. The key to achieving a workable image map is to
choose your picture carefully. Make sure it's something that lends
itself to being logically sliced up and split into parts, rather than a
generic piece of art with no determinable boundaries within it. if you
can afford to do so, buy the image in from a picture agency before
slicing it up in Image Ready (or a cheaper alternative such as Paint
Shop Pro) and exporting it to your Web editor to apply the rollovers.
If pictures aren't your bag, or if you're keen to avoid bandwidth heavy
navigation, you may want to think about exploring the DHTML route or
even applying JavaScript pop up menus. While these have been around a
few years now, they're still called upon by pro designers as a means of
adding dynamic navigation. Adding DHTML menus is far easier today than
it ever was, and there's plenty of software around that will do the job
for you without you having to lift a brain cell.
However, when it comes down to designing sites 'in the Twenty first
Century, you won't find many better tools for the job than Flash.
Macromedia's cherished vector graphics application houses all the
functionality you need to produce slick, easy to follow, fast loading
navigation. The program allows you to create virtually any type of
dynamic navigation system you can think of, from stylish icons and
Flash buttons to pop up and pull down menus. Flash is also great for
generating actions and animation within a navigation bar in order to
engage the user and promote interactivity.
Ironically, relying too heavily on these swanky new navigation methods
can lead to your site becoming overwhelming to a visitor, and a
jamboree of weird and wonderful menus is no use to anyone. If you are
intending to use devices such as Flash or JavaScript menus,
always make sure this isn't your sole form of navigation, and that
there are text links for those without the right plug in. As
accessibility is what we should all be striving for these days, you
should always be sure to include ALT tags on any images you include in
your navigation to cater for anyone using a screen reader and make sure
you create a text only version as well.
If you really want to know if your site is truly useable, the best idea
is to unleash it on a group of friends and get them to try and navigate
it. Come up with a list of things that a user might want to do on the
site, then observe your guinea pigs as they try and access the
information. You'll soon learn that it pays to keep things simple and
not to try anything too elaborate when designing navigation. That's not
to say you can't be original, and with advancements in creative
applications such as Flash, navigating Web pages can only get more
enjoyable. |