1 Web Design Patterns #2 Slides from: James Landay

2 Hall of Shame or Hall of Fame? zhttp://

3 Hall of Shame! zno CLEAR FIRST READ (I3)! zlinks to basic areas? ydoesn’t make navigation easy zbleading-leading edge tech? ydoesn’t download fast zhttp://

4 Web Design Patterns #2 Slides from: James Landay

5 Outline zReview zPERSONALIZED CONTENT (D4) zINVERSE PYRAMID WRITING STYLE (D7) zNon-intuitive empirical results zSHOPPING CART (F3)

6 Review zDesign patterns allow us to? yreuse design knowledge zPreviously used in? yarchitecture & S/E zWeb design patterns leverage ypeople’s usage habits on/off-line zHOMEPAGE PORTAL (C1) pattern solution xmake a positive first impression xfocus on a single item xbuild your site brand xmake navigation easy xlure visitors to return xmake it download fast

7 PERSONALIZED CONTENT (D4) zProblem yweb sites would like to have visitors return often xto buy, see ads, use services, etc. yif your content isn’t changing & personal, users less likely to return or stay ypersonalized info is more useful to people than generic info. Engineering a dynamic site is difficult if the basic structures & designs are not in place zSolution ypersonalization xa home page that is customized for each visitor

8 PERSONALIZED CONTENT (D4) Solution Diagram

9 How to Personalize Your Page zGather information from guest profiles & use it to build a site that yholds their interest ylooks customized just for them zVisitors will need to trust you yto give this information directory/indirectly ymust use for their benefit only zFour ways to collect information ? yedit, interview, deduce, collaborative filter

10 How to Personalize Your Page

11 Editing Personalization Info zVisitors click on buttons to make selections from lists yweather cities ynews sources ystocks to follow ysports to follow y…y… zInclude CONTENT MODULES (D2) based directly on selections zDrawbacks to this approach? ycan get tedious if you have to do it repeatedly yusers won’t spend time entering info if little benefit my.yahoo.com is a good example of editing for personalization

12 Interviewing for Personalization Info (?) zVisitors answer multiple choice questions zUpdate guest profile zInclude CONTENT MODULES (D2) based on one or more scoring methods zAllow the option of continuing the personalization process over time

13 Deduction for Personalization Info (?) zWatch visitors behavior yAmazon tracks the books visitors order & later offers similar books zUpdate guest profile zSelect CONTENT MODULES (D2) based on scoring method

14 Collaborative Filtering for Personalization Info zFirst provide popular content based on all visitors zProvide customized CONTENT MODULES (D2) based on similar guest profiles yuse correlation of profiles to determine areas of interest

15 Scoring Methods to Match Content to Audience zRank yshow ordered list of content zTop rank ycontent of only the top few scores shown zThreshold score yshow all content over a particular score zRequired attributes yshow all content that is on “NCAA Sports” zCombination ye.g., job site might use top rank & required attributes to show best jobs a person is qualified for

16 INVERSE PYRAMID WRITING STYLE (D7) zProblem y25% slower to read from a computer screen yweb surfers want immediate gratification or they will leave – they want web pages that are xdelivered quickly xeasy to use xquick to skim zSolution (?) ygive the conclusions first yadd detail later for those that want it

17 INVERSE PYRAMID WRITING STYLE (D7) 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 Less important info Title Short Blurbs Summaries Overviews Teasers Background Information Supporting Details Long Quotes Inverse Pyramid Writing

18 Journalists Use Inverted Pyramid from

19 ZDNet Uses Inverted Pyramid zStart with a good concise title yreflect the content zContinue with the most important points yuse hypertext to split-up information ypeople often won’t scroll or read zUse less text y50% less than you would offline zUse a simple writing style ysimple sentences -- no hype or advertising zUse EMBEDDED LINKS (K7) to help visitors find more information zUse bullets and numbered lists ysupports skimming

20 Using Bullets

21 ZDNet Uses Inverted Pyramid zStart with a good concise title yreflect the content zContinue with the most important points yuse hypertext to split-up information ypeople often won’t scroll or read zUse less text y50% less than you would offline zUse a simple writing style ysimple sentences -- no hype or advertising zUse EMBEDDED LINKS (K7) to help visitors find more information zUse bullets and numbered lists ysupports skimming zUse different style for entertainment site

