Master Pages and Site Navigation Minder Chen [email protected].
Chapter 6: NavigationCopyright © 2004 by Prentice Hall 6. Navigation Design Site-level navigation:...
-
Upload
alice-tucker -
Category
Documents
-
view
232 -
download
1
Transcript of Chapter 6: NavigationCopyright © 2004 by Prentice Hall 6. Navigation Design Site-level navigation:...
![Page 1: Chapter 6: NavigationCopyright © 2004 by Prentice Hall 6. Navigation Design Site-level navigation: making it easy for the user to get around the site Page-level.](https://reader035.fdocuments.in/reader035/viewer/2022081420/56649ecb5503460f94bd9b47/html5/thumbnails/1.jpg)
Chapter 6: Navigation Copyright © 2004 by Prentice Hall
6. Navigation Design
Site-level navigation: making it easy for the user to get around the sitePage-level navigation: making it easy for the user to find things on a page
![Page 2: Chapter 6: NavigationCopyright © 2004 by Prentice Hall 6. Navigation Design Site-level navigation: making it easy for the user to get around the site Page-level.](https://reader035.fdocuments.in/reader035/viewer/2022081420/56649ecb5503460f94bd9b47/html5/thumbnails/2.jpg)
Chapter 6: Navigation Copyright © 2004 by Prentice Hall
Navigation
Choosing a path through the web site’s information spaceGoals:
Let user know where he isGive user confidence in knowing where he is going next
![Page 3: Chapter 6: NavigationCopyright © 2004 by Prentice Hall 6. Navigation Design Site-level navigation: making it easy for the user to get around the site Page-level.](https://reader035.fdocuments.in/reader035/viewer/2022081420/56649ecb5503460f94bd9b47/html5/thumbnails/3.jpg)
Chapter 6: Navigation Copyright © 2004 by Prentice Hall
Navigation: Connections
Good navigation builds on good content organization (Chapter 4)
Choose a navigation system that reflects the content’s organizational structure
Visual design (Chapter5) and navigation design are interrelated
Choose visual navigation elements that build context for a user
![Page 4: Chapter 6: NavigationCopyright © 2004 by Prentice Hall 6. Navigation Design Site-level navigation: making it easy for the user to get around the site Page-level.](https://reader035.fdocuments.in/reader035/viewer/2022081420/56649ecb5503460f94bd9b47/html5/thumbnails/4.jpg)
Chapter 6: Navigation Copyright © 2004 by Prentice Hall
Navigation: Connections
A Navigational System is a visual representation of an organizational structureNavigation Bar: collection of links grouped together on a pageSite-level navigation vs. Page-level Navigation
![Page 5: Chapter 6: NavigationCopyright © 2004 by Prentice Hall 6. Navigation Design Site-level navigation: making it easy for the user to get around the site Page-level.](https://reader035.fdocuments.in/reader035/viewer/2022081420/56649ecb5503460f94bd9b47/html5/thumbnails/5.jpg)
Chapter 6: Navigation Copyright © 2004 by Prentice Hall
Three types of navigation systems
HierarchicalDerived from hierarchical organization
Ad hocHyperlinks
DatabaseSearch engines
![Page 6: Chapter 6: NavigationCopyright © 2004 by Prentice Hall 6. Navigation Design Site-level navigation: making it easy for the user to get around the site Page-level.](https://reader035.fdocuments.in/reader035/viewer/2022081420/56649ecb5503460f94bd9b47/html5/thumbnails/6.jpg)
Chapter 6: Navigation Copyright © 2004 by Prentice Hall
Rare to use only one
Most websites build on a judicious combination of these three, with one dominant themeHierarchical plus hyperlinks (ad hoc) is most common
![Page 7: Chapter 6: NavigationCopyright © 2004 by Prentice Hall 6. Navigation Design Site-level navigation: making it easy for the user to get around the site Page-level.](https://reader035.fdocuments.in/reader035/viewer/2022081420/56649ecb5503460f94bd9b47/html5/thumbnails/7.jpg)
Chapter 6: Navigation Copyright © 2004 by Prentice Hall
A pure hierarchy is rareWe add links to facilitate moving around the hierarchy without going all the way to the top; note extra links at bottom level
![Page 8: Chapter 6: NavigationCopyright © 2004 by Prentice Hall 6. Navigation Design Site-level navigation: making it easy for the user to get around the site Page-level.](https://reader035.fdocuments.in/reader035/viewer/2022081420/56649ecb5503460f94bd9b47/html5/thumbnails/8.jpg)
Chapter 6: Navigation Copyright © 2004 by Prentice Hall
Global navigationFor a small site, it may be possible to show the major links on every page
Global navigation
![Page 9: Chapter 6: NavigationCopyright © 2004 by Prentice Hall 6. Navigation Design Site-level navigation: making it easy for the user to get around the site Page-level.](https://reader035.fdocuments.in/reader035/viewer/2022081420/56649ecb5503460f94bd9b47/html5/thumbnails/9.jpg)
Chapter 6: Navigation Copyright © 2004 by Prentice Hall
Global navigation bar can be vertical
Global navigation
![Page 10: Chapter 6: NavigationCopyright © 2004 by Prentice Hall 6. Navigation Design Site-level navigation: making it easy for the user to get around the site Page-level.](https://reader035.fdocuments.in/reader035/viewer/2022081420/56649ecb5503460f94bd9b47/html5/thumbnails/10.jpg)
Chapter 6: Navigation Copyright © 2004 by Prentice Hall
Showing more levels in the hierarchy
Drop-downs or pull-outs can show the next level
![Page 11: Chapter 6: NavigationCopyright © 2004 by Prentice Hall 6. Navigation Design Site-level navigation: making it easy for the user to get around the site Page-level.](https://reader035.fdocuments.in/reader035/viewer/2022081420/56649ecb5503460f94bd9b47/html5/thumbnails/11.jpg)
Chapter 6: Navigation Copyright © 2004 by Prentice Hall
Other items
Breadcrumbs: a sequence of links showing user how he got to current locationSubsite: a collection of pages that share a common navigation system, perhaps different from the website as a whole
![Page 12: Chapter 6: NavigationCopyright © 2004 by Prentice Hall 6. Navigation Design Site-level navigation: making it easy for the user to get around the site Page-level.](https://reader035.fdocuments.in/reader035/viewer/2022081420/56649ecb5503460f94bd9b47/html5/thumbnails/12.jpg)
Chapter 6: Navigation Copyright © 2004 by Prentice Hall
Breadcrumbs show user “This is where you are how you got here”
Breadcrumbs
![Page 13: Chapter 6: NavigationCopyright © 2004 by Prentice Hall 6. Navigation Design Site-level navigation: making it easy for the user to get around the site Page-level.](https://reader035.fdocuments.in/reader035/viewer/2022081420/56649ecb5503460f94bd9b47/html5/thumbnails/13.jpg)
Chapter 6: Navigation Copyright © 2004 by Prentice Hall
Many sites have subsites
Subsites
![Page 14: Chapter 6: NavigationCopyright © 2004 by Prentice Hall 6. Navigation Design Site-level navigation: making it easy for the user to get around the site Page-level.](https://reader035.fdocuments.in/reader035/viewer/2022081420/56649ecb5503460f94bd9b47/html5/thumbnails/14.jpg)
Chapter 6: Navigation Copyright © 2004 by Prentice Hall
Ad hoc links are very common(created for one specific purpose)
![Page 15: Chapter 6: NavigationCopyright © 2004 by Prentice Hall 6. Navigation Design Site-level navigation: making it easy for the user to get around the site Page-level.](https://reader035.fdocuments.in/reader035/viewer/2022081420/56649ecb5503460f94bd9b47/html5/thumbnails/15.jpg)
Chapter 6: Navigation Copyright © 2004 by Prentice Hall
The most familiar example of database navigation: Google
![Page 16: Chapter 6: NavigationCopyright © 2004 by Prentice Hall 6. Navigation Design Site-level navigation: making it easy for the user to get around the site Page-level.](https://reader035.fdocuments.in/reader035/viewer/2022081420/56649ecb5503460f94bd9b47/html5/thumbnails/16.jpg)
Chapter 6: Navigation Copyright © 2004 by Prentice Hall
Building Context
Helping the user to understand where he is and where is can go in the web siteNavigation can be used to build context
![Page 17: Chapter 6: NavigationCopyright © 2004 by Prentice Hall 6. Navigation Design Site-level navigation: making it easy for the user to get around the site Page-level.](https://reader035.fdocuments.in/reader035/viewer/2022081420/56649ecb5503460f94bd9b47/html5/thumbnails/17.jpg)
Chapter 6: Navigation Copyright © 2004 by Prentice Hall
Building context for the user with navigation bars
![Page 18: Chapter 6: NavigationCopyright © 2004 by Prentice Hall 6. Navigation Design Site-level navigation: making it easy for the user to get around the site Page-level.](https://reader035.fdocuments.in/reader035/viewer/2022081420/56649ecb5503460f94bd9b47/html5/thumbnails/18.jpg)
Chapter 6: Navigation Copyright © 2004 by Prentice Hall
Graphical navigation bar
![Page 19: Chapter 6: NavigationCopyright © 2004 by Prentice Hall 6. Navigation Design Site-level navigation: making it easy for the user to get around the site Page-level.](https://reader035.fdocuments.in/reader035/viewer/2022081420/56649ecb5503460f94bd9b47/html5/thumbnails/19.jpg)
Chapter 6: Navigation Copyright © 2004 by Prentice Hall
Labels vs. Graphics
Graphical representations are nice but slower to downloadShould always include label with graphicBe careful in selecting both labels and graphicsConsider conventions
![Page 20: Chapter 6: NavigationCopyright © 2004 by Prentice Hall 6. Navigation Design Site-level navigation: making it easy for the user to get around the site Page-level.](https://reader035.fdocuments.in/reader035/viewer/2022081420/56649ecb5503460f94bd9b47/html5/thumbnails/20.jpg)
Chapter 6: Navigation Copyright © 2004 by Prentice Hall
Be careful with metaphors: what do these mean?
![Page 21: Chapter 6: NavigationCopyright © 2004 by Prentice Hall 6. Navigation Design Site-level navigation: making it easy for the user to get around the site Page-level.](https://reader035.fdocuments.in/reader035/viewer/2022081420/56649ecb5503460f94bd9b47/html5/thumbnails/21.jpg)
Chapter 6: Navigation Copyright © 2004 by Prentice Hall
Intended meanings. Moral: add words, too!
![Page 22: Chapter 6: NavigationCopyright © 2004 by Prentice Hall 6. Navigation Design Site-level navigation: making it easy for the user to get around the site Page-level.](https://reader035.fdocuments.in/reader035/viewer/2022081420/56649ecb5503460f94bd9b47/html5/thumbnails/22.jpg)
Chapter 6: Navigation Copyright © 2004 by Prentice Hall
So add words!
![Page 23: Chapter 6: NavigationCopyright © 2004 by Prentice Hall 6. Navigation Design Site-level navigation: making it easy for the user to get around the site Page-level.](https://reader035.fdocuments.in/reader035/viewer/2022081420/56649ecb5503460f94bd9b47/html5/thumbnails/23.jpg)
Chapter 6: Navigation Copyright © 2004 by Prentice Hall
Some Standard Conventions
Home: the main entry point of a Web site, generally containing the top-level links to the siteSearch: find related pages by supplying a word or a phraseAbout Us: information about the company that created the site
![Page 24: Chapter 6: NavigationCopyright © 2004 by Prentice Hall 6. Navigation Design Site-level navigation: making it easy for the user to get around the site Page-level.](https://reader035.fdocuments.in/reader035/viewer/2022081420/56649ecb5503460f94bd9b47/html5/thumbnails/24.jpg)
Chapter 6: Navigation Copyright © 2004 by Prentice Hall
Some Standard Conventions
Shop: browse for merchandiseCheck Out: supply shipping and billing information, complete transactionContact Us: initiate interactive dialog with customer representative – phone or email
Consistency + Conventions
![Page 25: Chapter 6: NavigationCopyright © 2004 by Prentice Hall 6. Navigation Design Site-level navigation: making it easy for the user to get around the site Page-level.](https://reader035.fdocuments.in/reader035/viewer/2022081420/56649ecb5503460f94bd9b47/html5/thumbnails/25.jpg)
Chapter 6: Navigation Copyright © 2004 by Prentice Hall
Menus
List of possible links Usually in drop-down formProvides many more options without clutter
DisadvantagesNot all options are visibleUser must act to activate a menu
![Page 26: Chapter 6: NavigationCopyright © 2004 by Prentice Hall 6. Navigation Design Site-level navigation: making it easy for the user to get around the site Page-level.](https://reader035.fdocuments.in/reader035/viewer/2022081420/56649ecb5503460f94bd9b47/html5/thumbnails/26.jpg)
Chapter 6: Navigation Copyright © 2004 by Prentice Hall
Menus pack in a lot of information-
Note the dropdown from Software
![Page 27: Chapter 6: NavigationCopyright © 2004 by Prentice Hall 6. Navigation Design Site-level navigation: making it easy for the user to get around the site Page-level.](https://reader035.fdocuments.in/reader035/viewer/2022081420/56649ecb5503460f94bd9b47/html5/thumbnails/27.jpg)
Chapter 6: Navigation Copyright © 2004 by Prentice Hall
Site mapsGraphical representation of the siteTextual
For a big site, must be selective
GraphicalA site map is no substitute for good navigationTrend away from site maps
![Page 28: Chapter 6: NavigationCopyright © 2004 by Prentice Hall 6. Navigation Design Site-level navigation: making it easy for the user to get around the site Page-level.](https://reader035.fdocuments.in/reader035/viewer/2022081420/56649ecb5503460f94bd9b47/html5/thumbnails/28.jpg)
Chapter 6: Navigation Copyright © 2004 by Prentice Hall
Graphical site map
![Page 29: Chapter 6: NavigationCopyright © 2004 by Prentice Hall 6. Navigation Design Site-level navigation: making it easy for the user to get around the site Page-level.](https://reader035.fdocuments.in/reader035/viewer/2022081420/56649ecb5503460f94bd9b47/html5/thumbnails/29.jpg)
Chapter 6: Navigation Copyright © 2004 by Prentice Hall
Frames
Frame: an area of a browser window that stays visible as the user moves from page to pageSimple way to provide global navigation: scrollsBut hogs screen real estate: you can’t do anything else with that spaceMay not printHard (impossible?) to bookmarkUsed much less often than formerlySee Jakob Nielsen, “Why Frames “Suck (Most of the Time)”
![Page 30: Chapter 6: NavigationCopyright © 2004 by Prentice Hall 6. Navigation Design Site-level navigation: making it easy for the user to get around the site Page-level.](https://reader035.fdocuments.in/reader035/viewer/2022081420/56649ecb5503460f94bd9b47/html5/thumbnails/30.jpg)
Chapter 6: Navigation Copyright © 2004 by Prentice Hall
Built-in browser services
Take advantage of theseHistory of pages visitedBack & Forward ButtonsColor coding of links
Unvisited vs. Visited vs. Active
Don’t mess with built in conventions
e.g. Blue is an unvisited link.
![Page 31: Chapter 6: NavigationCopyright © 2004 by Prentice Hall 6. Navigation Design Site-level navigation: making it easy for the user to get around the site Page-level.](https://reader035.fdocuments.in/reader035/viewer/2022081420/56649ecb5503460f94bd9b47/html5/thumbnails/31.jpg)
Chapter 6: Navigation Copyright © 2004 by Prentice Hall
Page-level navigation aids
Remember proximity, alignment, consistency: make the layout obviousMake size of text box appropriate to amount of dataShow which fields are required with * or Required Use error messagesMake button placement consistent: before or after its associated text
![Page 32: Chapter 6: NavigationCopyright © 2004 by Prentice Hall 6. Navigation Design Site-level navigation: making it easy for the user to get around the site Page-level.](https://reader035.fdocuments.in/reader035/viewer/2022081420/56649ecb5503460f94bd9b47/html5/thumbnails/32.jpg)
Chapter 6: Navigation Copyright © 2004 by Prentice Hall
Make error reports clearExplicitly state the problem Perhaps change the color of the offending boxShow as many errors as possible on one page; don’t make user correct one error per attempt to send the dataDon’t make user re-enter correct dataSounds obvious, huh? Then why are so many forms terrible?Sales are lost at this point, in big bad quantities
![Page 33: Chapter 6: NavigationCopyright © 2004 by Prentice Hall 6. Navigation Design Site-level navigation: making it easy for the user to get around the site Page-level.](https://reader035.fdocuments.in/reader035/viewer/2022081420/56649ecb5503460f94bd9b47/html5/thumbnails/33.jpg)
Chapter 6: Navigation Copyright © 2004 by Prentice Hall
Summary
Effective navigation is a combination of good content organization and good visual organizationThe main navigational system is hierarchical, with hyperlinks addedYou can learn from all the bad sites you’ve suffered with