1CS 160, Spring 2002User Interface Design, Prototyping, & EvaluationProfessor Landaylanday2/27/2002 1Web Design Process & PatternsSlides from:James Landay2/27/2002 2Hall of Fame or Hall of Shame?] Two sections of pages from cnn.com\ ignore the fuzziness… that is my screen capture2/27/2002 3Hall of Fame] Separate links that word wrap!] Descriptive, longer link names -> know where you will go2/27/2002 4Web Design Process & PatternsSlides from:James Landay2/27/2002 5Outline] Web design process] Motivation for design patterns] Web design patterns] Home page pattern2/27/2002 6Web Design Process2CS 160, Spring 2002User Interface Design, Prototyping, & EvaluationProfessor Landaylanday2/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 handoff*create final deliverable* specifications, guidelines, and prototypes* as much detail as possibleDesign Process: ProductionProductionDesign RefinementDesign ExplorationDiscovery2/27/2002 11Design Specialties] Information Architecture\ encompasses information & navigation design] User Interface Design\ also includes testing & evaluationInformation ArchitectureUser InterfaceDesignUsability EvaluationInformation DesignNavigation DesignGraphic Design2/27/2002 12Artifacts of Design Practice] Designers create representations of sites at multiple levels of detail] Web sites are iteratively refined at all levels of detailSite MapsStoryboards Schematics Mock-ups3CS 160, Spring 2002User Interface Design, Prototyping, & EvaluationProfessor Landaylanday2/27/2002 13Site Maps] High-level, coarse-grained view of entire site2/27/2002 14Storyboards] Interaction sequence, minimal page level detail2/27/2002 15Schematics] Page structure with respect to information & navigation2/27/2002 16Mock-ups] High-fidelity, precise representation of page2/27/2002 17How can we Codify Design Knowledge?] Design Patterns!] Patterns reflect \ what designers create\ what users do on the web across sites] Web design patterns emerge from how we interact with the world around us2/27/2002 18Motivation for Design Patterns] Most examples from UI literature are critiques\ Norman, Nielsen, etc.] Design is about finding solutions] Unfortunately, designers often reinvent\ hard to know how things were done before\ hard to reuse specific solutions] Design patterns are a solution\ reuse existing knowledge of what works well4CS 160, Spring 2002User Interface Design, Prototyping, & EvaluationProfessor Landaylanday2/27/2002 19Design Patterns] First 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”2/27/2002 20Example from Alexander: Night Life2/27/2002 21Example from Alexander: Beer Hall2/27/2002 22Example from Alexander: Alcoves2/27/2002 23Design Patterns] Next 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 notified 2/27/2002 24Design Patterns] We 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 them]Leveragepeople’s usage habits on/off-line\ if Yahoo does things a way that works well, use it5CS 160, Spring 2002User Interface Design, Prototyping, & EvaluationProfessor Landaylanday2/27/2002 25Web Design Patterns Book]The Design of Sites, by Doug van Duyne, James Landay, & Jason Hong] Patterns broken into groups\ trust & credibility\ completing tasks\ page layouts\ site search\ navigation\ fast sites\ site genres\ navigational framework\ homepages\ writing & managing content\ basic e-commerce\ advanced e-commerce2/27/2002 26Pattern Format1. Pattern Title2. Background Information3. Problem Statement] forces4. Solution5. Solution Sketch6. Other Patterns to Consider2/27/2002 27HOMEPAGE PORTAL (C1)] Problem\ without a compelling home page (HP), no one will ever go on to the rest of your site\ surveys show millions of visitors leave after HP[ most 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 Rules] Breadth on left] Highlights articles of general interest in center & right] Links distinguished] Subsections further down show more detail in particular areas2/27/2002 30Six Ways to Make a Good Homepage] Make a positive first impression by\ testing[ uses 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 site6CS 160, Spring 2002User Interface Design, Prototyping, & EvaluationProfessor Landaylanday2/27/2002 31Six Ways to Make a Good Homepage] Focus on a single item of interest\ create a CLEAR FIRST READ (I3)[ draw the eye to a single graphical item\ make it clean & larger than rest on the page\ cut down remaining elements to chosen few2/27/2002 32Six Ways to Make a Good Homepage] Build your site brand\ present the message of what your company does\ include [ UP-FRONT VALUE PROPOSITION (C2)• promise to visitors[ links to PRIVACY POLICY (E4) to show you are trustworthy2/27/2002 33Six Ways to Make a
View Full Document
Unlocking...