Using Design Patterns to Create Cross-Platform Web Sites

1. Using Design Patterns to Create Cross-Platform Web Sites James A. Landay University of Washington Intel Research Seattle With Doug van Duyne, Jason Hong, & Jimmy Lin @ UW Industrial Affiliates Meeting 2/26/2004

2. I-Land by Streitz, et. al. Design in the Ubiquitous Computing Era • Future computing devices won’t have the same UI as current PCs • wide range of devices • small or embedded in environment • often w/ “alternative” I/O & w/o screens • information appliances • lots of devices per user • all working in concert • How does one design for this environment? • Prototyping tools • Design patterns

3. Denim Outpost Shopping cart Suede Damask Crossweaver Informal Prototyping Tools

4. Outline • Introduction • Web Design Patterns • Cross-device Web Design with Damask

5. Design = Solutions • Design is about finding solutions • unfortunately, designers often reinvent • hard to know how thingswere done before • why things were done a certain way • how to reuse solutions

6. Design Patterns • Design patterns communicate common design problems and solutions • first used in architecture [Alexander] • ex. How to create a beer hall where people socialize?

7. Design Patterns • Not too general & not too specific • use a solution “a million times over, without ever doing it the same way twice” • Design patterns are a shared language • a language for “building and planning towns, neighborhoods, houses, gardens, and rooms.” • ex. BEER HALL is part of a CENTER FOR PUBLIC LIFE… • ex. BEER HALL needs spaces for groups to be alone…

8. Web Design Patterns • Now used in Web design • Communicate design problems & solutions • how to create navigation bars for finding relevant content… • how to create a shopping cart that supports check out… • how to make sites where people return & buy…

9. NAVIGATION BAR (K2) • Problem: Customers need a structured, organized way of finding the most important parts of your Web site

10. First-level navigation Link to home Second-level navigation NAVIGATION BAR (K2) • Solution • captures essence on how to solve problem

11. Patterns Support Creativity • Patterns come from successful examples • sites that are so successful that lots of users are familiar with their paradigms (e.g., Yahoo) • interaction techniques/metaphors that work well across many sites (e.g., shopping carts) • Not too general (principles) & not too specific (guidelines) • designer will specialize to their needs • Patterns let designers focus on the hard, unique problems to their design situation • every real design will have many of these

12. PROCESS FUNNEL (H1) • Problem: Need a way to help people complete highly specific stepwise tasks • ex. Create a new account • ex. Fill out survey forms • ex. Check out

13. PROCESS FUNNEL (H1)

14. PROCESS FUNNEL (H1) • What’s the same? • logo, layout, color, fonts • What’s different? • no tab rows • no impulse buys • only navigation on page takes you to next step

15. PROCESS FUNNEL (H1) • Problem: What if users need extra help?

16. Process Tunnel

18. PROCESS FUNNEL (H1) Solution Diagram

19. PROCESS FUNNEL (H1) Related Patterns (A1) E-Commerce (A10) Web Apps (A11) Intranets (H1) Process Funnel (H8) Context-Sensitive Help (I2) Above the Fold (K12) Preventing Errors (K5) High-Viz Action Buttons (K13) Meaningful Error Messages

20. Outline • Introduction • Web Design Patterns • Cross-device Web Design with Damask

21. Example ProblemDesign for Multiple Devices • Hard to design for variety of devices • Use automatically generated UIs • results in UIs poorly optimized for device • last resort for users • Design each device-specific UI separately • rarely coordinated • tedious & time consuming • less time for prototyping

22. SolutionDamask • Tool for designing multiple-device UIs • desktop web • cell phone • speech • Uses design patterns to retarget a device-specific UI to other devices • Compared to creating UI separately • at least same quality • more consistency • less design time

23. Damask Designing a User Interface • Designer • sketches design • browses through patterns • merges device-specific pattern solution into design

26. Damask Designing a User Interface • Designer • sketches design • browses through patterns • merges device-specific pattern solution into design

27. Damask Designing a User Interface • Designer • sketches design • browses through patterns • merges device-specific pattern solution into design Shopping cart PC solution

28. Damask Designing a User Interface • Designer • sketches design • browses through patterns • merges device-specific pattern solution into design Shopping cart PC solution

29. Damask Designing a User Interface • Designer • sketches design • browses through patterns • merges device-specific pattern solution into design Shopping cart

30. Damask Designing a User Interface • Designer customizes pattern instance to fit particular project • this creates another example of the pattern • tool keeps track of customizations to pattern instance Shopping cart

31. Damask Retargeting a User Interface • Designer picks another target device • tool instantiates pattern for target device, applies same customizationsto this instance • results in generated UI for target device • can tweak generated UI Shopping cart Cell-phone solution

32. Damask Retargeting a User Interface • Designer picks another target device • tool instantiates pattern for target device, applies same customizationsto this instance • results in generated UI for target device • can tweak generated UI Shopping cart

33. Damask Retargeting a User Interface • Designer picks another target device • tool instantiates pattern for target device, applies same customizationsto this instance • results in generated UI for target device • can tweak generated UI Shopping cart

34. DamaskMore Research Issues • Creating patterns from previous designs • Retargeting part of design outside patterns • use model-based UI techniques • Showing relationships among device-specific UIs • sometimes want to apply changes globally & sometimes you don’t • Supporting multiple designers • especially tricky since design process in flux

35. Design Pre-Patterns for Ubicomp • Can patterns actually lead design? • Pattern purists will say no – so let’s call ‘em pre-patterns • Can we find patterns from the most popular apps? • Mobile communication via cell phone • CONTEXT SENSISTIVE I/O (D6) – Use appropriate input & output modalities for current environment • e.g., in movie theater don’t use sound – use vibration/visual cues • e.g., in a car use sound • Can we find patterns that are found across several different ubicomp (research) applications? • We identified 45 ubicomp patterns & an evaluation with designers showed they helped improve designs

36. Conclusions • Design patterns encapsulate design knowledge • Damask: a tool for designing, prototyping multiple-device UIs • uses design patterns to retarget one device-specific UI to other devices • Ubicomp design pre-patterns • attempt to lead design practice through research • Next steps • evaluate the success of designers using the DOS • finish building & evaluating Damask • continue exploring ubicomp pre-patterns

37. Using Design Patterns to Create Cross-Device Web Sites • Thanks! • More information http://guir.berkeley.edu/damask http://designofsites.com

38. Extra Slides

39. Concrete Interface Model-based UI Techniques • Forces designer to start with abstract widgets • designers think in terms of concrete widgets • Does not handle radically differently structured UIs well • use patterns to address this issue Abstract Model Specialized Application Model Specialization Translation Device profile