1. Prioritizing Web Usability Nielsen and Loranger Chapter 6: Navigation and Information Architecture Paul Ammann http://cs.gmu.edu/~pammann/ SWE 432 Design and Implementation of Software for the Web

2. 10/24/20152 Overview Am I There Yet? Match the Site Structure to User Expectations Navigation: Be Consistent Navigation: Beware the Coolness Factor Reduce Clutter and Avoid Redundancy Links and Label Names: Be Specific Vertical Dropdown Menus: Short is Sweet Multilevel Menus: Less is More Can I Click on It? Direct Access From the HomePage A Well-Structured Site Gives Users What They Want When They Want It

3. 10/24/20153 Am I There Yet? Four Key “Findability” Problems Cause Huge Problems –Navigation and Menus –Category Names –Links –Information Architecture Definition: How the Information Space is Structured Good Navigation Design –Shows Users Where They Are –Shows Users Where Things Are Located –Shows Users How To Access Things In A Methodical Way Good Design is Hard, But Not Impossible

4. 10/24/20154 Match the Site Structure To User Expectations It’s About The User, Not The Builder –Don’t Reflect Internal Corporate Organization Users Don’t Care About Your Org Charts –Arrange Products by User Attributes, Not Brand Example: Escalade SportsEscalade Sports –Try To Find An Actual Product Proper Categorization Example: City of San DiegoCity of San Diego –But Note Wordiness –Optimized for Ordinary Citizens Improper Categorization Example: CumminsCummins –Try to Find Fuel Cell Technology Developers Don’t Think Like Users

5. 10/24/20155 Navigation Be Consistent –Consistency Is A Fundamental Concept in Navigation –Prime Offenders: Large Sites with Subsites or Affiliates –Pretty Good Example: PixarPixar –Poor Example: Social Security AdministrationSocial Security Administration Note Treatment of “Find Your Retirement Age” Try to Find “Factors That May Affect Your Retirement Benefits” Page –Another Poor Example: NestleNestle Note Different Page Layouts On Various Corporate Sub Sites Hard For Large Sites, But The Payoff is Huge

6. 10/24/20156 Navigation (2) Avoid the Coolness Factor –Save Your Creative Juices for Areas of Site Users Care About Poor Example: Wynn Las Vegas, Burger King Career SiteWynn Las VegasBurger King Career Site –Note The Moving Menus Minesweeping –Definition: Moving Mouse in Search of Something Clickable –Some Young Children Enjoy Minesweeping Most Users Hate It Reduce Clutter And Avoid Redundancy –Poor Example: US Postal Service (circa 2003)US Postal Service Note : Options in Middle Identical to Links at Top Sargent Friday: Just The Facts

7. 10/24/20157 Links and Label Names: Be Specific Make Sure Your Users Understand Your Labels –Honda: 2004 vs. Now2004Now Be Brief –Users Don’t Want to Scan Start With Keywords or Information Words –Don’t Use Labels With Redundant Prefixes –Don’t Use “Here” or “Click Here” or “More” Example: American Heart AssociationAmerican Heart Association Sometimes, Sites Go Backwards –HM Customs and Excise: 2002 vs. 2004 vs. Now20022004Now –Sample Task: How Do I Get a VAT Refund? Again: Focus on What User Wants To Do

8. 10/24/20158 Menus Vertical Drop Down Menus: Short is Sweet –The Longer the Menu, the More Difficult it is to Control –The Farther Users Travel, The More Likely They Get Lost MultiLevel Menus: Less is More –Good and Bad Example: American Heart AssociationAmerican Heart Association Note Fly-Out Limit of Two Levels –Three Levels Usually Bad; Four Levels A Disaster Note Unpredictability of Which Menu Items Fly Out –Always A Usability Problem If Menu Unexpectedly Disappears Or Is Replaced By A Different Menu Respect User’s Cognitive and Physical Limits

9. 10/24/20159 Can I Click It? Users Should Always Know What Is Clickable –Blue Is The Default: Don’t Use Blue For NonClickableBlue For NonClickable Branding Concerns May Dictate Other Colors –High-Lighting on Mouse-Over Is A Helper But May Require Minesweeping –Standard Button Shapes Imply Clickability –Don’t Rely On The “Hand” Pointer Novices Think Arrow and Hand Pointer Are Identical Affordances: Whatever Can Be Done With An Object –Perceived Affordance Is Crucial To Design –Clickable Objects Need a Perceived Affordance of Clickability –Unclickable Objects Must Lack This Perceived Affordance Clicking Is Key To Navigation

10. 10/24/201510 Direct Access From The Homepage Directly Link Small Number of High Priority Operations –Need To Balance With Other Goals of Homepage Setting Stage for Site and Informing Users of Full Range of Options –Nielsen Suggests 3 to 5 Direct Links From Any Specific Area of Homepage –Good Example: Firefox Home PageFirefox Home Page Maximize Common User Tasks