Effective Web Navigation DesignMultimedia Design

Instructional Goals• Understand basic principles of good

navigation design in web sites

• Apply basic principles of good navigation design in designing websites to achieve usability and accessibility

• Understand some navigation design trends in current websites

“Navigation menu is the most signi!cant and the most important element in web design”

If people cannot navigate through your site, they will quickly leave.Designing effective navigation on website is crucial. But there are some basic things you need to do before you can start worrying about rollovers or links, images or "ash.

1. Information Architecture

Before you start to plan your navigation, you need to de#ne your site’s information architecture. Information architecture is the taxonomy or structure of your Web site.

Some common taxonomy elements on a corporate or business Web page are:

• Products - the products or services the company sells • About - information about the company • Investor Relations - information speci#c to investors • Support - help for customers

2. Organization

Once you've determined your site architecture, you need to decide how to organize it. You might have it all live in one directory, and just link to the major pages from your front page. Or you might have all the sub-pages separated into directories.

You should think about how your customers might wander through it. Flow charts and storyboards can help you map out exactly how you would like to encourage your readers to use the site.

3. Navigation Design

Once you have an idea of the architecture and organization, you're ready to think about the design of the navigation. There are several things you should consider in deciding on your navigation design:

AccessibleThe navigation of your site is possibly the most important part of any given page. So it should be as accessible as you can make it. This means avoiding special effects like Flash, Java, or JavaScript as your only navigation method.

MeaningfulKeep your navigation meaningful. Make the links clear - don't try to get cute or use terms that are internal to your organization. Someone who has never been to your site before should know immediately where the link will take them.

UnderstandableIf you want to use images for your navigation, make sure that there is some text associated with them. " Mystery Meat Navigation" is the use of non-descriptive images as navigation, and it's much more common than you might think.

PrevalentYour navigation should appear on every page of your site. While you don't need to have identical navigation, the basic structure should be the same throughout the site, with changes used only to indicate location within the hierarchy.

More recent trends in navigation design.

3-D NavigationLately, we’ve seen a trend towards design elements that sit on a higher z-plane; that is, they appear closer than other elements on the page. This trend is commonly applied, no surprise, to navigation menus.

DelibarThe content area on the Delibar website looks like a pile of two pieces of paper, with the navigation items holding them together. It also features a subtle JavaScript effect that smoothly moves them up when you hover over them.

Blue Door BabyThe Blue Door Baby navigation bar is styled like a ribbon that is laid over top of the feature area. The menu items are text-image replacements that have a subtle inset-text effect.

Sower of SeedsThe navigation bar on Sower of Seeds looks like it wraps around the content area, making it stand out for the user.

Mystery TinThe Mystery Tin navigation menu is arranged vertically. The active menu item has a background that wraps around the side of the content area. Similarly, hovering over a menu item shows a smaller 3-D ribbon.

Speech BaloonsDesigning menu items in the shape of speech balloons, or speech bubbles, appears to be another popular trend. It’s a great way to break out of the conventional rectangular menu.

AlexartsAlexarts features a background of a city waterfront. Navigation menu items are in large speech bubbles that point to different elements of the scene. Hovering over a navigation bubble propels it slightly upward, a subtle indication that it is interactive and is the current target.

Bush TheatreBush Theatre uses thought bubbles instead of speech balloons, which in comic books denote the subject’s thoughts.

Rob AlanIrregularly shaped speech balloons make for a distinguished look on Rob Alan’s website. The speech bubble opens a groove in the main content area, which visually connects them.

Kingpin SocialKingpin Social’s primary navigation menu is hard to miss, with its big size, rounded corners and copious padding. The active menu item is highlighted with a speech balloon.

GIANT CreativeBright colors against a dark background and a generous size makes GIANT Creative’s navigation stand out from the rest of the text. Hovering over a menu item reveals the speech bubble’s pointer.

Rounded CornersRounded corners are often used to soften sharp rectangles. The trend has carried over from call to action buttons to menu items, whose appearance as buttons is meant to entice users to click on them.

BallparkBallpark’s navigation menu in the top-right uses CSS background text replacement to add round-cornered buttons to the text.

New Look MediaNew Look Media’s blue navigation buttons are striking because of the dark background.

MetaLabRounded corners with graphic icons to the left are featured in this popular website’s menu bar.

gugafitgugafit’s navigation buttons change to green on hover. The active item is given a dark-blue pressed look.

VistracVistrac’s rounded buttons can only be seen in modern versions of Web browsers such as Firefox, Safari, Google Chrome and Opera because the developers have implemented the working draft specifications of the CSS 3 border-radius property. In other Web browsers (i.e. IE 8 and lower: the browser that’s hindering the progress of Web design), the menu items appear as normal rectangles.

Viljami SalminenWeb designer Viljami Salimen gives the active items in his navigation menu a rounded button look.

