Navigation

by Joe Gillespie — Mar 1, 2000

The World Wide Web, by its very nature, encourages jumping from one site, from one page, from one thought, to another. It's all so easy!

Reading a book is essentially a linear process. You start at the beginning and read to the end. Some books, and all newspapers and magazines are designed to be dipped into at will. You don't have to read the whole thing, but the bits that you do read, are read in a linear fashion.

With the advent of interactive hypertext, you can be reading a line of text on one page, and with the click of a button, be transferred to a cross referenced line of text on a site on the other side of the world.

Whilst this flexibility is admirable, it has the unfortunate side effect of breaking continuity of style and train of thought. At best it is distracting, at worst, it leaves the reader lost and confused.

The web page designer has to consider not only what is ON his page but what is OFF it. If the reader jumps to a 'stronger' page that is more powerful in visual terms, in content or structure, he may never come back!

Very few pieces of information can be presented in a totally random and haphazard style - they need some structure and prioritisation.

I am a great believer in the 'outliner' to create multimedia or WWW content and to write copy for ads or manuals. It forces prioritisation of thought and creates a solid foundation that can be progressively elaborated upon without losing sight of the entirety.

It also makes the transition from the written draft to the finished interactive CD-ROM or web page easier and more solid.

Creating a distinctive visual style and applying it rigorously is the best way to hold a series of related, or disjointed, web pages together.

Like any corporate image or magazine house style, it creates its own identity - and boundaries. In navigation terms, you know when you are within it and when you have left it.

Furthermore, it communicates a qualitative statement about the company or individuals responsible for it.

HTML provides navigation at a number of levels - within a page using 'anchors' - from page to page and from site to site.

The mechanisms used to implement this navigation can be hypertext, buttons or image maps.

The main difference between web pages and other forms of multimedia is in the ways that these elements interact with the user.

A hypertext link is fairly easily understood and works every time, no more needs to be said about those. The other two suffer from potential drawbacks.

Where the 'multimedia' button will usually go in and out like a real life button when clicked, the web page button often lacks any visual feedback, it may not even be recognised as a button at all! Ideally, an interface button will operate on 'mouseUp'. That means that once it is clicked, the user has the option to move the pointer off the screen button and let go of the mouse button to cancel the operation.

Web page buttons are always activated on 'mouseDown' and because of the general tardiness of the system and the fact that the button may not change in any way when clicked, the user doesn't always know what, if anything has happened.

It is possible to give a screen button a coloured frame which changes colour like hypertext when clicked but this function is often omitted deliberately for aesthetic reasons.

Image maps suffer from further problems. As well as a lack of visual feedback, the 'hot' areas of the image are often unclear.

With server-based CGI scripts, there is a delay as the cursor hits the image map, sends the co-ordinates to the script, and returns the new URL to the browser which, in turn, calls back to the server to find the new link.

'Client side' image maps, which do all the calculations on the local machine, are supported by recent browsers but not older ones, so it is dangerous to use them as a sole means of navigation.

Use the browser window status bar - the strip at the bottom of the browser - to give meaningful messages to aid navigation. Look at the source of this page to see how to do that using onmouseover.

It is the web page designer's responsibility to overcome these limitations. In the endeavour to be creative and stylish, it is all too easy to overlook basic functionality.

The visual clue that a button is functional can be subtle. A picture is a button if it has a fine blue frame which changes to red when the picture is clicked.

A picture that looks like a button is probably a button.

A 'raised' area on the screen with type on it might be a button, but it might just be someone's idea of giving emphasis to a line of type.

A bullet at the beginning of a line might be a button, who knows? Click it and see? Oops, I'm now looking at a catalogue of surveying equipment and the back button at the top of the screen is dimmed, what do I do now?

Suffice it to remind that the magazine designer has only to contend with a page being turned, the web page designer has to consider many other dimensions.

Do you want to know some more about the theory behind graphic symbolism?

One of the most important aspects of navigation, and interface design generally, lies in an understanding of graphic symbolism.

If you have had a good art college training, you will probably have been introduced to the theoretical concepts behind symbols and logotype design.

Capturing the literal or abstract essence of a company identity and making a visual representation of it in the form of a symbol or trade mark is something a graphic designer has to do all the time.

Designing icons and navigational devices for computer programs requires exactly the same skills and, for those readers who have not had the advantage of such a background, I will give a brief introduction.

We are born into this world with a basic, instinctive recognition of the visual representation of 'mother'.

A human, animal, bird, fish or reptile that has sight at birth will recognise a face - in its simplest form, a circle containing two eyes. After that, everything else has to be learned by association.

