Designing Navigation

697 views

Published on

Published in: Design, Technology
  • Be the first to comment

Designing Navigation

  1. 1. Designing Navigation<br />Navigation Through the Site<br />
  2. 2. Introduction<br />“A well-designed Web site doesn’t just look good; it also works well.”<br />
  3. 3. Introduction<br />Remember: form follows function.<br />Base site design on what users need to do.<br />
  4. 4. Navigation through the site<br />The site may be beautiful, but if users can’t find what they’re looking for, how pretty it is doesn’t matter!<br />Think about books, magazines and newspapers<br />They use an index to help users navigate<br />
  5. 5. Navigation Though the Site<br />Definition:<br />Navigationdescribes the functions that help users chart their course to and through the information they need.<br />
  6. 6. Navigation Through the Site<br />You must build a system of navigation from the start. Designers must ask the following questions:<br />Whose site am I looking at?<br />Where am I within the site?<br />What else is available from this site?<br />Where should I go next?<br />How do I get there?<br />How do I find whatever I’m looking for?<br />
  7. 7. Navigation Through the Site<br />Let’s look at some sites:<br />jones, partners architecture: http://www.jonespartners.com/<br />Eukanuba Sport:http://www.euksport.com/sportingDog/en_US/jsp/home/SD_HP.jsp<br />Campbell Mithun: http://www.campbellmithun.com/<br />Business Week:http://www.businessweek.com/<br />Colonial Williamsburg:http://www.history.org/<br />SamanZerin: http://www.samanzerin.com/<br />
  8. 8. Navigation Through the Site<br />For each site ask yourselves the following questions:<br />How easy is it to understand their product or service?<br />How easy is it to move around the site?<br />Does the site answer them without using too much space?<br />Was the site designed in the simplest manner?<br />Does the site design distract from the site content?<br />Is navigation consistent across the entire site?<br />Post to three of the discussion forums in the Measures folder of Week 4.<br />
  9. 9. Identifying the Site<br />Corporate Identity.<br />The company or organization should be easy to identify<br />Why is site identification important?<br />
  10. 10. Identifying the Site<br />Site ID helps to build brand awareness and corporate identity.<br />How do you create a Site ID??<br />Use of color<br />Text (name of organization)<br />Logo (graphic)<br />
  11. 11. Site Identification<br />Let’s look at some sites and see if we can spot how Site ID is used:<br />Tide:http://www.tide.com/en_US/index.jsp<br />Ohio State:http://www.osu.edu/<br />Goodyear:http://www.goodyear.com/<br />Target:http://www.target.com/<br />T.G.I.Friday’s: http://www.fridays.com/index.htm<br />
  12. 12. Site Identification<br />You’ll find a Discussion forum for each product/company in ANGEL.<br />Pick 3 of the 5 and post your observations about how the site supports the product or service.<br />
  13. 13. Knowing Where You Are<br />With books, TV shows and Movies, you know how long they’ll last and where the end will be.<br />The end point of a web site isn’t easy to identify.<br />That’s the reason navigation is so important.<br />
  14. 14. Knowing Where You Are<br />Most Web sites use menus to let users navigate through the site.<br />Menus are usually located:<br />At the top of the screen<br />Down the left side of the screen<br />Across the bottom of the screen<br />The next two slides demonstrate two kinds of menus<br />
  15. 15.
  16. 16.
  17. 17. Menus<br />Menus:<br />Provide means of navigation<br />Show site organization<br />Indicate current location<br />Keep size small, content short<br />Not every page needs a menu<br />Keep style consistent throughout site<br />
  18. 18. Site Maps<br />Shows the various sections and identifies the current page<br />The following slide illustrates a site map.<br />
  19. 19.
  20. 20. Cascading Titles<br />Also called breadcrumbs<br />Below is a picture right out of ANGEL!<br />Clicking on any of the crumbs allows the user to quickly move back through the pages they’ve already seen. <br />
  21. 21. Page Numbering<br />Web pages aren’t numbered like books, magazines or newspapers<br />Use of next and back buttons take their place<br />The image below was taken from an article on Ohio.com – using the navigation below, the reader can easily move through the story.<br />
  22. 22. Displaying Choices<br />Check out this site - iMovie101<br />http://www.lengel.net/ali/crs_imovie/imovie101.html<br />They use pop-up menus to help users navigate<br />This menu answers two key questions:<br />What else is available?<br />Where do I go next?<br />Keep navigational info above the scroll!<br />Visible and clickable<br />
  23. 23. Searching and Finding<br />Sometimes all of the navigation just doesn’t yield expected results<br />So, you need to include a search tool<br />Most popular tool?<br />Key Word Search<br />Add a Search button to your site!<br />The following site demonstrates a number of search options!<br />
  24. 24.
  25. 25. Navigation Through the Site<br />Using every navigation aid for every user on every page is overkill<br />Arrange navigation aids so they are:<br />Obvious<br />Consistent<br />Easy to use<br />Take up as little “floor space” as possible<br />

×