Navigation and Menus Will Oakley Information Architecture and Design I October 5, 2006.
-
Upload
dylan-hart -
Category
Documents
-
view
217 -
download
2
description
Transcript of Navigation and Menus Will Oakley Information Architecture and Design I October 5, 2006.
![Page 1: Navigation and Menus Will Oakley Information Architecture and Design I October 5, 2006.](https://reader035.fdocuments.us/reader035/viewer/2022070605/5a4d1acd7f8b9ab0599702b0/html5/thumbnails/1.jpg)
Navigation and Menus
Will OakleyInformation Architecture and
Design IOctober 5, 2006
![Page 2: Navigation and Menus Will Oakley Information Architecture and Design I October 5, 2006.](https://reader035.fdocuments.us/reader035/viewer/2022070605/5a4d1acd7f8b9ab0599702b0/html5/thumbnails/2.jpg)
What are we going to cover?
The reasons for having strong navigation systemsEmbedded Navigation SystemThe Browser: Your Navigation Pal!Supplemental Navigation SystemsNavigation Dos and Don’ts
![Page 3: Navigation and Menus Will Oakley Information Architecture and Design I October 5, 2006.](https://reader035.fdocuments.us/reader035/viewer/2022070605/5a4d1acd7f8b9ab0599702b0/html5/thumbnails/3.jpg)
What is Navigation?
Navigation: n 1. The act or process of navigating. 2. The art or science of plotting, ascertaining, or directing the course of a ship, aircraft, spacecraft, etc.
– Random House Webster’s College Dictionary
![Page 4: Navigation and Menus Will Oakley Information Architecture and Design I October 5, 2006.](https://reader035.fdocuments.us/reader035/viewer/2022070605/5a4d1acd7f8b9ab0599702b0/html5/thumbnails/4.jpg)
What is Navigation?
“Knowing your [rear end] from a hole in the ground.”
– My Mom (quote edited for content)
![Page 5: Navigation and Menus Will Oakley Information Architecture and Design I October 5, 2006.](https://reader035.fdocuments.us/reader035/viewer/2022070605/5a4d1acd7f8b9ab0599702b0/html5/thumbnails/5.jpg)
What is Navigation?
“Knowing your [rear end] from a hole in the ground.”
– My Mom (quote edited for content)
“…and being able to move the former to the latter without getting lost.”
![Page 6: Navigation and Menus Will Oakley Information Architecture and Design I October 5, 2006.](https://reader035.fdocuments.us/reader035/viewer/2022070605/5a4d1acd7f8b9ab0599702b0/html5/thumbnails/6.jpg)
What’s the fuss?
Navigation on the Web must contend with problems that don’t exist in the physical world:
• No sense of scale• No sense of direction• No sense of location
– Krug 57
![Page 7: Navigation and Menus Will Oakley Information Architecture and Design I October 5, 2006.](https://reader035.fdocuments.us/reader035/viewer/2022070605/5a4d1acd7f8b9ab0599702b0/html5/thumbnails/7.jpg)
Lost in HyperspaceKrug speculates that without physical clues, Web users are constantly having to reorientate themselves.“Navigation isn’t just a feature of a Web site; it is the Web site, in the same way that the building, the shelves, and the cash registers are Sears. Without it, there’s no there there.”
– Krug 59
![Page 8: Navigation and Menus Will Oakley Information Architecture and Design I October 5, 2006.](https://reader035.fdocuments.us/reader035/viewer/2022070605/5a4d1acd7f8b9ab0599702b0/html5/thumbnails/8.jpg)
How Navigation Serves the User
Tells us where we arePoints us toward what we’re looking forGives the sense of being groundedIt informs us of what is availableProvides clues on how to use the siteGives users confidence in site creators
– Krug 59-60
![Page 9: Navigation and Menus Will Oakley Information Architecture and Design I October 5, 2006.](https://reader035.fdocuments.us/reader035/viewer/2022070605/5a4d1acd7f8b9ab0599702b0/html5/thumbnails/9.jpg)
Will’s Obligatory Wife Story
Kate is a freelance educational writer and editor.Wanted to learn more about a company before applyingSo she visited www.allenresources.com
![Page 10: Navigation and Menus Will Oakley Information Architecture and Design I October 5, 2006.](https://reader035.fdocuments.us/reader035/viewer/2022070605/5a4d1acd7f8b9ab0599702b0/html5/thumbnails/10.jpg)
Kate’s user experience
FrustrationLack of confidence in site creators, even to the point that initially questioned the website and company’s legitimacy.
![Page 11: Navigation and Menus Will Oakley Information Architecture and Design I October 5, 2006.](https://reader035.fdocuments.us/reader035/viewer/2022070605/5a4d1acd7f8b9ab0599702b0/html5/thumbnails/11.jpg)
What went wrong?
Allen Resources didn’t observe many Web navigation conventions.
![Page 12: Navigation and Menus Will Oakley Information Architecture and Design I October 5, 2006.](https://reader035.fdocuments.us/reader035/viewer/2022070605/5a4d1acd7f8b9ab0599702b0/html5/thumbnails/12.jpg)
Navigation Conventions
The three embedded navigation systems
• Global• Local• Contextual
– Rosenfeld and Morville 107
![Page 13: Navigation and Menus Will Oakley Information Architecture and Design I October 5, 2006.](https://reader035.fdocuments.us/reader035/viewer/2022070605/5a4d1acd7f8b9ab0599702b0/html5/thumbnails/13.jpg)
Global Navigation SystemsIntended to be on every page of a site, with possible exception of the homepage. (Rosenfeld & Morville 113)
Krug lists five things that global navigation systems should have• Site ID• A home button• Sections• Search• Utilities (i.e. help, about us, etc.) (62)
![Page 14: Navigation and Menus Will Oakley Information Architecture and Design I October 5, 2006.](https://reader035.fdocuments.us/reader035/viewer/2022070605/5a4d1acd7f8b9ab0599702b0/html5/thumbnails/14.jpg)
from www.amazon.com
from www.1up.com
![Page 15: Navigation and Menus Will Oakley Information Architecture and Design I October 5, 2006.](https://reader035.fdocuments.us/reader035/viewer/2022070605/5a4d1acd7f8b9ab0599702b0/html5/thumbnails/15.jpg)
Local NavigationEnables browsing in a particular section of a siteOften times global and local systems are integrated into one system, with the local navigation is expanded when that particular section is entered.
From www.texassports.com
![Page 16: Navigation and Menus Will Oakley Information Architecture and Design I October 5, 2006.](https://reader035.fdocuments.us/reader035/viewer/2022070605/5a4d1acd7f8b9ab0599702b0/html5/thumbnails/16.jpg)
Contextual Navigation
Links that exist for a particular page that are outside of the local and global systems.Examples:
• See also• Related Topics
Overuse=clutter
![Page 17: Navigation and Menus Will Oakley Information Architecture and Design I October 5, 2006.](https://reader035.fdocuments.us/reader035/viewer/2022070605/5a4d1acd7f8b9ab0599702b0/html5/thumbnails/17.jpg)
From www.1up.com
![Page 18: Navigation and Menus Will Oakley Information Architecture and Design I October 5, 2006.](https://reader035.fdocuments.us/reader035/viewer/2022070605/5a4d1acd7f8b9ab0599702b0/html5/thumbnails/18.jpg)
The Browser
The Browser Buttons are a web constant for users.
![Page 19: Navigation and Menus Will Oakley Information Architecture and Design I October 5, 2006.](https://reader035.fdocuments.us/reader035/viewer/2022070605/5a4d1acd7f8b9ab0599702b0/html5/thumbnails/19.jpg)
King of the Browser Buttons!
Krug says 30-40% of all web clicks are on the back button. (58)Tauscher and Greenberg’s study shows that there is a 39% chance that the next site a person views will be among the last six sites they’ve viewed. (401)The morale of the this: don’t disable the back button.
![Page 20: Navigation and Menus Will Oakley Information Architecture and Design I October 5, 2006.](https://reader035.fdocuments.us/reader035/viewer/2022070605/5a4d1acd7f8b9ab0599702b0/html5/thumbnails/20.jpg)
Supplemental Navigation
Four main types according to Rosenfeld and Morville (121)
• Sitemaps• Site Indexes• Guides• Search
I’d like to add one more from Krug (75)• Breadcrumbs
![Page 21: Navigation and Menus Will Oakley Information Architecture and Design I October 5, 2006.](https://reader035.fdocuments.us/reader035/viewer/2022070605/5a4d1acd7f8b9ab0599702b0/html5/thumbnails/21.jpg)
search
breadcrumbs
Site mapFrom www.lowes.com
Site indexFrom www.imf.org
![Page 22: Navigation and Menus Will Oakley Information Architecture and Design I October 5, 2006.](https://reader035.fdocuments.us/reader035/viewer/2022070605/5a4d1acd7f8b9ab0599702b0/html5/thumbnails/22.jpg)
Guide from www.myspace.com
![Page 23: Navigation and Menus Will Oakley Information Architecture and Design I October 5, 2006.](https://reader035.fdocuments.us/reader035/viewer/2022070605/5a4d1acd7f8b9ab0599702b0/html5/thumbnails/23.jpg)
Advanced Navigation
Personalization• Attempts to anticipate user’s need
Customization• Allows user control over some elements of
page presentation
Social Navigation• Attempts to anticipate user’s need by
comparing it to the actions of others– Rosenfeld and Morville 127-129
![Page 24: Navigation and Menus Will Oakley Information Architecture and Design I October 5, 2006.](https://reader035.fdocuments.us/reader035/viewer/2022070605/5a4d1acd7f8b9ab0599702b0/html5/thumbnails/24.jpg)
Web Dos and Don’ts
Don’t disable the back buttonDon’t disable bookmarkingDon’t fool around with the color of visited/unvisited links
– Rosenfeld and Morville 109
![Page 25: Navigation and Menus Will Oakley Information Architecture and Design I October 5, 2006.](https://reader035.fdocuments.us/reader035/viewer/2022070605/5a4d1acd7f8b9ab0599702b0/html5/thumbnails/25.jpg)
Web Dos and Don’ts
Put your site ID in the upper left corner and make sure it looks like an IDMake the site ID also a home buttonTabs are great but they don’t scale well
– Krug (64-81)
![Page 26: Navigation and Menus Will Oakley Information Architecture and Design I October 5, 2006.](https://reader035.fdocuments.us/reader035/viewer/2022070605/5a4d1acd7f8b9ab0599702b0/html5/thumbnails/26.jpg)
Frames
![Page 27: Navigation and Menus Will Oakley Information Architecture and Design I October 5, 2006.](https://reader035.fdocuments.us/reader035/viewer/2022070605/5a4d1acd7f8b9ab0599702b0/html5/thumbnails/27.jpg)
=
![Page 28: Navigation and Menus Will Oakley Information Architecture and Design I October 5, 2006.](https://reader035.fdocuments.us/reader035/viewer/2022070605/5a4d1acd7f8b9ab0599702b0/html5/thumbnails/28.jpg)
![Page 29: Navigation and Menus Will Oakley Information Architecture and Design I October 5, 2006.](https://reader035.fdocuments.us/reader035/viewer/2022070605/5a4d1acd7f8b9ab0599702b0/html5/thumbnails/29.jpg)
ResourcesKrug, S. (2000). Don’t make me think! A common sense approach to
Web usability. Indianapolis: New Riders.Nielsen, J. & Tahir, M. (2002). Homepage usability: 50 websites
deconstructed. Indianapolis: New Riders.Rosenfeld, L. & Morville, P. (2002). Information architecture for the
World Wide Web. 2nd ed. Sebastopol: O’Reilly.Tauscher, L. M., & Greenberg, S. (1997). Revisitation patterns in World
Wide Web navigation. ACM SIGCHI '97, Atlanta, Georgia, March 22-27, 1997. Atlanta, GA: ACM. 399-406