Primitive man made drawings on cave walls. We call these Iconographs because they are literal representations of things, as we see them, translated into two dimensional drawings.

The word 'icon' has, traditionally, a much deeper significance as it also describes a particular type of religious painting representing much more than its 'face value'.

To understand an icon, we must first of all recognise it. Recognition comes from matching the visual symbol with a memory, or experience, stored in our brain.

If the symbol is poorly represented because of inept draughtsmanship or if its significance is beyond the viewer's experience, then recognition fails.

It can also fail even if the representation is good and the viewer knows what it is, if it is presented out of its usual context.

The second type of symbol is the Ideograph. This is a graphic representation of an abstract idea - one that has no direct visual equivalent, because we can't see it.

Love is often symbolised by a heart - because you can't draw love.

Danger is represented by a skull. A cross can have many meanings, depending on its context.

A cross on a child's school book means something entirely different from a cross on a ballot slip.

A cross on a road sign has no relationship with a cross on a church.

Chinese characters are based on ideographs because each has a meaning.

If you have not been taught to read and write Chinese, the ideas behind the visual symbols are meaningless, as are the meanings of the symbols themselves.

In computer interface design, you will often be faced with having to depict something that is not a visual concept and it is not easy.

An ideograph requires not only recognition but also the mental connection with the idea it represents.

In the absence of an 'ideal' pictorial representation of a difficult concept, is better to 'cheat' and put a word under an icon than to leave the user confused.

The third main type of symbol is the Mnemonic Symbol, one that has no obvious visual or ideological connection but triggers a recollection of some previously learned information.

Examples of mnemonic symbols are Roman alphanumeric characters, Egyptian numerals and just about any company logo that you can think of.

A hypertext link is a mnemonic symbol too, we know that because it has been explained to us at some stage.

When we see a piece of text on a computer screen and it is underlined, and maybe in a different colour, we know that we can click on it and it takes us off to some relevant item.

Companies spend a lot of money promoting their logo or symbol.

The connection has to be 'drummed' into the public through constant exposure and association.

We have all, as children, had the alphabet taught to us in the same fashion.

The interesting thing about a mnemonic symbol is that, once established, it can work out of context.

Some of the World's most successful icons, the Coca Cola swirl and Mickey Mouse's head are so universally known that they can be distorted, sawn in half and recoloured and they are still recognisable.

It is this consistent anticipation of functionality and the subsequent reward of accomplishment that set the Mac interface apart from all others and makes it a such a pleasure to use.

Programs that play sound or video clips invariably use the metaphor of a tape or video player's transport controls.

This works every time! Web pages are less sophisticated in their interface possibilities being somewhere in between 'multimedia' and traditional print.

Nevertheless, by using navigational devices based on these same time-tested principles, your web page DESIGN will be more successful.

Mouse Out

One technique long loved by multimedia designers to give visual feedback of a 'hot-linked' element on a page involves making the object change its appearance as the user passes the cursor over it.

This is called a MouseOver or RollOver.

Normally, passing the cursor over such an item on a web page just changes the cursor graphic to indicate that there is a link attached to the object.

In Netscape Navigator, for instance, the arrow cursor changes to a pointing finger.

There are a number of ways to simulate multi-state buttons on web pages but I will ignore the ones that need special plug-ins.

Even the JavaScript method that I am going to describe doesn't work in all browsers.

At the moment, it will work in Netscape 3.0 and above on Macs and PCs and in Microsoft Internet Explorer 3.01 (Mac) and 4.0 (PC).

That covers a high proportion of users, so it is well worth using the technique, especially if you use a filter that stops non-supporting browsers from trying to activate the code.

Usually, a browser just ignores any code that it can't understand, but using this routine in some browsers can throw up an error message.

The JavaScript that I will use is called the 'document images object' and is part of the JavaScript version 1.1 specification. PC versions of MsIE prior to 4.0 do not support this.

I don't intend to give a comprehensive JavaScript tutorial here, there are plenty of books and web resources that do that already.

If you only want to check for MouseOver compatibility and don't care about absolute browser types and versions, here is an simple test for document.image which will return either TRUE or FALSE depending on the browser.

