DESIGN Design Introduction Planning Tools and Resources Bibliography of Online Resources Learning Styles Design Realities Visual Design and Colour Navigation Design Technology Toolbox Monitor Size Speed Comparison Design Focus and Evaluation Design Checklist

Design - Navigation Design

Website research indicates that visitors often use websites in ways that the website developer never intended. While you may have a vision for how you want your visitor to move through your website, statistics tell us that visitors often enter a website in the middle of the design, they often jump from page to page without following the menu bar in the specified order, and they only visit a few pages on each website. Good navigation and design principles are demonstrated in the following Canadian museum website examples.

Usability: Navigation and site structure

What is usability? According to Tom Brink, contributor to Usability for the Web, "Usability is defined as the degree to which people (users) can perform a set of required tasks." It is the product of several sometimes conflicting, design goals. Usability requires that a website or web page:

• functions correctly
• is efficient to use and easy to navigate
• the URL is simple to type and/or find
• is error tolerant for the visitor
• be subjectively pleasing to the visitor
• be self-evident: visitors to the website should not have to ask, "where am I, where should I begin, or how can I move on to the next page?"

Site Structure

Visitors tend to linger only for a few minutes to glance, scan and make sense of website content. Using generally accepted website conventions can make a visitor feel more comfortable. This, in turn, encourages them to browse longer and interact more. Here are a few points to consider:

Page Names

What will you name your web pages or activities? Always provide visitors with logical and familiar categories. For example, 'Contact Us' has become a standard website term that provides information on how a visitor can contact the website host. Here are more examples of naming conventions that work well for museum applications:
Canadian Museum of Contemporary Photography
National Gallery of Canada

Choices

Providing many choices or menu options is not always a good thing in website design. Generally speaking, a successful website will follow the old adage that 'less is more.' Limiting the layers of information and the number of 'clicks' that a visitor has to make to find their way home will improve usability and visitor comfort. Look at these examples of pull-down and sidebar menu options:
Manitoba Museum of Nature
Fort Selkirk, Virtual Museum of Canada

Icons

Icons can be used very effectively in websites. They become integral design and navigational elements and provide support for visitors with accessibility issues. However, not all icons are universal, meaning that some icons represent different things to different people, so context is essential. Words and icons often support each other, as with these examples of museum websites who use icons as navigation tools:
Canadian Museum of Civilization
Beringia Centre

Interactive Tools

Many new websites feature tools that visitors find friendly and useful and that museums find valuable and cost effective. While trends will change as technology develops, the following examples illustrate standard tools in website design:

Feedback

Providing opportunities for a visitor to send feedback to a museum is easy, inclusive, and valuable for both the visitor and the museum. Methods to encourage feedback can be as simple as sharing staff e-mail addresses, hosting a guest book, or providing a feedback form:
Kings Landing Museum
Calgary Zoo

Clickable links

Using clickable items to share information and move onto new subjects is becoming standard practice in new website design, but what do clickable items look like? Do they look like a button or link, are they consistent throughout the website, and do your visitors know that items are clickable? Visit these sites to compare clickable link design styles:
Royal Botanical Gardens
Alberta Aviation Museum

Pop-ups

Pop-ups are pieces of information that 'pop-up' from the main body of text to provide additional information or printable pages. This design element can have very effective applications for educational websites. Take a look at these examples to consider if pop-ups would be appropriate tool for your website:
BC Forest Museum
Ontario Science Centre

Rollovers

A rollover is a design element that allows a piece of information or colour to pop-up or change when a visitor clicks, points the scroll bar, or rolls the cursor over a designated point on the monitor. A simple example of a rollover is when a menu item changes colour to indicate where you are in a website. Roll-overs can be written into HTML, JavaScript code, or integrated with Flash technology. Images sometimes have mouse-overs, where textual information pops up if you roll your mouse over an image. Here are some creative uses of rollovers and mouse-overs:
Vancouver Aquarium
Saskatoon Zoo

Language and Glossaries

Language translation can be essential for websites that serve multilingual audiences. Visit this site to see how language can be shared with visitors in textual formats. Glossaries of terms or translations can be effective tools for teachers and students. This example includes a glossary to define words and terms:
Acadian Museum

Consistency

Consistency is an essential feature to support visitor comfort and ease. Is the design layout and colour palette consistent from page to page? Is technology used in the same way on each page? Visit these websites to see how navigation consistency plays a role in supporting design elements throughout the website:
Edmonton Art Gallery
Bata Shoe Museum

Use what is familiar

Website visitors have become familiar with certain design conventions and navigation tools such as breadcrumbs, arrows and tabs. Using recognizable conventions in a design not only makes visitors feel comfortable and confident with a navigation plan, it allows them to move through the site to explore the content instead of the layout. Review these websites for navigation tools that feel comfortable and familiar:
Glenbow Museum
Vancouver Maritime