Download - Design Patterns for the Web
![Page 1: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/1.jpg)
Prof. James A. LandayUniversity of Washington
Autumn 2006
Design Patterns for the WebDesign Patterns for the Web
October 31, 2006
![Page 2: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/2.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 2
Hall of Fame or Hall of Shame?
• java.sun.com
![Page 3: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/3.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 3
Hall of Fame
• Good branding– java logo– value prop
• Inverted pyramid writing style
• Fresh content– changing first
read– news in sidebar
• Obvious Links
![Page 4: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/4.jpg)
Prof. James A. LandayUniversity of Washington
Autumn 2006
Design Patterns for the WebDesign Patterns for the Web
October 31, 2006
![Page 5: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/5.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 5
Outline
• Review of Heuristic Evaluation
• Web Design Process, Specialties & Artifacts
• Detailed Design Example
• Web Design Patterns
![Page 6: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/6.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 6
Review of Heuristic Evaluation• Have evaluators go through the UI twice• Ask them to see if it complies with heuristics
– note where it doesn’t & say why
• Combine the findings from 3 to 5 evaluators• Have evaluators independently rate severity• Alternate with user testing
![Page 7: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/7.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 7
Good Web Site Design Matters
Good Web Site Design can Lead to Healthy Saleshttp://www.nytimes.com/library/tech/99/08/cyber/commerce/30commerce.html
• NY Times, Aug 30 1999, on IBM Web site– “Most popular feature was … search …
because people couldn't figure out how to navigate the site“
– “The second most popular feature was the help button, because the search technology was so ineffective.”
• After redesign– use of the "help" button decreased 84 percent
– sales increased 400 percent
![Page 8: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/8.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 8
Web Design Process
![Page 9: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/9.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 9
Design Specialties
• Information Architecture– encompasses
information & navigation design
• User Interface Design– also includes
testing & evaluation
Information Architecture
User InterfaceDesign
Information Design
Navigation Design
Graphic Design
Usability Evaluation
![Page 10: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/10.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 10
Artifacts of Design Practice
• Designers create representations of sites at multiple levels of detail
• Web sites are iteratively refined at all levels of detail
Site Maps Storyboards Schematics Mock-ups
![Page 11: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/11.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 11
Site Maps
• High-level, coarse-grained view of entire site
![Page 12: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/12.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 12
Storyboards
• Interaction sequence, minimal page level detail
![Page 13: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/13.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 13
Schematics
• Page structure w/ respect to information & navigation
![Page 14: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/14.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 14
Mock-ups
• High-fidelity, precise representation of page
![Page 15: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/15.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 15
1
![Page 16: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/16.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 16
2
![Page 17: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/17.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 17
3
![Page 18: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/18.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 18
4
![Page 19: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/19.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 19
5
![Page 20: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/20.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 20
Quick-Flow Checkouts6
![Page 21: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/21.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 21
Basic Web Design
• Let's take a closer look page by page
![Page 22: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/22.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 22
1
![Page 23: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/23.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 23
• What site is this?– Logo in top-left corner
denotes the site– Another logo at top-right to
reinforce– examples of SITE BRANDING (E1)
• What site is this?– Logo in top-left corner
denotes the site– Another logo at top-right to
reinforce– examples of SITE BRANDING (E1)
1
![Page 24: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/24.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 24
• What kind of site is this?– Shopping cart icon– Tab row content & categories on left– Prices in content area– UP-FRONT VALUE PROPOSITION (C2)
– example of PERSONAL E-COMMERCE (A1)
• What kind of site is this?– Shopping cart icon– Tab row content & categories on left– Prices in content area– UP-FRONT VALUE PROPOSITION (C2)
– example of PERSONAL E-COMMERCE (A1)
1
![Page 25: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/25.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 25
• What can I do here?– Welcome for new visitors– Tab row / Search on top– “Categories”– Prices– Examples of OBVIOUS LINKS (K10)
• What can I do here?– Welcome for new visitors– Tab row / Search on top– “Categories”– Prices– Examples of OBVIOUS LINKS (K10)
1
![Page 26: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/26.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 26
• Most important info visible without scrolling
• ABOVE THE FOLD (I2)
• Most important info visible without scrolling
• ABOVE THE FOLD (I2)
1
![Page 27: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/27.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 27
2
![Page 28: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/28.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 28
• What site am I at?– Logo in upper-left reinforces
brand, can click to go to home– Same font, layout, color
scheme also reinforces– examples of SITE BRANDING (E1)
• What site am I at?– Logo in upper-left reinforces
brand, can click to go to home– Same font, layout, color
scheme also reinforces– examples of SITE BRANDING (E1)
2
![Page 29: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/29.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 29
• Where am I in the site?– “Home > Music” are
LOCATION BREAD CRUMBS (K6)
– TAB ROW (K3) says “Music”– Album cover, “Product
Highlights”, and CD cover
• Where am I in the site?– “Home > Music” are
LOCATION BREAD CRUMBS (K6)
– TAB ROW (K3) says “Music”– Album cover, “Product
Highlights”, and CD cover
2
![Page 30: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/30.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 30
• Can I trust these sellers? – Who am I buying from?– Are they reputable?– What about shipping?
• Can I trust these sellers? – Who am I buying from?– Are they reputable?– What about shipping?
2
![Page 31: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/31.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 31
• The Fold– Hmm, what’s below here?
• The Fold– Hmm, what’s below here?
2
![Page 32: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/32.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 32
• Impulse buy• PESONALIZED
RECOMMENDATIONS (G3)
• About this album• Lots of unused space• Still more info below…
• Impulse buy• PESONALIZED
RECOMMENDATIONS (G3)
• About this album• Lots of unused space• Still more info below…
2
![Page 33: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/33.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 33
• Is this product any good?– Editorial reviews– Customer reviews– RECOMMENDATION
COMMUNITY (G4)
• Is this product any good?– Editorial reviews– Customer reviews– RECOMMENDATION
COMMUNITY (G4)
2
![Page 34: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/34.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 34
3
![Page 35: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/35.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 35
• What site am I at? – Logo in upper-left– Colors, layout, font– examples of SITE BRANDING (E1)
• What site am I at? – Logo in upper-left– Colors, layout, font– examples of SITE BRANDING (E1)
3
![Page 36: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/36.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 36
• Where am I in the site?– Last link clicked was “Buy!”– “Shopping Cart” and “Proceed
to Checkout” reinforce that this is “the right page”
– SHOPPING CART (F3)
• Where am I in the site?– Last link clicked was “Buy!”– “Shopping Cart” and “Proceed
to Checkout” reinforce that this is “the right page”
– SHOPPING CART (F3)
3
![Page 37: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/37.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 37
• Cross-selling– Possibly a pleasant
surprise– Impulse buy– CROSS-SELLING & UP-
SELLING (G2)
• Cross-selling– Possibly a pleasant
surprise– Impulse buy– CROSS-SELLING & UP-
SELLING (G2)
3
![Page 38: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/38.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 38
• What am I going to buy?– Easy to remove– Easy to move to wishlist
• How much will it cost?– Shipping costs there, no
nasty surprises• SHOPPING CART (F3)
• What am I going to buy?– Easy to remove– Easy to move to wishlist
• How much will it cost?– Shipping costs there, no
nasty surprises• SHOPPING CART (F3)
3
![Page 39: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/39.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 39
• What can I do?– “Proceed to Checkout” HIGH
VISIBILITY ACTION BUTTON (K5)
– Visually distinct– 3D, looks clickable– Repeated above and
below the fold
• What can I do?– “Proceed to Checkout” HIGH
VISIBILITY ACTION BUTTON (K5)
– Visually distinct– 3D, looks clickable– Repeated above and
below the fold
3
![Page 40: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/40.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 40
4
![Page 41: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/41.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 41
• What if I don’t have a User ID?
• What if I forgot my password?
• SIGN-IN/NEW ACCOUNT (H2)
• What if I don’t have a User ID?
• What if I forgot my password?
• SIGN-IN/NEW ACCOUNT (H2)
4
![Page 42: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/42.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 42
5
![Page 43: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/43.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 43
• What site?– Logo, layout, color, fonts
• Where in site?– Checkout, step 1 of 3– “Choose shipping
address”– QUICK-FLOW CHECKOUT (F1)
• What site?– Logo, layout, color, fonts
• Where in site?– Checkout, step 1 of 3– “Choose shipping
address”– QUICK-FLOW CHECKOUT (F1)
5
![Page 44: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/44.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 44
• Note what’s different– No tab rows– No impulse buys– Only navigation on page
takes you to next step
• This is a PROCESS FUNNEL (H1)
– Extraneous info and links removed to focus users
• Note what’s different– No tab rows– No impulse buys– Only navigation on page
takes you to next step
• This is a PROCESS FUNNEL (H1)
– Extraneous info and links removed to focus users
5
![Page 45: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/45.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 45
Quick-Flow Checkouts6
![Page 46: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/46.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 46
Quick-Flow Checkouts
• Last step of process– Step 3, “Place Order”– “Place my order” button
• Two HIGH-VISIBILITY ACTION
BUTTONS (K5) for fold
• Last step of process– Step 3, “Place Order”– “Place my order” button
• Two HIGH-VISIBILITY ACTION
BUTTONS (K5) for fold
6
![Page 47: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/47.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 47
Quick-Flow Checkouts
• No nasty surprises– Can see order– Total price is same as
shopping cart– ORDER SUMMARY (F7)
• No nasty surprises– Can see order– Total price is same as
shopping cart– ORDER SUMMARY (F7)
6
![Page 48: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/48.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 48
Quick-Flow Checkouts
• Easy to change shipping and billing
• Easy to save this info– Easier to setup info in
context of specific task– Clearer to users why this
info is needed
• Easy to change shipping and billing
• Easy to save this info– Easier to setup info in
context of specific task– Clearer to users why this
info is needed
![Page 49: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/49.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 49
Design = Solutions
• 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
![Page 50: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/50.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 50
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?
![Page 51: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/51.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 51
Using 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 – for “building and planning towns,
neighborhoods, houses, gardens, & rooms.”– Ex. Beer hall is part of a center for public
life…– Ex. Beer hall needs spaces for groups to be
alone… ALCOVES
![Page 52: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/52.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 52
A Web of Design Patterns
(181) The Fire
(8) Mosaic of Subcultures
(179) Alcoves
(95) Building Complex
(33) Night Life(31) Promenade
(90) Beer Hall
Cities
& T
owns
InteriorsLocal
Gatherings
![Page 53: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/53.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 53
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…
![Page 54: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/54.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 54
NAVIGATION BAR (K2)
• Problem: Customers need a structured, organized way of finding the most important parts of your Web site
![Page 55: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/55.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 55
NAVIGATION BAR (K2)
• Solution diagram– Captures essence on how to solve problem
First-level navigation
Second-level navigation
Link to home
![Page 56: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/56.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 56
Advanced ecommerce
Completing tasks
Page layouts
Search
Page-level navigation
Speed
The mobile web
Pattern Groups
Our patterns organized by groupSite genres
Navigational framework
Home page
Content management
Trust and credibility
Basic ecommerce
![Page 57: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/57.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 57
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
![Page 58: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/58.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 58
PROCESS FUNNEL (H1)
![Page 59: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/59.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 59
PROCESS FUNNEL (H1)• What’s different?
– No tab rows– No impulse buys– Only navigation on page
takes you to next step
• What’s different?– No tab rows– No impulse buys– Only navigation on page
takes you to next step
• What’s the same?– Logo, layout, color, fonts
• What’s the same?– Logo, layout, color, fonts
![Page 60: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/60.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 60
PROCESS FUNNEL (H1)
• Problem: What if users need extra help?
![Page 61: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/61.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 61
Process Tunnel
![Page 62: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/62.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 62
CONTEXT-SENSITIVE HELP (H8)
![Page 63: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/63.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 63
PROCESS FUNNEL (H1)Solution Diagram
![Page 64: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/64.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 64
PROCESS FUNNEL (H1)Related Patterns
(A10) Web Apps
(K5) High-Viz Action Buttons
(A1) E-Commerce (A11) Intranets
(H1) Process Funnel
(K2) Navigation Bars
(K3) Tab Rows
(K4) Action Buttons
(K12) Preventing Errors
(H8) Context-Sensitive Help
(I2) Above the Fold
(K13) Meaningful Error Messages
![Page 65: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/65.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 65
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
![Page 66: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/66.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 66
Patterns Offer the Best of Principles, Guidelines, & Templates
• Patterns help you get the details right, without over-constraining your solution– unlike principles, patterns not too general, so will
apply to your situation– unlike guidelines, patterns discuss tradeoffs,
show good examples, & tie to other patterns– unlike style guides, patterns not too specific, so
can still be specialized – unlike templates, patterns illustrate flows among
different pages
• Patterns can serve as documentation for team-oriented environments
![Page 67: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/67.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 67
Format of Web Design Patterns
• Pattern Name and Number
• Exemplar
• Background
• Problem
• Forces
• Solution
• Solution Diagram
• Related Patterns
![Page 68: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/68.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 68
Pattern Name and NumberPattern Name and Number
ExemplarExemplar
BackgroundBackground
Problem Statement
Problem Statement
Forces &
Solution
Forces &
Solution
![Page 69: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/69.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 69
Bus StopsBus StopsSolution
Diagram
Solution
Diagram
Related
Patterns
Related
Patterns
Solution
Summary
Solution
Summary
![Page 70: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/70.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 70
Example of How to Use Patterns
• Sarah is designer on e-commerce site selling custom t-shirts to businesses
• Her team notices drop-off in checkout process (abandoned shopping carts)
• She turns to design patterns– looks to Pattern Group F – Basic E-Commerce– QUICK FLOW CHECKOUT (F1) catches her eye– looks to references
• PERSONAL E-COMMERCE (A1) – skims & sees too high level for current issue
• SHOPPING CART (F3) – looks promising, but not now• PROCESS FUNNEL (H1) – how to keep people on task – exactly
what her team needs now!
![Page 71: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/71.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 71
Example of How to Use Patterns• Sarah uses PROCESS FUNNEL (H1) to find flaws &
redesign checkout process– e.g., notices current checkout is heavy with text
instructions & many links that leave the page• Using PROCESS FUNNEL (H1), sketches 3 new
designs• Gets feedback on new designs from team• Iterates to produce 2 designs• Performs a quick 1 day evaluation w/ 5 users
– visits them at work & has them use old design• anticipated many of the problems, but notes a few new ones
– next she shows new design & has user describe where each link will go & asks whether content makes sense
– uses the results to iterate again & present to team
![Page 72: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/72.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 72
PROCESS FUNNEL (H1)Related Patterns
(A10) Web Apps
(K5) High-Viz Action Buttons
(A1) E-Commerce (A11) Intranets
(H1) Process Funnel
(K2) Navigation Bars
(K3) Tab Rows
(K4) Action Buttons
(K12) Preventing Errors
(H8) Context-Sensitive Help
(I2) Above the Fold
(K13) Meaningful Error Messages
![Page 73: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/73.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 73
MEANINGFUL ERROR MESSAGES (K13)
• 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
![Page 74: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/74.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 74
![Page 75: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/75.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 75
• Clear error message?– two messages at top
• Explains how to recover?– only implies it is missing
required information
• Positioned near the problem?– error messages far– required info differs in
green/red -> problem for users w/ color deficiency
• Clear error message?– two messages at top
• Explains how to recover?– only implies it is missing
required information
• Positioned near the problem?– error messages far– required info differs in
green/red -> problem for users w/ color deficiency
![Page 76: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/76.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 76
![Page 77: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/77.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 77
• Clear error message• Explains how to recover• Positioned near the
problem
• Clear error message• Explains how to recover• Positioned near the
problem
![Page 78: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/78.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 78
MEANINGFUL ERROR MESSAGES (K13)Solution Diagram
![Page 79: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/79.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 79
Web Design Process
![Page 80: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/80.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 80
Patterns in Exploration Phase
• Use Exploration-level patterns to design overall structure– different choices will give radically
different designs
• For example, how to organize information– HIERARCHICAL ORGANIZATION (B3)– TASK-BASED ORGANIZATION (B4)– ALHABETICAL ORGANIZATION (B5)– …
![Page 81: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/81.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 81
Patterns in Exploration Phase
TASK-BASED ORGANIZATION (B4): Link the completion of one group of tasks to the beginning of the next related task(s)
![Page 82: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/82.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 82
Design Exploration Example
• John given the task of designing a new subsite for showing maps to businesses– listings found by typing in address– key feature: show nearby businesses
• John comes up with two design sketches– Design #1 uses ALPHABETICAL ORGANIZATION
(B5) for list of all nearby businesses– Design #2 uses TASK-BASED ORGANIZATION (B4)
for list of related nearby businesses
![Page 83: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/83.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 83
Design #1ALPHABETICAL ORGANIZATION (B5)
![Page 84: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/84.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 84
Design #2TASK-BASED ORGANIZATION (B4)
![Page 85: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/85.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 85
Evaluating Which Design to Choose
• Low-fidelity Usability Test– sketches the rest of the key screens on paper– brings in 5 participants to his office– asks each to carry out 3 tasks while John’s colleague
Sam “plays computer”– John observes how they perform
• Tasks1) look up 1645 Solano Ave., Berkeley CA2) look up 1700 California Ave, San Francisco CA & find
Tadich Grill3) look up 2106 N 55th St, Seattle WA & find a Sushi
restaurant nearby
![Page 86: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/86.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 86
Evaluating Which Design to Choose
• Results with Design #1 (Alphabetical)– Task 1: look up 1645 Solano Ave
• no difficulties encountered – warm-up task!
– Task 2: look up 1700 California & find Tadich Grill• several users didn’t notice that the list of nearby businesses
was scrollable (due to paper affordances?)• those that scrolled took awhile to find in list of over 500
– Task 3: look up 2106 55th St & find nearby Sushi restaurant
• 3 users only picked restaurants that had “restaurant” in the name & thus couldn’t find “Kisaku”
![Page 87: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/87.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 87
Evaluating Which Design to Choose
• Results with Design #2 (Task-based)– Task 1: look up 1645 Solano Ave
• no difficulties encountered – warm-up task!
– Task 2: look up 1700 California & find Tadich Grill• 1 user took awhile to figure out that Tadich Grill was a
restaurant & to click on the “Restaurants” link• all others found it in 2 clicks (Restaurants->Tadich Grill)
– Task 3: look up 2106 55th St & find nearby Sushi restaurant
• 3 found “Kisaku” in 2 clicks• 2 others asked for a listing of Japanese restaurants
![Page 88: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/88.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 88
Evaluating Which Design to Choose
• General comments– 2 users said they often want to email maps to
friends who they will be meeting (task-based)– 3 users wanted driving directions (task-
based)
→ TASK-BASED ORGANIZATION (B4) worked better, but still had some minor problems
![Page 89: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/89.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 89
Design #2 – Revision 1Adding More Related Tasks
![Page 90: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/90.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 90
Design #2 – Revision 2Adding HIERARCHICAL ORGANIZATION (B3) &
LOCATION BREAD CRUMBS (K6)
![Page 91: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/91.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 91
Design #2 – Revision 3 Hi-Fi Prototype Adding SEARCH ACTION MODULE (J1)
![Page 92: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/92.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 92
Summary
• Lots of issues involved in designing web sites
• Design patterns one way of capturing good design knowledge
![Page 93: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/93.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 93
Further ReadingBooks on Web Design
• Web Design in a Nutshell. Jennifer Niederst. O'Reilly , 1999.
• Design of Sites. Doug Van Duyne, James Landay, Jason Hong. Addison-Wesley. 2003.
• Information Architecture for the World Wide Web. Louis Rosenfeld and Peter Morville. O'Reilly, 1998.
• Don’t Make Me Think! Steven Krug. Que, 2000.
![Page 94: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/94.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 94
Further ReadingBooks on Web Design
• Community Building on the Web. Amy Jo Kim. Peachpit Press, 2000.
• Designing Visual Interfaces: Communication Oriented Techniques. Kevin Mullet and Darrell Sano. Prentice Hall / SunSoft Press. 1994.
• Understanding Comics. Scott McCloud. Kitchen Sink Press, 1994.
• Designing Web Usability. Jakob Nielsen. New Riders Publishing, 1999.
![Page 95: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/95.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 95
Further ReadingWebsites on Web Design
• UsableWeb.com, links to other usability sites• Usability.gov, for building accessible websites• Web pages that suck, at http://
www.webpagesthatsuck.com/• Net tips for designers, at http://
www.dsiegel.com/tips/• User Interface Engineering, at http://
www.uie.com• ZDNet Ecommerce Best Practices, at http://
www.zdnet.com/ecommerce.
![Page 96: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/96.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 96
Further ReadingWebsites on Web Design
• New York Times Ecommerce Times, at – http://www.nytimes.com/pages-technology/c
ybertimes/commerce/
• Webword.com usability log• CNet Builder.com, info on building sites• ACM’s CHI-Web Mailing List
– http://www.acm.org/sigchi/web/chi-web.html
• Goodexperience.com web log• Jakob Nielsen useit.com
![Page 97: Design Patterns for the Web](https://reader033.vdocuments.us/reader033/viewer/2022051516/56812f4a550346895d94d8f2/html5/thumbnails/97.jpg)
CSE490f- Autumn 2006 User Interface Design, Prototyping, and Evaluation 97
Next Time
• Low-fi Prototyping
• Read– Prototyping for Little Fingers by Rettig
(online)