if (document.images) { //rest of your code goes here }

So, if the browser supports document.images, it loads a set of images into memory. One set is the 'normal' or 'off' state of the button, and the one that will be seen by browsers that don't support mouseovers.

The other is the 'over' state of the button that replaces the normal one when the cursor passes over it.

Sometimes an 'image array' is used to contain and reference the images and I have done that on some of my pages on this site. This discrete method of referencing is slightly more verbose, but probably easier to read and understand.

You first create a reference to a new image:-

mypic = new Image();

and then say where the source of that image is:-

mypic.src = "path_to_image.gif"

The final result would look something like this:-

if (document.images) { normal0 = new Image(); normal0.src = "normal0.gif"; normal1 = new Image(); normal1.src = "normal1.gif"; normal2 = new Image(); normal2.src = "normal2.gif"; over0 = new Image(); over0.src = "over0.gif"; over1 = new Image(); over1.src = "over1.gif"; over2 = new Image(); over2.src = "over2.gif"; }

In the body of the HTML, the usual A HREF calls two JavaScript functions using 'onMouseOver' and 'onMouseOut'.

The default image here is called "images/normal0.gif" and apart from the usual WIDTH, HEIGHT, BORDER attributes, note that the IMG SRC also has a NAME attribute - 'button0'. Think of this as the placeholder for any image that will appear at this position.

<A HREF ="the_link.htm" onMouseOver="mOver(0)" onMouseOut="mOut(0)"> <IMG SRC="normal0.gif" ALT="Alternative Text" WIDTH=173 HEIGHT=20 BORDER=0 ALIGN=bottom NAME="button0"></A>

In effect, we are saying that, on mouseover,

button0.src=over0.src

We could say -

onMouseOver="button0.src" swaps to "over0.src" onMouseOut="button0.src" swaps to "normal0.src"

but as there is no error trapping to allow for non-JS1.1 browsers, this can cause error messages. The functions mOver(num) and mOut(num) contain the if(document.images) filter.

Introducing the sequential numbers num into the name makes it easy to address the functions with parameters.

Note that joining the strings 'over' and variable numbers num into a valid string requires the JavaScript eval() function.

function mOver(num) { if (document.images) { document.images['button'+ num].src = eval('over' + num).src; } } function mOut(num) { if (document.images) { document.images['button'+ num].src = eval('normal' + num ).src; } }

That's all there is to it as far as JavaScript is concerned.

Now, what you have to watch is the logic. Not so much of the code but of what you are doing. Does it make sense to the user.

Although it looks good, this example doesn't make sense because it confuses a mouseOver event with a mouseClick event - as you would get in an application.

Go Button

Moving the mouse cursor over an object does not make anything happen other than swap the GIF image.

In JavaScript there is no easy way to simulate all the possible mouse events encountered in normal applications.

This button uses onClick to activate the change of state instead of onMouseOver to give a dynamic button effect.

Go Button

As there is no reliable mouseUp command in JavaScript yet to reset the state of the button, the button returns to its normal state automatically after a short time delay or with a mouseOut.

mouseOver

Mouse (cursor) is over the button but nothing actually happens except that button changes to it's 'on' state.

mouseDown

The user has clicked the button. (onClick in HTML.) This activates an event on a web page but not in a regular program because the user may want to cancel the operation by backing-off from the button.

mouseStillDown

Used for dragging operations in applications. In browsers, it has various effects depending on platform and browser.

mouseUp

The user has released the button. In an application, this would activate the required event, but on a web page, usually does nothing.

mouseOut

The cursor has left the vicinity of the button and it returns to it's 'off' state.

This example makes it clear that by passing the cursor over the object, you have identified that it IS a button and are preparing it for a click (mouseDown) event.

You are giving the button 'the focus'.

Target1

Target2

Target3

The 'on' state image can be a multi-frame animated GIF giving an running effect like this, for instance.

Transparent GIFs can cause problems with such effects as the screen doesn't always update correctly.

Running Arrows

The code that calls the JavaScript functions goes directly after the HTML <A HREF> tag NOT within the IMG SRC tag.

I have split this into separate lines for clarity, it doesn't need to be like this.

I have only shown the code for the first button, the others are similar with the link and filename changing and the number n of the GIF in parentheses.

Also, be aware that using mouseovers like this can double the amount of files to be loaded at startup, so there is a load speed penalty.

A more advanced example next, can swap multiple images and provide alternative status bar messages.

<A HREF="yourLink.html" (or JavaScript function) onMouseOver="mOver(n)" onMouseOut="mOut(n)"> <IMG SRC="normaln.gif" ALT="Alternative Text" WIDTH=173 HEIGHT=20 BORDER=0 ALIGN=bottom NAME="buttonn"></A>

This example from a site I did some time ago site shows how to change multiple images with one mouseover call.

The image is split up into a number of separate GIF files so that only a small part needs to change at a time. The whole lot is held together inside a table cell with its width set appropriately.

Each ball provides a link to another page and has three states as shown below.

CybeRollo's nose is also a mouseover and runs through a sequence of messages.

I will not hold this up as a paragon of good interface design, it was done for fun! Its deficiencies may teach you something nevertheless.

Normal is the state when the mouse is not over the button - a multi-colored ball.

Over is the state when the mouse is over the button - a glass ball.

Off is a dead button (pearl ball) that does nothing, because it represents the current page and it is inappropriate to 'go' there.

Firstly, all calls to JavaScript 'document.images' need to be filtered so as not to cause error messages in non-JS1.1 browsers.

if (document.images) { //rest of your code goes here }

Each image is loaded and declared like this. This can done in the <BODY> section of your HTML so that the images are pre-loaded and cached as the page initially loads or it can be in a function in the <HEAD> section that is called from the <BODY> section on loading.

JavaScript functions go in the <HEAD> section. They are only called when needed.

'b1' is Ball 1. I like to keep the images names the same as the GIF names as far as possible, but they don't have to be.

if (document.images) { b1 = new Image(); b1.src = "b1.gif"; ........ }

This is the HTML part that is attached to Ball2.

<A HREF="javascript:nothing()"  onmouseover="swapover(2); self.status=nav2; return true" onmouseout="swapout(2)"> <IMG SRC="b2.GIF"< WIDTH=58 HEIGHT=71 BORDER=0 ALIGN=bottom NAME="ball2"></A>

The code for each ball is the same except for the number.

The 'javascript:nothing()' is a dummy function that does nothing for the purposes of this tutorial. Normally you would put the target URL here.

onmouseover ="swapover(2);

calls the swapover() function and tells it that it is for the ball2 position.

self.status=nav2; return true"

puts the string nav2 into the status bar at the bottom of the browser. nav2 is delared at the beginning of the JavaScript in the <HEAD> section.

onmouseout="swapout(2)"

restores the default images when the mouse leaves the image.

In the <IMG SRC part, the NAME attribute describes the 'slot' into which various GIFs will go as we swap them in and out. In effect :-

ball2.src=c2.src // over

ball2.src=b2.src // out

where c2 is the glass over ball that appears on mouseover.>

This is the function that does all the work. The parameter n is passed from the HTML and three image swaps occur.

  • The ball changes to a glass ball.
  • The eyes change to look at the ball.
  • The message changes to tell what page is being pointed at.

Note, the JavaScript eval() function is required to concatenate strings and numbers.

function swapover(n) { if (document.images) { document.images['ball'+n ].src=eval('c'+n).src; //ball document.images['face'].src=eval('face'+n).src; //eyes document.images['blank'].src=eval('n'+n).src; //message } }

The swapout() function (below) works exactly the same way but puts the images back to their defaults.

function swapout(n) { if (document.images) { document.images['ball'+n].src=eval('b'+n).src; document.images['face'].src=face0.src; document.images['blank'].src=qb.src; } }

The messages displayed on mouseover are GIF images saved at the minimum possible bit depth.

This Mac 'Chicago' screen font looks good without anti-aliasing and the whole image is only 229 bytes.

Because they are important, the target URLs are echoed in the status bar.

Remember, some older browsers don't support mouseovers and you need to provide an alternative method of navigation for them.

The other trick that is going on here is that each time the mouse passes over the robot's nose, you get a new message.

This could be a random message but in this instance, I have used a sequence of eight messages using the functions seqQuip() and clearQuip().

The code to do this is complicated by the fact that MsIE seems to send a mouseover event for every pixel movement of the mouse within an area, so I had to introduce a switch so that the image only changes when the mouse has left the area and comes back in again.

I won't go into the gory details of this technique, have a look at the source code if you like.

Clicking on the nose brings up a JavaScript Alert box with yet another message.

Now, a caveat. I wouldn't recommend using all these tricks normally, they are bandwidth hogging, indirect and potentially confusing. But this particular site was full of such puzzles, that's what it was all about. It's nice to break the rules sometimes :?)

Despite the mouseovers and back-up status bar messages, I still provide a simple text navigation device too. It takes little effort and can make all the difference to some people.

Finally, a number of people have written and asked if mouseovers can be used in conjunction with a client-side image map. The answer is yes, provided the browser supports the document.image feature. You should use a status bar message also, for the benefit of older browsers.

Taking the fruit example from before, as the mouse passes over different fruit, the GIF beneath the main picture changes to provide visual feedback.

The placeholder fblank is swapped by the JavaScript function swapfruit(n). (Look at the source.) The GIFs have transparent backgrounds so that they overlay on this patterned background correctly.

Note that instead of using a onMouseOut, passing the cursor over the default image map, (the non-hotspot areas of the picture), resets the fblank placeholder.

FruitraspberriesFruit

Del.icio.us Digg Technorati Blinklist Furl reddit Design Float