Using Design Patterns to Create CrossDevice Web Sites

1
Using Design Patterns to Create Cross-Device Web
Sites
James A. Landay UC Berkeley With Doug van
Duyne, Jason Hong, Jimmy Lin
2
ProblemDesign for Multiple Devices

• Computing world increasingly diverse
• Hard to design for variety of devices
• Use automatically generated UIs
• results in UIs poorly optimized for device
• only used as last resort by end-users

3
ProblemDesign for Multiple Devices

• Design each device-specific UI separately
• rarely coordinated
• may lead to inconsistencies
• tedious
• redesign every time new device comes out
• time-consuming
• less time for prototyping

4
Solution Damask

• Tool for designing multiple-device UIs
• desktop web
• cell phone
• speech
• Uses design patterns to retarget a
  device-specific UI to other devices

5
Solution Damask

• Compared to creating each UI separately
• at least same quality
• more consistency
• less design time
• 1 device-specific UI a little for each
  additional device

6
Outline

• Introduction
• Design patterns
• Damask

7
Design Patterns

• Design is about finding solutions
• Unfortunately, designers often reinvent
• Hard to know how things were done before
• Why things were done a certain way
• How to reuse solutions
• Norman recently said
• as computer technology moves into other
  fields, they're repeating the same mistakes. Each
  time, people think everything is new. It takes
  about five years to sort that out

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

9
Design Patterns

• Not too general and 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

10
A Web of Design Patterns
(8) Mosaic of Subcultures
Cities Towns
(31) Promenade
(33) Night Life
(90) Beer Hall
Local Gatherings
(95) Building Complex
Interiors
(181) The Fire
(179) Alcoves
11
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 e-commerce sites where people return
  buy

12
Navigation Bar

• Problem Customers need a structured, organized
  way of finding the most important parts of your
  Web site

13
Navigation Bar

• Solution
• Captures essence on how to solve problem

14
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 not too specific
• you need to specialize to your needs
• Patterns let you focus on the hard, unique
  problems to your design situation
• every real design will have many of these

15
Pattern Groups

• Our patterns organized by group

Site genres Navigational framework Home
page Content management Trust and
credibility Basic ecommerce
Advanced ecommerce Completing tasks Page
layouts Search Page-level navigation Speed
16
Process Funnel

• 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

17
Process Funnel

• Desktop Solution

18
Process Funnel

• Web Solution

19
Process Funnel

• Whats the same?
• Logo, layout, color, fonts

• Web Solution

• Whats different?
• No tab rows
• No impulse buys
• Only navigation on page takes you to next step

20
Process Funnel

• Problem What if users need extra help?

21
Process Tunnel
22
Process Tunnel
23
Process Funnel Solution Diagram
24
Process Funnel Related Patterns
(A10) Web Apps
(A1) E-Commerce
(A11) Intranets
(H1) Process Funnel
(K2) Navigation Bars
(H8) Context-Sensitive Help
(K3) Tab Rows
(I2) Above the Fold
(K5) High-Viz Action Buttons
(K4) Action Buttons
(K12) Preventing Errors
(K13) Meaningful Error Messages
25
Format of Web Design Patterns

• Pattern Name and Number
• Exemplar
• Background
• Problem
• Forces
• Solution Diagram
• Related Patterns

26
(No Transcript)
27
Bus Stops
Solution Diagram
Related Patterns
28
Process Funnel Related Patterns
(A10) Web Apps
(A1) E-Commerce
(A11) Intranets
(H1) Process Funnel
(K2) Navigation Bars
(H8) Context-Sensitive Help
(K3) Tab Rows
(I2) Above the Fold
(K5) High-Viz Action Buttons
(K4) Action Buttons
(K12) Preventing Errors
(K13) Meaningful Error Messages
29
Meaningful Error Messages

• Problem When customers make mistakes, they need
  to be informed of the problem and how to recover
• Solution
• Clear statement of problem
• Explain how to recover
• Position near the problem

30
(No Transcript)
31

• Clear error message?
• Two messages at top
• Explains how to recover?
• Says it is missing required information
• Positioned near the problem?
• Error messages far
• Required info marked in green, hard to see

32
(No Transcript)
33

• Clear error message
• Explains how to recover
• Positioned near the problem

34
Meaningful Error Messages Solution Diagram
35
Meaningful Error Messages Related Patterns
(H1) Process Funnel
(H2) Sign-in / New Account
(F1) Quick-Flow Checkout
(K12) Preventing Errors
(K11) Familiar Language
(K13) Meaningful Error Messages
36
Takeaway Ideas From DOS

• Lots of issues involved in designing web sites
• Design patterns one way of capturing good design
  knowledge
• Design patterns are an ongoing conversation
• weve started it with 92 patterns
• time for the you to comment contribute!

37
Outline

• Introduction
• Design patterns
• Damask

38
Damask Designing a User Interface

• Designer
• sketches design
• browses through patterns
• merges device-specific pattern solution into
  design

39
Damask Designing a User Interface

• Designer
• sketches design
• browses through patterns
• merges device-specific pattern solution into
  design

Shopping cart PC solution
40
Damask Designing a User Interface

• Designer
• sketches design
• browses through patterns
• merges device-specific pattern solution into
  design

Shopping cart PC solution
41
Damask Designing a User Interface

• Designer
• sketches design
• browses through patterns
• merges device-specific pattern solution into
  design

Shopping cart
42
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
43
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
44
Damask Retargeting a User Interface

• Designer picks another target device
• tool instantiates pattern for target device,
  applies same customizations to this instance
• results in generated UI for target device
• can tweak generated UI

Shopping cart Cell-phone solution
45
Damask Retargeting a User Interface

• Designer picks another target device
• tool instantiates pattern for target device,
  applies same customizations to this instance
• results in generated UI for target device
• can tweak generated UI

Shopping cart
46
Damask Retargeting a User Interface

• Designer picks another target device
• tool instantiates pattern for target device,
  applies same customizations to this instance
• results in generated UI for target device
• can tweak generated UI

Shopping cart
47
DamaskMore Research Issues

• Searching patterns
• Creating patterns
• Retargeting part of design outside patterns
• use model-based UI techniques
• Consistency among device-specific UIs
• Showing relationships among device-specific UIs
• Handling multiple designers
• especially tricky since design process in flux

48
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
• Next steps
• select/find relevant patterns
• build and evaluate Damask

49
Using Design Patterns to Create Cross-Device Web
Sites

• Thanks!
• More information
• http//guir.berkeley.edu/damask
• http//designofsites.com

50
Extra Slides
51
Model-based UI Techniques
Abstract Model
Specialized Application Model
Specialization
Translation
Device profile

• 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