Interface & Navigation
As you evaluate the content and nature of the site you plan to build, you should begin thinking about the Interface Design. The interface design will make your web site visually interesting (or ugly) and enjoyable (or irritating) to move around in.
"Interface" refers to how the pages look, and also how the pages work and interact with the viewer. Some aspects of the interface design are pre -determined by the nature of how web pages work: underlined words are always hypertext links that will send you to another page; the cursor changes to a hand when positioned over a hot link; the menus help you accomplish certain things.
Different browsers will sometimes display the same web page differently. Always look at your finished web pages in different browsers to see how they were interpreted. You may need to rearrange elements or rewrite code to make them work with different browsers.
The particular aspect of interface design that we're most concerned with as web designers is the navigation design, or the way people get around your site and understand where to go. The interface and the navigation are generally inseparable elements.
Make a simple plan
Good web site design begins with a good site plan. It doesn't have to be complicated. It can be a simple plan. Simple is better.
The first step in this plan is to make a list of the information to be included in the site. This list can be rough, as long as it gives you a general idea of what the content will include. Then make an outline based on this list and organize the information. This will serve as the basic structure of the site. You may later make changes in the outline, such as combining several topics into one, or splitting large topics into smaller, separate ones, but you need a basic framework from which to work and design.
Each main item in your outline should be a different page in your web site layout. Instead of an outline, you may prefer to make a rough sketch of a flowchart incorporating the same information. You can sketch a rough diagram of the site, using simple boxes to represent main sections, adding any notes in the margins that will help you visualize the site. Sketches will keep your vision of the site organized. An alternative is to use a graphic software to build a flowchart. We will be using Adobe Photoshop for this purpose.
Make a to-do list
After organizing the structure of the site visually, make a list of tasks necessary to assemble the content for the site. Here is an example of such tasks:
- Write copy for all sections
- Collect existing images
- Prepare list of 10-15 key words to submit to search engines
- Write 25-word description of the site
- Prepare list of desired site links
- Submit to search engines and related web sites
- Design structure and organization
- Try horizontal navigation bar vs. vertical navigation bar
- Design layout for main page and a typical secondary page
- Process all available images (optimize. retouch, convert to proper file format)
- Spellcheck all text files
- Set schedule for showing structure diagram and design ideas
Navigation Design
If you can easily find your way around a site and find your way back to the home page at any time from any page, the navigation is well designed. On the other hand, if the web site you've visited is vague in its presentation and organization of content and you get lost in the site, the navigation is poorly designed.
The focus of good navigation design is organization, not graphics. Although creative graphics can add to the aesthetic value of the navigation, your primary goal is to make it easy for visitors to find their way to and from any part of
the site.
As you explore the web, notice the different styles and techniques used for navigating pages. Some sites use simple text links, while others use graphical icons. These icons can be simple buttons with words on them or they can be custom illustrations. While the navigation system is a good design opportunity, your primary consideration is to ensure that navigating the site is easy and enjoyable. Whatever style you choose, "clear" and "simple" should be your goals.
Sometimes designers abandon the best solution - the most obvious one - simply because it is obvious and they want to be clever and original. Remember, in your goal to be creative and original, the most obvious solution is sometimes the best. Don't trade clear communication for unclear cleverness. If vou have to explain how to use your navigation system, it's wrong.
Navigation Styles
There are many styles of navigation: navigation buttons, navigation bars (usually a group of icons), tabs, plain text links, fancy animated graphics, and more. You can use illustrations, photographs, or graphic images. You might use an image map with different "hot spots" (invisible buttons) that link to other pages.
The primary navigation system to the main sections of your web site should be kept together in a compact package, either at the top of the page, the bottom, or off to the side. If you have a long, scrolling page, it's useful to place a navigation system at both the top and bottom of the page. A common variation to this approach is to place the fancy graphic version of the navigation system at the top of the page, and a simple, all-text version of the links at the bottom of the page.
Many sites have beautiful graphical navigation buttons, and there is also an all-text version of the same buttons. That's because some people browse with the graphics turned off and the text links allow them to still see and use the links. Some people use very old browsers that can't display image maps, or old modems that make downloading graphics painfully slow, so they turn off the graphics. Even with graphics on, a visitor can click the fast-loading text link without waiting for the entire graphic to download. It is important to create text links that match the graphic links, and provide an alternate label, which is a text-description of the graphic image.
Repetition
Repetition and consistency of the navigation elements from page to page are important. If a visitor sees the same navigation system on every page, it adds a comfort level of familiarity and orientation. If visitors have to search for the buttons on every page, or if the links have different words, techniques, or icons, they get annoyed.
Where are you?
A good navigation system gives visitors a clue as to what page they are currently on. This can be as simple as unlinking the text link on that page so it's neither underlined nor in the link color. If you use graphic icons in your navigation bar, create a visual clue in the graphic. A common technique is to fade the icon for that page into a shadow (and unlink it). Some people do just the opposite. The icon for the page you are on might be the only one that is not a shadow. You might have a triangle pointing to the icon representing the visible page, or a small symbol next to it, or a checkmark. It doesn't need to be obtrusive, but it does need to be clear. Things don't have to be big to be clear.
Selective Linking
Generally speaking, most sites contain two types of links: internal, or local, links (those that connect to another part of your own site) and external, or remote, links (those that connect to someone else's site). Even though it's possible to create a site without external links, you'll benefit from having them. External links can enhance the content of your own site without you having to do the work.
Unfortunately, it's easy to get carried away with linking anywhere and everywhere, only to realize later that you've created a page (or a site) that offers so many external links that it damages the readability of your own content. Also, too many links in body copy make the reader feel anxious, afraid they're missing something if they don't follow the link.
Keep in mind that reading text on a monitor is more tedious than reading text on a page and the distraction of colored, underlined hypertext links doesn't help any. As a visitor is reading along, out of the corner of their eye they see a bright blue, underlined word that seems to be screaming "CLICK HERE! READ THIS! NOW!" What have you done? First, you distracted the reader's attention; then you invited them to leave your site completely, hoping they find their way back after they follow the link you supplied. If the link is external at least have it open up in a separate window so your site stays on the screen. (How to do this will be covered later).
Don't make irritating links!
It's possible to create links that irritate your readers: Check your links often to make sure they still work. External links are often broken because the other site addresses change or shut down. Make a link worth jumping to. Avoid giving the reader a link just because you can. It's very annoying to leave what you're reading to follow a link and have it go to some barely relevant page.