1CS 160, Spring 2002User Interface Design, Prototyping, & EvaluationProfessor Landaylanday1Web Design Patterns #2Slides from:James Landay2Hall of Shame or Hall of Fame?] http://www.balthaser.com/3Hall 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/4Web Design Patterns #2Slides from:James Landay5Outline] Review] PERSONALIZED CONTENT (D4)] INVERSE PYRAMID WRITING STYLE (D7)] Non-intuitive empirical results] SHOPPING CART (F3)6Review] 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 fast2CS 160, Spring 2002User Interface Design, Prototyping, & EvaluationProfessor Landaylanday7PERSONALIZED 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 visitor8PERSONALIZED CONTENT (D4)Solution Diagram9How 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 filter10How to Personalize Your Page11Editing 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 benefitmy.yahoo.com is a good exampleof editing for personalization12Interviewing 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 time3CS 160, Spring 2002User Interface Design, Prototyping, & EvaluationProfessor Landaylanday13Deduction 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 method14Collaborative 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 interest15Scoring 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 for16INVERSE 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 it17INVERSE PYRAMID WRITING STYLE (D7)This is the short blurb describing the articleThis 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 textTo 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 textTo see how well this thing worksThis 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 infoLess important info...TitleShort BlurbsSummariesOverviewsTeasersBackground InformationSupporting DetailsLong QuotesInverse Pyramid Writing18Journalists Use Inverted Pyramidfromwww.nytimes.com4CS 160, Spring 2002User Interface Design, Prototyping, & EvaluationProfessor Landaylanday19ZDNet 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
View Full Document
Unlocking...