Web design patterns 2
Download
1 / 45

Web Design Patterns 2 - PowerPoint PPT Presentation


  • 303 Views
  • Updated On :

Web Design Patterns #2 CS 160, Spring 2002 James Landay 3/4/2002 Hall of Shame or Hall of Fame? http://www.balthaser.com/ Hall of Shame! no CLEAR FIRST READ (I3)! links to basic areas? doesn’t make navigation easy bleading-leading edge tech? doesn’t download fast

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Web Design Patterns 2' - jacob


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Web design patterns 2 l.jpg

Web Design Patterns #2

CS 160, Spring 2002

James Landay

3/4/2002


Hall of shame or hall of fame l.jpg
Hall of Shame or Hall of Fame?

  • http://www.balthaser.com/


Hall of shame l.jpg
Hall of Shame!

  • no CLEAR FIRST READ (I3)!

  • links to basic areas?

    • doesn’t make navigation easy

  • bleading-leading edge tech?

    • doesn’t download fast

  • http://www.balthaser.com/


Web design patterns 24 l.jpg

Web Design Patterns #2

CS 160, Spring 2002

James Landay

3/4/2002


Outline l.jpg
Outline

  • Review

  • PERSONALIZED CONTENT (D4)

  • INVERSE PYRAMID WRITING STYLE (D7)

  • Announcements

  • Non-intuitive empirical results

  • SHOPPING CART (F3)


Review l.jpg
Review

  • Design patterns allow us to?

    • reuse design knowledge

  • Previously used in?

    • architecture & S/E

  • Web design patterns leverage

    • people’s usage habits on/off-line

  • HOMEPAGE PORTAL (C1) 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


Personalized content d4 l.jpg
PERSONALIZED CONTENT (D4)

  • 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

    • personalized info is more useful to people than generic info. Engineering a dynamic site is difficult if the basic structures & designs are not in place

  • Solution

    • personalization

      • a home page that is customized for each visitor


Personalized content d4 solution diagram l.jpg
PERSONALIZED CONTENT (D4)Solution Diagram


How to personalize your page l.jpg
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



Editing personalization info l.jpg
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 (D2) 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 l.jpg
Interviewing for Personalization Info (?)

  • Visitors answer multiple choice questions

  • Update guest profile

  • Include CONTENT MODULES (D2) based on one or more scoring methods

  • Allow the option of continuing the personalization process over time


Deduction for personalization info l.jpg
Deduction for Personalization Info (?)

  • Watch visitors behavior

    • Amazon tracks the books visitors order & later offers similar books

  • Update guest profile

  • Select CONTENT MODULES (D2) based on scoring method


Collaborative filtering for personalization info l.jpg
Collaborative Filtering for Personalization Info

  • First provide popular content based on all visitors

  • Provide customized CONTENT MODULES (D2) based on similar guest profiles

    • use correlation of profiles to determine areas of interest


Scoring methods to match content to audience l.jpg
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


Inverse pyramid writing style d7 l.jpg
INVERSE PYRAMID WRITING STYLE (D7)

  • Problem

    • 25% slower to read from a computer screen

    • web surfers want immediate gratification or they will leave – they want web pages that are

      • delivered quickly

      • easy to use

      • quick to skim

  • Solution (?)

    • give the conclusions first

    • add detail later for those that want it


Slide17 l.jpg

Inverse Pyramid Writing

This is the short blurb describing

the article

This is some nonsensical text This is some nonsensical text This is some nonsensical text To see how well this thing w This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical text

To see how well this thing works This is some nonsensical text This is some nonsensical text This is some nonsensical text Does this work at all? I don’t know. I am in love with XXX To see how well this thing works This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical text Does this work at all? I don’t

know. This is some nonsensical text This is some the dog is barking nonsensical text This is some nonsensical text Does this work at all? I don’t know. What is love? What is the good life? What is, and is not? That which

is, is. The world is all that exists. Nothing unreal exists, metaphysics law #1. This is some the the the the nonsensical text This is some nonsensical text Does this work at all? I don’t know. This is Is there a god? Are we a quantum accident? Will we ever know? Are there questions that should never be asked? What is the nature of goodness? Why are we so mean to each other? How can we be so cruel to one another?

