Interface

by Joe Gillespie — Oct 1, 1998

INTERFACE by Joe Gillespie

Whoa, man! You have never seen such a car in your life!

Low. Sleek. Absolutely stunning.

You can't find a door, but it is so low to the ground that you can easily climb in through the opening in the roof. The long, soft, bucket seat moulds to your body like a glove. Your feet fall naturally onto two pedals on the floor below. There is no steering wheel or any sign of the usual controls that clutter a car's dashboard, but just at your fingertips are a set of flat, tactile pads. As you run your fingers over the pads, the vehicle winds up into a soft purr and rises from the ground, ever so slightly. Superimposed on an invisible screen just above your hand is a head-up-display with a collection of strange symbols. You put your foot on the accelerator. The car goes into a furious, uncontrollable, clockwise spin.

No, This doesn't happen in car showrooms. But it does on Web pages. Every day! People drop in on beautiful sites, gasp at the graphics, but then haven't got a clue how to drive the things.

'Clue' is the important word here. Interface design is all about visual clues.

When Web pages first appeared a few years ago, the mechanisms for navigation were well thought out. A 'hot' word with a link behind it would be immediately identified because it was underlined and in a different colour from the rest of the text.

Clicking on the word changed its colour to give the reader confirmation that something was about to happen, and then teleported them to some relevant text elsewhere.

On returning to that page, the hypertext link had changed to a third colour to show that it had been previously visited.

Simple. Consistent. Understandable. Boring!

Despite the fact that graphic images can have the same colour-coded border, they are usually dispensed with - <BORDER=0> . Instead of being an obviously clickable button with user feedback clues, it becomes a static picture of indefinable function.

OK. We all do this. These things are ugly, ugly, ugly!

But what do we replace them with? Something that looks much better, but doesn't work nearly so well. The ubiquitous 'NavBar', seen on many sites, is invariably an image map with words or icons that provide little or no user feedback. The appropriate URLs do show up in the status bar at the bottom of the browser window, but these are not always very helpful. They are addresses of other pages designed for machines to work with, not humans. 'Human' is the word so often omitted from the term 'Interface Design'. Early computer interfaces were 'menu driven' using the keyboard. Press 'S' to save the file - easy. Then along came the Graphical User Interface on Apple Lisas and Macintoshes - a brilliant concept that transformed the look and ease-of-use of computers everywhere.

What made it all so easy to use was not the playful icons, the drop down menus, the helpful dialog boxes. It was because the whole thing was designed using a real-world metaphor that everybody immediately understood - a desktop. People understand the concepts of documents, folders and wastebaskets. The incomprehensible collection of zeros and ones that the computer is quite happy with, is given a human-comprehensible form.

In the context of a drawing program, an icon of a pencil or eraser is immediately identifiable and the tools' functions understood. Sometimes icons are clear enough by themselves. Sometimes they need a word or two underneath. But more recently, and as programs become more complicated, icons are being used to describe concepts that are much too complex or inappropriate, and they fail miserably.

Luckily, Web page interface elements are almost always just simple 'go to' links. Even so, they should give a clue to the overall scope, and structure, of the site. The site map dictates the navigational requirements. Whether it is simple, or very complicated, choice of an appropriate 'steering wheel' or 'pedal layout' is essential from the outset. The designer's question is not 'should the arrows be three dimensional?' or 'should I add a drop shadow?', it should be 'are arrows the best way to navigate this site?'

A very simple linear site is one dimensional. You can go from one end to the other in a straight line and the only options are jumps forwards or backwards by one or more pages. An everyday paper novel will have a similar structure where you simply turn the page to continue.

For longer books, a chapter index might be useful. In a site map, the chapter headings are linear and may spawn another page, or pages, making the site two or three dimensional. Add in the dimension of time, as in a site that is updated on a daily basis, and you have four, or more, dimensions.

The more complex the structure, the cleverer the interface designer needs to be. The trick is to simplify the process, just like a mathematician simplifies any complex equation. Although hypertext links allow the user to jump wildly around the Web, they soon become disorientated. Remember, the 'Go' button doesn't always keep a record of every page they have visited. The trail is easily broken by a CGI, or JavaScript link. Being able to maintain a mental map of the site structure is the best recourse.

Landed in a strange city, you will probably try to relate your location to a main landmark, thoroughfare or river. If you come across a roadside map, an arrow that says 'You are Here!' is helpful to establish your position and orientation.

The most common mistake in site navigation is to give all the options all of the time. The 'common' navbar that appears on every page, may be convenient for the designer and kind to the bandwidth, but it completely defies interface design logic.

There are ways of saying 'You are Here!' on a Web site that put everything else into perspective. If a page has a button and its sole function is to take you to the page you are already looking at, it is completely redundant! You could remove it entirely - that is a perfectly valid argument - but it is even better to leave it where it is but to gray it out. This shows that the choice is inappropriate for this page.

When you do go to another page, that button position becomes active again and the one representing the new page dims. The grayed out button is, in fact, saying 'You are Here!'. It is removing inappropriate options from the gamut of interface elements, simplifying navigation and reducing the user's confusion.

The static image map or frameset navbar not only provides little feedback, it actually 'lies' to the surfer by suggesting that at least one target is a legitimate link when it is obviously not. By chopping it up into a series of separate elements, you can replace the redundant 'module' without having to reload a whole new navbar graphic.

Rollovers are often used indiscriminately for effect and have little functional value. Used in conjunction with 'button redundancy', they reinforce the user feedback by showing appropriate and inappropriate directional choices. Coupled with a *meaningful* status bar message, they can be a positive navigational aid.

If you look at the navigation bar at the top your browser, you will find that some options are dimmed. STOP is only appropriate in the midst of downloading a page. The forward arrow will only be active if you have already come back from another page.

These principles are commonplace and even taken for granted in modern program design - they make sense. With a little consideration, they will also improve the functionality of your Web site navigation.

And, next time you climb into your car, look at the controls. Would you prefer to see the pedals transposed for the sheer variety of it, a triangular, glass steering wheel because it would look so cool or a handbrake that you pushed forward to engage, just to be different?

Ask yourself, are they boring, or reassuringly familiar?

The following examples don't take you anywhere, they just demonstrate different button actions. Of course, there are many interface paradigms ranging from photorealistic buttons to totally abstract ones that only exist in the virtual world of a web page. Although priorities will vary, the main criteria are that they are functionally sound, they look OK and are bandwidth friendly.

Inert navbar Typical of many sites, this imagemap navigational device is a legacy from earlier browsers and gives very little visual feedback.

Static navbar By splitting the buttons up into separate units, it is easy to swap them appropriately on a page by page basis and here, it is obvious that we are at the 'services' page. Note that the status bar messages have been made more meaningful too. This solution should work in most browsers.

Rollover The ubiquitous JavaScript rollover is purely cosmetic here and it is confusing because it suggests that 'services' is as valid as the other choices. If we are actually at the 'services' page, this is clearly nonsense.

Latched Rollover  Radio buttons 'latch' - the last one pushed stays down until another choice is made. This highlights the current choice and also shows that it is not a valid selection at this time. The rollover effect is subtle and more in proportion to its functionality.

Originally published on HighFive.com

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