2/27/20021 Web Design Process & Patterns Slides from: James Landay

2/27/20022 Hall of Fame or Hall of Shame? z Two sections of pages from cnn.com yignore the fuzziness… that is my screen capture

2/27/20023 Hall of Fame z Separate links that word wrap! z Descriptive, longer link names -> know where you will go

2/27/20024 Web Design Process & Patterns Slides from: James Landay

2/27/20025 Outline zWeb design process zMotivation for design patterns zWeb design patterns zHome page pattern

2/27/20026 Web Design Process

2/27/20027 Design Process: Discovery Assess needs *understand client’s expectations *determine scope of project *characteristics of users *evaluate existing site and/or competition Production Design Refinement Design Exploration Discovery

2/27/20028 Design Process: Design Exploration Production Design Refinement Design Exploration Discovery Generate multiple designs *visualize solutions to discovered issues *information & navigation design *early graphic design *select one design for development

2/27/20029 Design Process: Design Refinement Production Design Refinement Design Exploration Discovery Develop the design *increasing level of detail *heavy emphasis on graphic design *iterate on design

2/27/ Prepare design for handoff *create final deliverable *specifications, guidelines, and prototypes *as much detail as possible Design Process: Production Production Design Refinement Design Exploration Discovery

2/27/ Design Specialties z Information Architecture yencompasses information & navigation design z User Interface Design yalso includes testing & evaluation Information Architecture User Interface Design Usability Evaluation Information Design Navigation Design Graphic Design

2/27/ Artifacts of Design Practice zDesigners create representations of sites at multiple levels of detail zWeb sites are iteratively refined at all levels of detail Site Maps StoryboardsSchematicsMock-ups

2/27/ Site Maps zHigh-level, coarse-grained view of entire site

2/27/ Storyboards zInteraction sequence, minimal page level detail

2/27/ Schematics zPage structure with respect to information & navigation

2/27/ Mock-ups zHigh-fidelity, precise representation of page

2/27/ How can we Codify Design Knowledge? zDesign Patterns! zPatterns reflect ywhat designers create ywhat users do on the web across sites zWeb design patterns emerge from how we interact with the world around us

2/27/ Motivation for Design Patterns zMost examples from UI literature are critiques yNorman, Nielsen, etc. zDesign is about finding solutions zUnfortunately, designers often reinvent yhard to know how things were done before yhard to reuse specific solutions zDesign patterns are a solution yreuse existing knowledge of what works well

2/27/ Design Patterns zFirst used in architecture [Alexander] zCommunicate design problems & solutions yhow big doors should be & where… yhow to create a beer garden where people socialize… yhow to use handles (remember Norman)… zNot too general & not too specific yuse solution “a million times over, without ever doing it the same way twice”

2/27/ Example from Alexander: Night Life

2/27/ Example from Alexander: Beer Hall

2/27/ Example from Alexander: Alcoves

2/27/ Design Patterns zNext used in software engineering [Gamma, et. al.] ycommunicate design problems & solutions xProxy surrogate for another object to control access to it xObserver when one object changes state, its dependents are notified

2/27/ Design Patterns zWe can do the same for Web Design ycommunicate design problems & solutions xhow can on-line shoppers keep track of purchases? use the idea of shopping in physical stores with carts xhow do we communicate new links to customers? blue underlined links are the standard -> use them zLeverage people’s usage habits on/off-line yif Yahoo does things a way that works well, use it

2/27/ Web Design Patterns Book zThe Design of Sites, by Doug van Duyne, James Landay, & Jason Hong zPatterns broken into groups ytrust & credibility ycompleting tasks ypage layouts ysite search ynavigation yfast sites ysite genres ynavigational framework yhomepages ywriting & managing content ybasic e-commerce yadvanced e-commerce

2/27/ Pattern Format 1.Pattern Title 2.Background Information 3.Problem Statement zforces 4.Solution 5.Solution Sketch 6.Other Patterns to Consider

2/27/ HOMEPAGE PORTAL (C1) zProblem ywithout a compelling home page (HP), no one will ever go on to the rest of your site ysurveys show millions of visitors leave after HP xmost will never come back -> lost sales, etc.

2/27/ HOMEPAGE PORTAL (C1) z 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 quickly

2/27/ HOMEPAGE PORTAL (C1) Design Rules z Breadth on left z Highlights articles of general interest in center & right z Links distinguished z Subsections further down show more detail in particular areas

2/27/ Six Ways to Make a Good Homepage zMake a positive first impression by ytesting xuses DESCRIPTIVE, LONGER LINK NAMES (K9) and FAMILIAR LANGUAGE (K11) xunderstanding 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 site

2/27/ Six Ways to Make a Good Homepage z Focus on a single item of interest ycreate a CLEAR FIRST READ (I3) xdraw the eye to a single graphical item ymake it clean & larger than rest on the page ycut down remaining elements to chosen few

2/27/ Six Ways to Make a Good Homepage zBuild your site brand ypresent the message of what your company does yinclude xUP-FRONT VALUE PROPOSITION (C2) promise to visitors xlinks to PRIVACY POLICY (E4) to show you are trustworthy

2/27/ Six Ways to Make a Good Homepage zBuild your site brand ypresent the message of what your company does yinclude xUP-FRONT VALUE PROPOSITION (C2) promise to visitors xlinks to PRIVACY POLICY (E4) to show you are trustworthy

2/27/ Six Ways to Make a Good Homepage z Make navigation easy to use ynovices & experts must instantly “get it” yuse MULTIPLE WAYS TO NAVIGATE (B1) xbasic features of site as EMBEDDED LINKS (K7) xNAVIGATIONS BARS (K2) there are several types xHTML POWER (L4) table colored backgrounds to delineate sections xREUSABLE IMAGES (L5) to highlight new things

2/27/ Six Ways to Make a Good Homepage z Lure visitors to return ywith fresh content xkeep it updated so there is a reason to come back yby seducing with text xyou have only seconds lively, sparkling, precise

2/27/ zMake it download quickly (2-3 seconds) yif not, they’ll go elsewhere zStrategies Six Ways to Make a Good Homepage yuse HTML POWER (L4) (text) as much as possible xfirst thing to download ximages take 10 server-browser comms xget a web-savvy graphic artist (font colors, styles, & b/g color) yuse FAST-DOWNLOADING IMAGES (L2) xsmall graphics yuse min. number of columns & sections in a GRID LAYOUT (I1) xeasy to scan

2/27/ Six Ways to Make a Good Homepage zMake it download quickly (2-3 seconds) yif not, they’ll go elsewhere. Which have you left due to slowness?

2/27/ Summary zDesign patterns allow us to reuse? y design knowledge zPreviously used in? yarchitecture & S/E zWeb design patterns are new & evolving yexample: Homepage xproblem if it isn’t compelling, they won’t return xsolutions make a positive first impression focus on a single item build your site brand make navigation easy lure visitors to return make it download fast