Icons in Navigation

Over a year ago, we noted that visually appealing icons are increasingly being used, and this trend has continued. Icons not only are eye candy but help create visual recognition for users. Having said that, one should keep in mind that it’s always important to keep the loading time as short as possible, thus making the page as responsive as possible.

mesonprojektKarl Francisco Fernandes’ portfolio has a hand-drawn-themed navigation menu. Icons make the menu items more visual, giving the website a distinguished look.

Duarte PiresThis menu is located close to the content, where it is easy to use. It uses large icons, which adds a visual element to the navigation. Also, the menu on other pages uses the same icons in a vertical layout, bringing consistency to the website. The icons may not fit perfectly, but it’s a nice idea.

SourcebitsSourcebits uses small icons for its menu and sub-menu items. They add intricacy to the navigation.

JavaScript AnimationWith JavaScript frameworks making it easier for Web designers to create animated page elements using just a few lines of code, designers have been using JavaScript lately for more aesthetic than functional purposes.

Andreas HinkelThe primary navigation of Andreas Hinkel is large and presented as polaroids. When hovered over, the menu item rises.

Bert TimmermansBert Timmbermans’ portfolio website is laid out like a notebook, with the primary navigation menu designed like ribbon bookmarks. The menu has only icons; when you mouse over an item, it animates to reveal the text.

Utah.travelThe items in Utah.travel’s vertical navigation menu pop out to the right when hovered over. Sub-menu items reveal a brochure map in the background.

Dragon InteractiveDragon Interactive’s primary menu items smoothly transition to a colorful state when hovered over.

RUDEWORKSThe beauty of RUDEWORKS’ navigation menu is its simplicity. Noticing it at first glance may be difficult because of the menu’s low contrast with the background. When a menu item is hovered over, it fades to dark red.

Unusual ShapesBecause most websites have straight edges and sharp corners, irregular shapes give you a chance to break from the norm. One current trend is to give menus an amorphous shape to make them really stick out.

BoomaBooma has roughly sketched items in a random alignment for its main navigation, making it different from what you see on most other websites.

Inner Metro GreenThis menu bar has an irregular shape, contributing to the disorganized grunge theme of the website.

smriyaz.comsmiriyaz.com shuffles its primary menu items, and the text is written vertically.

HTOHTO’s navigation bar is a strip of aged paper angled down and clipped to the background photograph.

f claire baxterThe menu items on this website stick out like bookmarks. The vertically written text and the varied color and size all help the website stand out.

Think UpThink Up’s menu items are crumpled post-it notes, and the navigation follows the tabbed navigation user interface design pattern. Hovering over an item changes the color, and clicking on it brings it forward on the z-plane.

Custom Tshirts UKThe navigation items on this website are flare buttons pinned to the corner of a t-shirt background.

Experimental SolutionsAlthough it’s usually not the best idea to come up with some strange and/or unique site navigation, designers tend to risk crazy and uncommon experiments. When trying out something new, make sure that you don’t put the usability of your site in danger by creating unnecessary barriers for your visitors. Any navigation menu fails if users can’t make sense out of it.

Steven Holl is an architect. Which is why his navigation menu looks like an architectural sketch. Each navigation option is given some weight in the map — apparently according to its weight on the site.

Cobahair.co.uk uses only BIG typography…

Playground Blues tries out something completely different; each of 12 site sections has its color in the left sidebar. Once the visitor hovers the mouse arrow over the left-hand sidebar the icons pop up providing visitors with navigation options. Title-attribute is used as well. And to make sure visitors actually can find the navigation the icons pop out like harmonica first time the page is loaded.

Flash-based 3D-effect used on Gol.com.pl. The menu can also be expanded.

Highly Usable Navigation

AppleApple has one of the more exceptional websites, particularly because of the navigation layout. The Mac menu is quite amazing. With images, it couldn’t be easier to find items and move through the menu.

CREASENSOThe content on the home page of this portfolio website has an extremely simple yet usable organization.

Thibaud’s PortfolioAnother stunning portfolio with creative navigation, this one with Flash-based “color samples” to choose from. Like items are grouped together.

Alex BugaVisitors here use a large and well-laid out slider to move through news items.

Handwriting in Use

Recently we already discussed the hand-drawing style in modern web-design. And what holds for design layouts also holds for its speci#c elements — for instance, for navigation.

Vertical TabsAlthough traditional desktop-applications almost never make use of vertical tabs, in the office vertical tabs are used at least as often as horizontal ones. In fact, designers often try it out; and the results can be quite interesting.

Before using vertical tabs you should make sure that it is possible within your layout and you actually have enough area to cover all navigation options on every single page. And, of course, the text is harder to read.

Reference:http://webdesign.about.com/cs/webnavigation/a/aaeffectivenav.htmcompile from some resource at smashingmagazine