0
Effective Web   Navigation       Design     Multimedia Design
Instructional Goals•   Understand basic principles of good    navigation design in web sites•   Apply basic principles of ...
“Navigation menu is the most signi cant and the most importantelement in web design”
If people cannot navigate through your site, they will quickly leave.Designing effective navigation on website is crucial. ...
1. Information ArchitectureBefore you start to plan your navigation, you need to de ne your site’sinformation architecture...
2. OrganizationOnce youve determined your site architecture, you need to decidehow to organize it. You might have it all l...
3. Navigation DesignOnce you have an idea of the architecture and organization, youreready to think about the design of th...
UnderstandableIf you want to use images for your navigation, make sure that there issome text associated with them. " Myst...
More recent trends in                                                                          navigation design.3-D Navig...
Blue Door BabyThe Blue Door Baby navigation bar is styled like a ribbon that islaid over top of the feature area. The menu...
Mystery TinThe Mystery Tin navigation menu is arranged vertically. Theactive menu item has a background that wraps around ...
Speech BaloonsDesigning menu items in the shape of speech balloons, or speech bubbles,appears to be another popular trend....
Bush TheatreBush Theatre uses thought bubbles instead of speech balloons,which in comic books denote the subject’s thought...
Kingpin SocialKingpin Social’s primary navigation menu is hard to miss, with itsbig size, rounded corners and copious padd...
Rounded CornersRounded corners are often used to soften sharp rectangles. The trend hascarried over from call to action bu...
MetaLabRounded corners with graphic icons to the left are featured in thispopular website’s menu bar.gugafitgugafit’s navi...
VistracVistrac’s rounded buttons can only be seen in modern versions of Webbrowsers such as Firefox, Safari, Google Chrome...
Icons in NavigationOver a year ago, we noted that visually appealing icons are increasingly being used, and thistrend has ...
SourcebitsSourcebits uses small icons for its menu and sub-menu items.They add intricacy to the navigation.Duarte PiresThi...
JavaScript AnimationWith JavaScript frameworks making it easier for Web designers to createanimated page elements using ju...
Utah.travelThe items in Utah.travel’s vertical navigation menu pop out to theright when hovered over. Sub-menu items revea...
RUDEWORKSThe beauty of RUDEWORKS’ navigation menu is its simplicity.Noticing it at first glance may be difficult because o...
Unusual ShapesBecause most websites have straight edges and sharp corners, irregular shapes give youa chance to break from...
HTOHTO’s navigation bar is a strip of aged paper angled down andclipped to the background photograph.smriyaz.comsmiriyaz.c...
Think UpThink Up’s menu items are crumpled post-it notes, and thenavigation follows the tabbed navigation user interface d...
Custom Tshirts UKThe navigation items on this website are flare buttons pinned tothe corner of a t-shirt background.
Experimental SolutionsAlthough it’s usually not the best idea to come up with some strange and/or uniquesite navigation, d...
Playground Blues tries out somethingcompletely different; each of 12 sitesections has its color in the left sidebar.Once t...
Highly Usable NavigationAppleApple has one of the more exceptional websites, particularlybecause of the navigation layout....
Alex BugaVisitors here use a large and well-laid out slider to move through newsitems.Thibaud’s PortfolioAnother stunning ...
Handwriting in UseRecently we already discussed the hand-drawing style in modern web-design. And whatholds for design layo...
Vertical TabsAlthough traditional desktop-applications almost never make use of vertical tabs, in theoffice vertical tabs ar...
Reference:http://webdesign.about.com/cs/webnavigation/a/aaeffectivenav.htmcompile from some resource at smashingmagazine
Upcoming SlideShare
Loading in...5
×

Effective web navigation

1,576

Published on

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

