A Slideshow for Some lecturer of Web Design at International Design School, Jakarta. Compile from many resources, include smashingmagazine.com

1. Effective Web
Navigation
Design
Multimedia Design

2. 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

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

4. 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.

5. 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

6. 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.

7. 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:
Accessible
The 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.
Meaningful
Keep 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.

8. Understandable
If 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.
Prevalent
Your 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.

9. More recent trends in
navigation design.
3-D Navigation
Lately, 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.
Delibar
The 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.

10. Blue Door Baby
The 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 Seeds
The navigation bar on Sower of Seeds looks like it wraps around
the content area, making it stand out for the user.

11. Mystery Tin
The 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.

12. Speech Baloons
Designing 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.
Alexarts
Alexarts 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.

13. Bush Theatre
Bush Theatre uses thought bubbles instead of speech balloons,
which in comic books denote the subject’s thoughts.
Rob Alan
Irregularly 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.

14. Kingpin Social
Kingpin 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 Creative
Bright 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.

15. Rounded Corners
Rounded 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.
Ballpark
Ballpark’s navigation menu in the top-right uses CSS background
text replacement to add round-cornered buttons to the text.
New Look Media
New Look Media’s blue navigation buttons are striking because of
the dark background.

16. MetaLab
Rounded corners with graphic icons to the left are featured in this
popular website’s menu bar.
gugafit
gugafit’s navigation buttons change to green on hover. The active
item is given a dark-blue pressed look.

17. Vistrac
Vistrac’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 Salminen
Web designer Viljami Salimen gives the active items in his
navigation menu a rounded button look.

18. 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.
mesonprojekt
Karl Francisco Fernandes’ portfolio has a hand-drawn-themed navigation
menu. Icons make the menu items more visual, giving the website a
distinguished look.

19. Sourcebits
Sourcebits uses small icons for its menu and sub-menu items.
They add intricacy to the navigation.
Duarte Pires
This 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.

20. JavaScript Animation
With 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 Hinkel
The primary navigation of Andreas Hinkel is large and presented
as polaroids. When hovered over, the menu item rises.

21. Utah.travel
The 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.
Bert Timmermans
Bert 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.

22. RUDEWORKS
The 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.
Dragon Interactive
Dragon Interactive’s primary menu items smoothly transition to a
colorful state when hovered over.

23. Unusual Shapes
Because 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.
Booma
Booma 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 Green
This menu bar has an irregular shape, contributing to the disorganized
grunge theme of the website.

24. HTO
HTO’s navigation bar is a strip of aged paper angled down and
clipped to the background photograph.
smriyaz.com
smiriyaz.com shuffles its primary menu items, and the text is
written vertically.

25. Think Up
Think 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.
f claire baxter
The 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.

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

27. Experimental Solutions
Although 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.

28. 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.
Cobahair.co.uk uses only BIG
typography…

29. Highly Usable Navigation
Apple
Apple 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.
CREASENSO
The content on the home page of this portfolio website has an
extremely simple yet usable organization.

30. Alex Buga
Visitors here use a large and well-laid out slider to move through news
items.
Thibaud’s Portfolio
Another stunning portfolio with creative navigation, this one with
Flash-based “color samples” to choose from. Like items are
grouped together.

31. 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.

32. Vertical Tabs
Although 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.

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