CS 160: Lecture 15
based on notes by James Landay
Outline
- Personalizing your home page
- Web site usability survey
Review
- Design patterns allow us to?
- Web design patterns leverage
- people’s usage habits on/off-line
- Home page web design pattern solution
- make a positive first impression
- focus on a single item
- build your site brand
- make navigation easy
- lure visitors to return
- make it download fast
Pattern Examples
- Personalizing your home page
Pattern Elements
Personalizing Your Home Page
- Problem
- web sites would like to have visitors return often
- to buy, see ads, use services, etc.
- if your content isn’t changing & personal, users less likely to return or stay
- Solution
- personalization
- a home page that is customized for each visitor
PPT Slide
How to Personalize Your Page
- Gather information from GUEST PROFILES & use it to build a site that
- holds their interest
- looks customized just for them
- Visitors will need to trust you
- to give this information directory/indirectly
- must use for their benefit only
- Four ways to collect information?
- edit, interview, deduce, collaborative filter
How to Personalize Your Page
Editing Personalization Info
- Visitors click on buttons to make selections from lists
- weather cities
- news sources
- stocks to follow
- sports to follow
- …
- Include content modules based directly on selections
- Drawbacks to this approach?
- can get tedious if you have to do it repeatedly
- users won’t spend time entering info if little benefit
my.yahoo.com is a good example
of editing for personalization
Interviewing for Personalization Info
- Visitors answer multiple choice questions
- Include CONTENT MODULES based on one or more scoring methods
- Allow the option of continuing the personalization process over time
Deduction for Personalization Info
- Watch visitors behavior
- Amazon tracks the books visitors order & later offers similar books
- Select content modules based on scoring method
Collaborative Filtering for Personalization Info
- First provide popular content based on all visitors
- Provide customized content modules based on similar guest profiles
- use correlation of profiles to determine areas of interest
Scoring Methods to Match Content to Audience
- Rank
- show ordered list of content
- Top rank
- content of only the top few scores shown
- Threshold score
- show all content over a particular score
- Required attributes
- show all content that is on “NCAA Sports”
- Combination
- e.g., job site might use top rank & required attributes to show best jobs a person is qualified for
Pattern Examples
- Patterns leverage visitors off-line experience
Shopping Cart
- Problem?
- how to allow customers to purchase multiple items in one transaction
- Solution
- use shopping cart metaphor to keep track of items before customer finalizes the purchase
- track name, quantity, availability, & price
How to Apply Shopping Carts
- Make available on each page and easy to add items from product pages?
- make it easy for people to buy!
- seems obvious, but many sites don’t do it
How to Apply Shopping Carts
- Provide detailed info on each item in cart
How to Apply Shopping Carts
- Provide info about all items in cart
- sub-totals
- shipping, taxes, other charges (if known)
How to Apply Shopping Carts
- Provide a prominent link to CHECKOUT
How to Apply Shopping Carts
- Have a link to let people continue shopping
How to Apply Shopping Carts
- Don’t let unavailable things be added
- hard to find a good example of this
PPT Slide
Checkout
- Shopping Cart =>
- Details, quantity, availability, subtotal
- Sign-in =>
- New customers
- Returning customers
- Shipping =>
- Address, shipping method, gift wrap?, special instructions
- Payment =>
- Method, billing address, gift certificate, coupons
- Confirmation
- Confirm button, confirmation page, email, order tracking into, Thank you
Checkout
- Make it easy to cancel or change order at any time before final confirmation
- Don’t have customers type things twice
Non-intuitive Empirical Results
- Studied usability of 9 major web sites
- including C|Net, Disney, HP, Fidelity, etc.
- Performed by consulting company
- User Interface Engineering, Jared M. Spool
- http://www.uie.com
- Data
- “dozens” of hours of user observations
- detailed analysis of site composition
- task to find particular information from each site
Empirical Results (cont.)
- Bad ones
- home pages offered little direction on content
- “Readable” pages were less effective
- people don’t read, they skim
- nicely formed sentences hide key information
Empirical Results (cont.)
- Download time wasn’t a big issue
- no correlation between time and frustration
- Graphic design had very little effect
- take a look at Yahoo
- may be important for brand, marketing, etc.
- Navigation must be linked to content
- if not, users found sites less usable
- forget about designing separately (“shell” sites)
- if can remove ½ of content without changing home page, then it is a shell site
- generic links do not give users predictable results
Empirical Results (cont.)
- Violating the “sales script”
- standard human-human sales situations
- browse and then give personal info when you buy
- web-based situations that violate this fail
- users driven away by giving personal info first
- you must first build trust!
Animation
- Higher click-thru rates, but
- annoyed users
- scrolled, covered with hands...
- animation makes it much harder to read/skim
- Could be useful in conveying information
- they found no examples of this
- “Surfing” different from info. retrieval
- may not be able to design a site for both
Frames
Frames
Empirical Results (cont.)
- Frames
- not so bad, but
- make sure large frame changes are obvious as a result of clicks in small (TOC) frame
Links
- Users had trouble with short links
- “If you click on Disneyland, will you get a map of the park? Ticket Information, etc?”
- Longer links clearly set expectations
- “How to Read the Pricing and Rating Listings”
- “Pricing (How to Read Pricing & Rating Listings)
- Links embedded in paragraphs are worse
- hard to find information
- can’t skim - must now read
- Text links used before graphical links
Links (cont.)
- Within-page links
- sometimes confusing if user scrolls & has read material already
- make shorter pages to avoid
- Wrapped links caused confusion
Good Links
Summary
- E-commerce: shopping carts, checkout
- Web site usability survey