Published in: Design, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,576
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
73
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Effective web navigation"

  1. 1. Effective Web Navigation Design Multimedia Design
  2. 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. 3. “Navigation menu is the most signi cant and the most importantelement in web design”
  4. 4. If people cannot navigate through your site, they will quickly leave.Designing effective navigation on website is crucial. But there are somebasic things you need to do before you can start worrying aboutrollovers or links, images or ash.
  5. 5. 1. Information ArchitectureBefore you start to plan your navigation, you need to de ne your site’sinformation architecture. Information architecture is the taxonomy orstructure of your Web site.Some common taxonomy elements on a corporate or businessWeb 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. 6. 2. OrganizationOnce youve determined your site architecture, you need to decidehow to organize it. You might have it all live in one directory, and justlink to the major pages from your front page. Or you might have allthe 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 youwould like to encourage your readers to use the site.
  7. 7. 3. Navigation DesignOnce you have an idea of the architecture and organization, youreready to think about the design of the navigation. There are severalthings 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 - dont 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. 8. UnderstandableIf you want to use images for your navigation, make sure that there issome text associated with them. " Mystery Meat Navigation" is theuse of non-descriptive images as navigation, and its much morecommon than you might think.PrevalentYour navigation should appear on every page of your site. Whileyou dont need to have identical navigation, the basic structureshould be the same throughout the site, with changes used onlyto indicate location within the hierarchy.
  9. 9. 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 iscommonly 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. 10. Blue Door BabyThe Blue Door Baby navigation bar is styled like a ribbon that islaid over top of the feature area. The menu items are text-imagereplacements that have a subtle inset-text effect.Sower of SeedsThe navigation bar on Sower of Seeds looks like it wraps aroundthe content area, making it stand out for the user.
  11. 11. Mystery TinThe Mystery Tin navigation menu is arranged vertically. Theactive menu item has a background that wraps around the side ofthe content area. Similarly, hovering over a menu item shows asmaller 3-D ribbon.
  12. 12. 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 theconventional 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. 13. 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 lookon Rob Alan’s website. The speech bubble opens a groove in themain content area, which visually connects them.
  14. 14. Kingpin SocialKingpin Social’s primary navigation menu is hard to miss, with itsbig size, rounded corners and copious padding. The active menuitem is highlighted with a speech balloon.GIANT CreativeBright colors against a dark background and a generous sizemakes GIANT Creative’s navigation stand out from the rest of thetext. Hovering over a menu item reveals the speech bubble’spointer.
  15. 15. Rounded CornersRounded corners are often used to soften sharp rectangles. The trend hascarried over from call to action buttons to menu items, whose appearance asbuttons is meant to entice users to click on them.BallparkBallpark’s navigation menu in the top-right uses CSS backgroundtext replacement to add round-cornered buttons to the text.New Look MediaNew Look Media’s blue navigation buttons are striking because ofthe dark background.
  16. 16. MetaLabRounded corners with graphic icons to the left are featured in thispopular website’s menu bar.gugafitgugafit’s navigation buttons change to green on hover. The activeitem is given a dark-blue pressed look.
  17. 17. VistracVistrac’s rounded buttons can only be seen in modern versions of Webbrowsers such as Firefox, Safari, Google Chrome and Opera because thedevelopers have implemented the working draft specifications of the CSS3 border-radius property. In other Web browsers (i.e. IE 8 and lower: thebrowser that’s hindering the progress of Web design), the menu itemsappear as normal rectangles.Viljami SalminenWeb designer Viljami Salimen gives the active items in hisnavigation menu a rounded button look.
  18. 18. Icons in NavigationOver a year ago, we noted that visually appealing icons are increasingly being used, and thistrend 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 asshort as possible, thus making the page as responsive as possible.mesonprojektKarl Francisco Fernandes’ portfolio has a hand-drawn-themed navigationmenu. Icons make the menu items more visual, giving the website adistinguished look.
  19. 19. SourcebitsSourcebits uses small icons for its menu and sub-menu items.They add intricacy to the navigation.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 thenavigation. Also, the menu on other pages uses the same iconsin a vertical layout, bringing consistency to the website. Theicons may not fit perfectly, but it’s a nice idea.
  20. 20. JavaScript AnimationWith JavaScript frameworks making it easier for Web designers to createanimated page elements using just a few lines of code, designers have beenusing JavaScript lately for more aesthetic than functional purposes.Andreas HinkelThe primary navigation of Andreas Hinkel is large and presentedas polaroids. When hovered over, the menu item rises.
  21. 21. Utah.travelThe items in Utah.travel’s vertical navigation menu pop out to theright when hovered over. Sub-menu items reveal a brochure mapin the background.Bert TimmermansBert Timmbermans’ portfolio website is laid out like a notebook,with the primary navigation menu designed like ribbonbookmarks. The menu has only icons; when you mouse over anitem, it animates to reveal the text.
  22. 22. RUDEWORKSThe beauty of RUDEWORKS’ navigation menu is its simplicity.Noticing it at first glance may be difficult because of the menu’slow contrast with the background. When a menu item is hoveredover, it fades to dark red.Dragon InteractiveDragon Interactive’s primary menu items smoothly transition to acolorful state when hovered over.
  23. 23. Unusual ShapesBecause most websites have straight edges and sharp corners, irregular shapes give youa chance to break from the norm. One current trend is to give menus an amorphousshape to make them really stick out.BoomaBooma has roughly sketched items in a random alignment for itsmain navigation, making it different from what you see on mostother websites.Inner Metro GreenThis menu bar has an irregular shape, contributing to the disorganizedgrunge theme of the website.
  24. 24. HTOHTO’s navigation bar is a strip of aged paper angled down andclipped to the background photograph.smriyaz.comsmiriyaz.com shuffles its primary menu items, and the text iswritten vertically.
  25. 25. Think UpThink Up’s menu items are crumpled post-it notes, and thenavigation follows the tabbed navigation user interface designpattern. Hovering over an item changes the color, and clicking onit brings it forward on the z-plane.f claire baxterThe menu items on this website stick out like bookmarks. Thevertically written text and the varied color and size all help thewebsite stand out.
  26. 26. Custom Tshirts UKThe navigation items on this website are flare buttons pinned tothe corner of a t-shirt background.
  27. 27. Experimental SolutionsAlthough it’s usually not the best idea to come up with some strange and/or uniquesite navigation, designers tend to risk crazy and uncommon experiments. When tryingout something new, make sure that you don’t put the usability of your site in danger bycreating unnecessary barriers for your visitors. Any navigation menu fails if users can’tmake 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. 28. Playground Blues tries out somethingcompletely different; each of 12 sitesections has its color in the left sidebar.Once the visitor hovers the mousearrow over the left-hand sidebar theicons pop up providing visitors withnavigation options. Title-attribute isused as well. And to make sure visitorsactually can find the navigation theicons pop out like harmonica first timethe 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. 29. Highly Usable NavigationAppleApple has one of the more exceptional websites, particularlybecause of the navigation layout. The Mac menu is quiteamazing. With images, it couldn’t be easier to find items andmove through the menu.CREASENSOThe content on the home page of this portfolio website has anextremely simple yet usable organization.
  30. 30. Alex BugaVisitors here use a large and well-laid out slider to move through newsitems.Thibaud’s PortfolioAnother stunning portfolio with creative navigation, this one withFlash-based “color samples” to choose from. Like items aregrouped together.
  31. 31. Handwriting in UseRecently we already discussed the hand-drawing style in modern web-design. And whatholds for design layouts also holds for its speci c elements — for instance, for navigation.
  32. 32. Vertical TabsAlthough traditional desktop-applications almost never make use of vertical tabs, in theoffice vertical tabs are used at least as often as horizontal ones. In fact, designers often tryit out; and the results can be quite interesting.Before using vertical tabs you should make sure that it is possible within your layout andyou actually have enough area to cover all navigation options on every single page. And,of course, the text is harder to read.
  33. 33. Reference:http://webdesign.about.com/cs/webnavigation/a/aaeffectivenav.htmcompile from some resource at smashingmagazine
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×