Interface and Navigation

Let’s have a navigation “experience” together

http://www.rybdesign.com.ar/
Can you figure out how to make the floating island travel up and down the screen?

Here's another good example (very confusing!):
http://www.boink.com/

Understandable Interface

http://www.wildbillssoda.com/index.aspx
This site demonstrates strong use of metaphor. Does this technique increase audience participation or interest?

http://www.obonamy.com/
Metaphor for a designer's desk space.

http://www.taptaptap.com/
Here's an interesting design and metaphor! Is this a sushi menu metaphor for i-phone apps?

http://bootb.com/en/
Appropriate interface? Nice atmosphere but is this well-designed?

Interface with "atmosphere"
http://www.nationalgeographic.com/congotrek/

Confusing or Innovative Interface?

http://www.jonespartners.com/
It's hard to understand what you're supposed to do with this one! Go into the subpages and see how you fare.

http://www.wherever.com/flash/MEDIUM/interface.htm
Confusing?!!

http://www.torchia.com/
How do you feel about the moving grid? Can you comfortably click on the navigation buttons and view other pages?

http://www.chromazone-imaging.co.uk/flashindex.html
Is this navigation system (if you can call it that!) innovative or confusing? It's not fun to chase moving shapes...

http://www.once-upon-a-forest.com/l
It's hard to read what to click on here

Clear Consistent Navigation

http://www.zdnet.com/
Is the navigation at this site clear and consistent? Notice how they use color to separate navigation elements into different groups.

http://www.blkbx.com/
Very rudimentary navigation. Does it feel like some navigation elements are missing? Is it easy to get back to the home page?

Different hierarchy of navigation is clearly defined.
http://www.eddiebauer.com/
How effective is this site's navigation? Look at the quicklinks at the bottom... very effective.

http://www.fernandoroda.pt/
Even in a foreign language, this site's navigation hierarchy is very clear.

http://www.speckcommunications.com/
This site uses rollovers to make the navigation links very clear.

Poor or Confusing Navigation

http://www.kilimanjaro.com/
This site wants to make absolutely sure you have your choice of links to the same pages. Are these duplicate links confusing or helpful?

http://www.divingcharters.com/
Help! What do I click on? This breaks both the "excessive number of links" and the "scattered navigation" guidelines!

http://www.wig-01.com/
The navigation on this site is a little unclear particularly if you end up in the "view our books." What do you think?

http://directfromtv.com/
What do you think of the navigation at this site? Are there too many links? I'm almost afraid to click!

http://www.goblincreative.com/en/
This Flash site is creative but I'm confused...

Different Approaches to Navigation

Use of drop down menus (that can be expanded) to show subcategories (You have to click on the navigation buttons to expand to see the subnavigation-- or click the Expand All!)
http://www.recourses.com/

There are two different columns for navigation and subnavigation at this site. Does this work?
http://www.particlefactory.com/logos/index.html

Site done entirely in Flash: Flash allows for a lot of innovation. Will users find this navigation scheme amusing or annoying?!
http://www.in2ideas.com/#/home

Flash navigation
http://www.atelierlusk.com/
This site is done in Flash. Can you figure out how to access the content at this site?!

Rollover down menus
http://www.saabusa.com/
Rollover menus on the top navigation buttons can provide very quick access to other areas of the site without taking up much screen real estate.

Notable Navigation!

Innovative typography for navigation buttons
http://www.kutztown.edu/acad/commdes/

Notable angled navigation bar.
http://css-tricks.com/examples/WebsiteGalleryRoundup/

The icons in this site's navigation bar feature visually-interesting animation.
http://www.blackdogconstruction.com/

Does this navigation bar add some visual interest to this site?
http://www.wildriverrock.com/index.htm

This site's navigation is simple and clear.
http://grantwiant.com/#home

Interesting angle and highlight on these navigation buttons!
http://www.leapfrogventuresinc.com/

Navigational Aids (site maps, search, table of contents)

http://www.iomega.com/na/landing.jsp
Which navigational aids can you see? (Search, site map etc.)

http://www.united.com/
Any navigational aids here?

Sites with info pertaining to class topics

Spotlight on Navigation
http://webdesign.about.com/cs/webnavigation/
Links to articles with tips on navigation

Thumbnails and links to sites that use interesting navigation
http://www.coolhomepages.com/
Select Nav Bars from the category menu.

Article on navigation
http://alistapart.com/articles/whereami

Photoshop Slicing Tutorial
http://www.entheosweb.com/photoshop/slice.asp
Slicing images in ImageReady/Photoshop. This could be helpful in creating nav. bars.