Web Design Process & PatternsHall of Fame or Hall of Shame?Hall of FameSlide 4OutlineWeb Design ProcessDesign Process: DiscoveryDesign Process: Design ExplorationDesign Process: Design RefinementDesign Process: ProductionDesign SpecialtiesArtifacts 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 23Slide 24Web Design Patterns BookPattern FormatHOMEPAGE PORTAL (C1)Slide 28HOMEPAGE PORTAL (C1) Design RulesSix Ways to Make a Good HomepageSlide 31Slide 32Slide 33Slide 34Slide 35Slide 36Slide 37Summary2/27/2002 1Web Design Process & PatternsSlides from:James Landay2/27/2002 2Hall of Fame or Hall of Shame?Two sections of pages from cnn.comignore the fuzziness… that is my screen capture2/27/2002 3Hall of FameSeparate links that word wrap!Descriptive, longer link names -> know where you will go2/27/2002 4Web Design Process & PatternsSlides from:James Landay2/27/2002 5OutlineWeb design processMotivation for design patternsWeb design patternsHome page pattern2/27/2002 6Web Design Process2/27/2002 7Design Process: DiscoveryAssess needs*understand client’s expectations*determine scope of project*characteristics of users*evaluate existing site and/or competitionProductionDesign RefinementDesign ExplorationDiscovery2/27/2002 8Design Process: Design ExplorationProductionDesign RefinementDesign ExplorationDiscoveryGenerate multiple designs*visualize solutions to discovered issues*information & navigation design*early graphic design*select one design for development2/27/2002 9Design Process: Design RefinementProductionDesign RefinementDesign ExplorationDiscoveryDevelop the design*increasing level of detail*heavy emphasis on graphic design*iterate on design2/27/2002 10Prepare design for handof*create final deliverable*specifications, guidelines, and prototypes*as much detail as possibleDesign Process: ProductionProductionDesign RefinementDesign ExplorationDiscovery2/27/2002 11Design SpecialtiesInformation Architectureencompasses information & navigation designUser Interface Designalso includes testing & evaluationInformation ArchitectureUser InterfaceDesignUsability EvaluationInformation DesignNavigation DesignGraphic Design2/27/2002 12Artifacts of Design PracticeDesigners create representations of sites at multiple levels of detailWeb sites are iteratively refined at all levels of detailSite MapsStoryboards Schematics Mock-ups2/27/2002 13Site MapsHigh-level, coarse-grained view of entire site2/27/2002 14StoryboardsInteraction sequence, minimal page level detail2/27/2002 15SchematicsPage structure with respect to information & navigation2/27/2002 16Mock-upsHigh-fidelity, precise representation of page2/27/2002 17How can we Codify Design Knowledge?Design Patterns!Patterns reflect what designers createwhat users do on the web across sitesWeb design patterns emerge from how we interact with the world around us2/27/2002 18Motivation for Design PatternsMost examples from UI literature are critiquesNorman, Nielsen, etc.Design is about finding solutionsUnfortunately, designers often reinventhard to know how things were done beforehard to reuse specific solutionsDesign patterns are a solutionreuse existing knowledge of what works well2/27/2002 19Design PatternsFirst used in architecture [Alexander]Communicate design problems & solutionshow 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 specificuse solution “a million times over, without ever doing it the same way twice”2/27/2002 20Example from Alexander: Night Life2/27/2002 21Example from Alexander: Beer Hall2/27/2002 22Example from Alexander: Alcoves2/27/2002 23Design PatternsNext used in software engineering [Gamma, et. al.]communicate design problems & solutionsProxy•surrogate for another object to control access to itObserver•when one object changes state, its dependents are notified2/27/2002 24Design PatternsWe can do the same for Web Designcommunicate design problems & solutionshow can on-line shoppers keep track of purchases?•use the idea of shopping in physical stores with cartshow do we communicate new links to customers?•blue underlined links are the standard -> use themLeverage people’s usage habits on/of-lineif Yahoo does things a way that works well, use it2/27/2002 25Web Design Patterns BookThe Design of Sites, by Doug van Duyne, James Landay, & Jason HongPatterns broken into groupstrust & credibilitycompleting taskspage layoutssite searchnavigationfast sitessite genresnavigational frameworkhomepageswriting & managing contentbasic e-commerceadvanced e-commerce2/27/2002 26Pattern Format1. Pattern Title2. Background Information3. Problem Statementforces4. Solution5. Solution Sketch6. Other Patterns to Consider2/27/2002 27HOMEPAGE PORTAL (C1)Problemwithout a compelling home page (HP), no one will ever go on to the rest of your sitesurveys show millions of visitors leave after HPmost will never come back -> lost sales, etc.2/27/2002 28HOMEPAGE PORTAL (C1)Problem: home pages are portal through which most visitors pass. They must seduce visitors while simultaneously balancing a large number of issues, including branding, navigation, content, and the ability to download quickly2/27/2002 29HOMEPAGE PORTAL (C1) Design RulesBreadth on leftHighlights articles of general interest in center & rightLinks distinguishedSubsections further down show more detail in particular areas2/27/2002 30Six Ways to Make a Good HomepageMake a positive first impression bytestinguses DESCRIPTIVE, LONGER LINK NAMES (K9) and FAMILIAR LANGUAGE (K11)understanding customers•who are they? contextual inquiry & surveys•appropriate colors & graphics?–neon green & screaming graphics on a skateboarding site, but not on a business-to-business or health site2/27/2002 31Six Ways to Make a Good HomepageFocus on a single item of interestcreate a CLEAR FIRST READ (I3)draw the eye to a single graphical itemmake it clean & larger than rest on the pagecut down remaining elements
View Full Document
Unlocking...