22 Non-intuitive Empirical Results zStudied usability of 9 major web sites yincluding C|Net, Disney, HP, Fidelity, etc. zPerformed by consulting company yUser Interface Engineering, Jared M. SpoolUser Interface Engineering yhttp:// zData y“dozens” of hours of user observations ydetailed analysis of site composition ytask to find particular information from each site

23 Empirical Results (cont.) zNone were very good zBad ones yhome pages offered little direction on content z“Readable” pages were less effective ypeople don’t read, they skim ynicely formed sentences hide key information

24 Empirical Results (cont.) zDownload time wasn’t a big issue yno correlation between time and frustration zGraphic design had very little effect ytake a look at Yahoo ymay be important for brand, marketing, etc. zNavigation must be linked to content yif not, users found sites less usable yforget about designing separately (“shell” sites) xif can remove ½ of content without changing home page, then it is a shell site xgeneric links do not give users predictable results

25 Empirical Results (cont.) zNone were very good zBad ones yhome pages offered little direction on content z“Readable” pages were less effective ypeople don’t read, they skim ynicely formed sentences hide key information

26 Empirical Results (cont.) zDownload time wasn’t a big issue yno correlation between time and frustration zGraphic design had very little effect ytake a look at Yahoo ymay be important for brand, marketing, etc. zNavigation must be linked to content yif not, users found sites less usable yforget about designing separately (“shell” sites) xif can remove ½ of content without changing home page, then it is a shell site xgeneric links do not give users predictable results

27 Empirical Results (cont.) zViolating the “sales script” ystandard human-human sales situations xbrowse and then give personal info when you buy employees wear name tags yweb-based situations that violate this fail xusers driven away by giving personal info first xyou must first build trust!

28 Animation zHigher click-thru rates, but yannoyed users xscrolled, covered with hands... xanimation makes it much harder to read/skim zCould be useful in conveying information ythey found no examples of this z“Surfing” different from info. retrieval ymay not be able to design a site for both

29 Frames

30 Frames

31 Empirical Results (cont.) zFrames ynot so bad, but ymake sure large frame changes are obvious as a result of clicks in small (TOC) frame

32 Links zUsers had trouble with short links y“If you click on Disneyland, will you get a map of the park? Ticket Information, etc?” zLonger links clearly set expectations y“How to Read the Pricing and Rating Listings” y“Pricing (How to Read Pricing & Rating Listings) zLinks embedded in paragraphs are worse yhard to find information ycan’t skim - must now read zText links used before graphical links

33 Links (cont.) zWithin-page links ysometimes confusing if user scrolls & has read material already ymake shorter pages to avoid zWrapped links caused confusion ytradeoff here...

34 Good Links

35 Shopping Cart zProblem? yhow to allow customers to purchase multiple items in one transaction zSolution yuse shopping cart metaphor to keep track of items before customer finalizes the purchase xtrack name, quantity, availability, & price

36 How to Apply Shopping Carts zMake available on each page and easy to add items from product pages ? ymake it easy for people to buy! yseems obvious, but many sites don’t do it

37 How to Apply Shopping Carts zProvide detailed info on each item in cart a way to remove item quantity w/ a way to change price name w/ link to detail short description availability

38 How to Apply Shopping Carts zProvide info about all items in cart ysub-totals yshipping, taxes, other charges (if known) yprevent unpleasant surprises

39 How to Apply Shopping Carts zProvide a prominent link to CHECKOUT

40 How to Apply Shopping Carts zHave a link to let people continue shopping

41 How to Apply Shopping Carts zDon’t let unavailable things be added yhard to find a good example of this

42

43 Summary zPersonalization. Why? yif content isn’t fresh, visitors won’t return yfour ways to collect information ? xedit, interview, deduce, collaborative filter zKey idea to inverse-pyramid writing style? ystart with the conclusions & add details below zNon-intuitive empirical results y“readable” pages were less effective. why? xusers scan! – the style of links matters ynavigation must be linked to content. why? xso users can predict where links will take them ydon’t violate the “sales script.” why? xuser’s must trust you before giving personal info