This is some nonsensical text This is some nonsensical text This is some nonsensical text To see how well this thing works This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical text

To see how well this thing works

This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical What is good in life, he asks? That is a question we may never have an answer to. is some nonsensical text This is some nonsensical text This is some

Most important info

Title

Short Blurbs

Summaries

Overviews

Teasers

.

.

.

Less important info

Background Information

Supporting Details

Long Quotes

INVERSE PYRAMID WRITING STYLE (D7)


Journalists use inverted pyramid l.jpg
Journalists Use Inverted Pyramid

from

www.nytimes.com


Zdnet uses inverted pyramid l.jpg
ZDNet Uses Inverted Pyramid

  • Start with a good concise title

    • reflect the content

  • Continue with the most important points

    • use hypertext to split-up information

    • people often won’t scroll or read

  • Use less text

    • 50% less than you would offline

  • Use a simple writing style

    • simple sentences -- no hype or advertising

  • Use EMBEDDED LINKS (K7) to help visitors find more information

  • Use bullets and numbered lists

    • supports skimming



Zdnet uses inverted pyramid21 l.jpg
ZDNet Uses Inverted Pyramid

  • Start with a good concise title

    • reflect the content

  • Continue with the most important points

    • use hypertext to split-up information

    • people often won’t scroll or read

  • Use less text

    • 50% less than you would offline

  • Use a simple writing style

    • simple sentences -- no hype or advertising

  • Use EMBEDDED LINKS (K7) to help visitors find more information

  • Use bullets and numbered lists

    • supports skimming

  • Use different style for entertainment site


Announcements l.jpg
Announcements

  • Turn in HE homework

  • Questions????

  • Interactive Prototype #1 assignment out this afternoon

    • presentations due on 3/18

    • write-up due on 3/20

    • one of the harder assignments – start today!


Non intuitive empirical results l.jpg
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 l.jpg
Empirical Results (cont.)

  • None were very good

  • 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 cont25 l.jpg
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 cont26 l.jpg
Empirical Results (cont.)

  • None were very good

  • 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 cont27 l.jpg
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 cont28 l.jpg
Empirical Results (cont.)

  • Violating the “sales script”

    • standard human-human sales situations

      • browse and then give personal info when you buy

        • employees wear name tags

    • web-based situations that violate this fail

      • users driven away by giving personal info first

      • you must first build trust!


Animation l.jpg
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




Empirical results cont32 l.jpg
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 l.jpg
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 l.jpg
Links (cont.)

  • Within-page links

    • sometimes confusing if user scrolls & has read material already

    • make shorter pages to avoid

  • Wrapped links caused confusion

    • tradeoff here...



Shopping cart l.jpg
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 l.jpg
How to Apply Shopping Carts

  • Make available on each page andeasy 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 carts38 l.jpg

name w/ link to detail

quantity w/ a way to change

price

availability

short description

a way to remove item

How to Apply Shopping Carts

  • Provide detailed info on each item in cart


How to apply shopping carts39 l.jpg
How to Apply Shopping Carts

  • Provide info about all items in cart

    • sub-totals

    • shipping, taxes, other charges (if known)

    • prevent unpleasant surprises


How to apply shopping carts40 l.jpg
How to Apply Shopping Carts

  • Provide a prominent link to CHECKOUT


How to apply shopping carts41 l.jpg
How to Apply Shopping Carts

  • Have a link to let people continue shopping


How to apply shopping carts42 l.jpg
How to Apply Shopping Carts

  • Don’t let unavailable things be added

    • hard to find a good example of this


Summary l.jpg
Summary

  • Personalization. Why?

    • if content isn’t fresh, visitors won’t return

    • four ways to collect information?

      • edit, interview, deduce, collaborative filter

  • Key idea to inverse-pyramid writing style?

    • start with the conclusions & add details below

  • Non-intuitive empirical results

    • “readable” pages were less effective. why?

      • users scan! – the style of links matters

    • navigation must be linked to content. why?

      • so users can predict where links will take them

    • don’t violate the “sales script.” why?

      • user’s must trust you before giving personal info


Next time l.jpg
Next Time

  • The difference between Web & GUI design

    • read

      • The Difference Between Web Design & GUI Design

      • Nielsen's top 10 list (plus update)


ad