CS 160: Lecture 14OutlineArtifacts of Design PracticeSite MapsStoryboardsSchematicsMock-upsHow can we Codify Design Knowledge?Motivation for Design PatternsDesign PatternsExample from Alexander: Night LifeExample from Alexander: Beer HallExample from Alexander: AlcovesSlide 14Slide 15Web Design Patterns BookPattern FormatHome Page Design RulesSlide 19Slide 20Slide 21Six Ways to Make a Good Home PageSlide 23Slide 24Slide 25Slide 26Slide 27Slide 28SummaryPattern ExamplesPattern ElementsPersonalizing Your Home PageSlide 33How to Personalize Your PageSlide 35Slide 36Editing Personalization InfoInterviewing for Personalization InfoDeduction for Personalization InfoCollaborative Filtering for Personalization InfoScoring Methods to Match Content to Audience01/14/19 1CS 160: Lecture 14Professor John CannySpring 200301/14/19 2OutlineMotivationDesign patterns in architecture & SEWeb design patternsHome page patterns01/14/19 3Artifacts of Design PracticeDesigners create representations of sites at multiple levels of detailWeb sites are iteratively refined at all levels of detailSite MapsStoryboards Schematics Mock-ups01/14/19 4Site MapsHigh-level, coarse-grained view of entire site01/14/19 5StoryboardsInteraction sequence, minimal page level detail01/14/19 6SchematicsPage structure with respect to information & navigation01/14/19 7Mock-upsHigh-fidelity, precise representation of page01/14/19 8How can we Codify Design Knowledge?Design Patterns!Patterns reflect *what designers create*what users do on the web across sitesWeb design patterns emerge from how we interact with the world around us01/14/19 9Motivation for Design PatternsMost examples from UI literature are critiques*Norman, Nielsen, etc.Design is about finding solutionsUnfortunately, designers often reinvent*hard to know how things were done before*hard to reuse specific solutionsDesign patterns are a solution*reuse existing knowledge of what works well01/14/19 10Design PatternsFirst used in architecture [Alexander]Communicate design problems & solutions*how big doors should be & where…*how to create a beer garden where people socialize…*how to use handles (remember Norman)…Not too general & not too specific*use solution “a million times over, without ever doing it the same way twice”01/14/19 11Example from Alexander: Night Life01/14/19 12Example from Alexander: Beer Hall01/14/19 13Example from Alexander: Alcoves01/14/19 14Design PatternsNext used in software engineering [Gamma, et. al.]*communicate design problems & solutions+Proxy~surrogate for another object to control access to it+Observer~when one object changes state, its dependents are notified01/14/19 15Design PatternsWe can do the same for Web Design*communicate design problems & solutions+how can on-line shoppers keep track of purchases?~use the idea of shopping in physical stores with carts+how do we communicate new links to customers?~blue underlined links are the standard -> use themLeverage people’s usage habits on/off-line*if Yahoo does things a way that works well, use it01/14/19 16Web Design Patterns BookThe Design of Sites, by Doug van Duyne, James Landay, & Jason HongPatterns broken into groups*trust & credibility*completing tasks*page layouts*site search*navigation*fast sitessite genresnavigational frameworkhomepageswriting & managing contentbasic e-commerceadvanced e-commerce01/14/19 17Pattern Format1. Pattern Title2. Background Information3. Problem Statementforces4. Solution5. Solution Sketch6. Other Patterns to Consider01/14/19 18Home Page Design Rules01/14/19 19Home Page Design RulesStrong 1st impressions*compelling titles & logos*simple navigationCreate a site that will be easy to update01/14/19 20Home Page Design RulesBreadth on leftHighlights articles of general interest in center & rightLinks distinguishedSubsections further down show more detail in particular areas01/14/19 21Home Page Design RulesProblem*without a compelling home page (H/P), no one will ever go on to the rest of your site*surveys show millions of visitors leave after H/P+most will never come back -> lost sales, etc.01/14/19 22Six Ways to Make a Good Home PageMake a positive first impression by*testing+appropriate LINK NAMES & FAMILIAR LANGUAGE?*looking at GUEST PROFILES (another pattern)+appropriate colors & graphics?~neon green & screaming graphics on a skateboarding site, but not on a business-to-business or health site01/14/19 23Six Ways to Make a Good Home PageFocus on a single item of interest*create a good “first read”+draw the eye to a single graphical item*make it clean & largerthan rest on the page*cut down remainingelements to chosen few01/14/19 24Six Ways to Make a Good Home PageBuild your site brand*present the message of what your company does*include the value proposition (promise to visitors)+links to CONFIDENTIALITY INFORMATION & SITE ABUSE POLICIES to show you are trustworthy01/14/19 25Six Ways to Make a Good Home PageMake navigation easy to use*novices & experts must instantly “get it”*use MULTIPLE WAYS TO NAVIGATE+basic features of site as EMBEDDED LINKS+NAVIGATIONS BARS (there are several types)+HTML table COLORED BACKGROUNDS to delineate sections +REUSABLE ACCENT GRAPHICS to highlight new things01/14/19 26Six Ways to Make a Good Home PageLure visitors to return*with fresh content+keep it updated so there is a reason to come back*by seducing with text+you have only seconds~lively, sparkling, precise01/14/19 27Make it download quickly (2-3 seconds)if not, they’ll go elsewhereStrategiesSix Ways to Make a Good Home Page*use HTML text as much as possible+first thing to download+images take 10 server-browser comms+get a web-savvy graphic artist (font colors, styles, & b/g color)*use small graphics*use min. number of columns & sections in a grid layout+easy to scan01/14/19 28Six Ways to Make a Good Home PageMake it download quickly (2-3 seconds)*if not, they’ll go elsewhere. Which have left due to slowness?01/14/19 29SummaryDesign patterns allow us to reuse?* design knowledgePreviously used in?*architecture & S/EWeb design patterns are new & evolving*example: Home Page+problem~if it isn’t compelling, they won’t return+solutions~make a positive first impression~focus on a single item~build your site brand~make navigation easy~lure visitors to return~make it download fast01/14/19 30Pattern
View Full Document
Unlocking...