Icons

When designing images to aid in the navigation of your web site, it is important to consider the relationship between the contents of the picture and the function of the image. Icons are typically small graphics that represent a concept, place, or thing. Icons are often used to help inform the user. When creating icons use appropriate metaphors, which help the viewer establish mental associations that aid in the understanding of the interface. For example, it is common to see iconic images of doors representing the ability to enter or exit an environment. If the metaphors used are not easily recognizable it may be helpful to add text to help clarify the function of the image. Not all icons have to be intuitive. In an exploratory interface, you may want the user to discover the meaning of the icon by clicking on it.

Imagemaps

Imagemaps are images that have specific areas of the picture designated to be clickable. The clickable areas can be rectangular, polygonal, or oval in shape. It is also possible to specify points on the image to be hot spots. When the user clicks the image, the browser will jump to the URL of the closest point. Imagemaps have been used extensively in navigational systems. A common use is the creation of a navigation bar. By placing all your navigation buttons together, the user can quickly find their way through your pages without having to search for the buttons. Also, placing all your icons together in a navigation bar forces you to address the issue of graphic uniformity. Regardless of whether the icons are merged together in a navigation bar or placed separately on the page, you should establish a uniform size and color scheme. Imagemaps can also be used as structure maps, and exploratory environments. When creating intuitive imagemaps, it is important to visually indicate where the user should click. Exploratory imagemaps may also contain clues as to where to click, but the outcome of the selection may not be explicitly stated.

Linked Graphics

When designating an image as a clickable item, the designer may specify whether or not the image should have a border. Borders are visual cues used by the browser to indicate links. If you decide to keep the border, factor it into the design. A border is usually two pixels wide with and the same color specified for vlinks or links (links that have and have not been traversed). If you choose not to use a border, there are a number of other tricks you can use to indicate it is a clickable image. The most common method is to construct beveled edge around the graphic. Another way to indicate a clickable graphic is to have a short text caption near it.

Placement of Navigational Graphics

Often icons or imagemaps that jump to the next page are placed near the bottom of the page, except for on the first page, where you will want to boldly present the navigational choices. On most pages, the navigational devices should not overpower the content of the page. Also, there are times when you will want to put the navigational buttons on the top rather than the bottom. For example, the ChainReaction WWW project is a highly complex site with over 1000 pages. We discovered that one of the first things a user should see when searching for an empty page for their images was an overview of the structure of the image development. Therefore we moved the icon that linked to the structure map to the top of the page where it could be easily found.

Don’t Forget the User

There has been considerable research done in the field of user interface development. Efforts have been made to construct interfaces that more closely resemble our natural ways of working. When you construct HTML pages, be aware of how the user will interact with it. For example, I have had students that have experimented with the placement of navigational icons. On every page, the "go to next page" icon was located in a different place. If there was a pattern to the placement of the icon from page to page, the user was more apt to adapt to the situation. It the placement appeared to be random, the user became frustrated and the act of searching for the button from page to page disrupted the continuity of the content. It is important that your WWW document is usable and does not frustrate the viewer (unless of course, that is your intent).

Previous page : main page of chapter 3

Next page : Enhancing Interaction through New Technologies