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

2. 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

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

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

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

6. 2/27/20026 Web Design Process

7. 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

8. 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

9. 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

10. 2/27/200210 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

11. 2/27/200211 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

12. 2/27/200212 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

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

14. 2/27/200214 Storyboards zInteraction sequence, minimal page level detail

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

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

17. 2/27/200217 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

18. 2/27/200218 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

19. 2/27/200219 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”

20. 2/27/200220 Example from Alexander: Night Life

21. 2/27/200221 Example from Alexander: Beer Hall

22. 2/27/200222 Example from Alexander: Alcoves

23. 2/27/200223 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

24. 2/27/200224 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

25. 2/27/200225 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

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

27. 2/27/200227 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.

28. 2/27/200228 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

29. 2/27/200229 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

30. 2/27/200230 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

31. 2/27/200231 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

32. 2/27/200232 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

33. 2/27/200233 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

34. 2/27/200234 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

35. 2/27/200235 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

36. 2/27/200236 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

37. 2/27/200237 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?

38. 2/27/200238 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