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