Week 4 Page 8: Some Final Navigation Tips
Here's the bottom line... your navigation needs to be:
simple, consistent and clear
Users need to know immediately where to click and what they're clicking on. Obscure labeling is creative but can be very annoying to users.
- Identify buttons with meaningful labels
- Don't provide cute little icons or acronyms without any text to support them
Navigation Examples:
How successful are the following two home pages at providing meaningful navigation and identifying buttons? Which one does a better job of telling you exactly what the button is for?!
Example #1:
Link to archived SparkPlug site:
Example #2:
-
http://strategiccreativeservices.com/
Links to an external site.
Note: This links to a screen shot of the original version of the above site (which is now no longer in existence). Perhaps too many people were confused by the navigation labels!!
Do you have any idea what Monkey's Paw, Reward, Chemistry actually mean?
Using Animation and Rollovers in Navigation
Subtle animation or rollovers can be an excellent method of creating navigation particularly if you want to save precious screen real estate. Use animation or rollovers to suggest to users how they should interact with the navigation. (Keep in mind that i-pad and some other mobile device users can't view Flash sites!)
At the following site, the navigation labels are highlighted when you roll over them. The user knows exactly what to do.
The following site is done entirely in Flash. Flash allows for a lot of innovation (but can't be viewed on an i-pad!). Can you figure out what to do at this site or how to get back to the main menu? (Note: this is an archived version of the site.)
Is the site below easy to navigate? Do you know where you are and can you find what you need? Is it clear what the purpose of this site is?! Have fun!!
-
http://www.designoftoday.com/#
Links to an external site.
This is an archived version. Here is the new version (I guess they got the message! http://www.designoftoday.com/ Links to an external site.)
Navigation Inspiration!
Check out these two sites if you're looking for navigation inspiration!