cse 440: introduction to hci€¦ · migrate to prototype, storyboard-based programming. denim...
TRANSCRIPT
![Page 1: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/1.jpg)
CSE 440: Introduction to HCIUser Interface Design, Prototyping, and Evaluation
James FogartyEunice JunDavid WangElisabeth ChinRavi Karkar
Lecture 14:Testing and Patterns
Tuesday / Thursday10:30 to 11:50
![Page 2: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/2.jpg)
Project StatusLooking Forward
3c: Usability Testing Check-In due Today- Changes from Inspection- Changes from First Usability Test
3d: Usability Testing Review due Thursday 2/23
Other AssignmentsReading 4 Posted, Due Friday 2/24(you should engage before that if you can)
![Page 3: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/3.jpg)
ExamIn-Class Next Tuesday 2/21
Mostly short answer, some long answer
Content drawn fromlecture and readings
Compilation of the lecture slides is posted
Q&A scheduled Monday at 1:30 in CSE 403
![Page 4: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/4.jpg)
Testing and PatternsWizard of Oz and Low Fidelity Testing
Remote Usability Testing
Controlled A/B Experiments
Patterns
![Page 5: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/5.jpg)
SILK (1996)
Informal Interaction
![Page 6: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/6.jpg)
SILK (1996)
Migrate to Prototype, Storyboard-Based Programming
![Page 7: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/7.jpg)
DENIM (2000)
Early Stage, Multiple Levels of Details, Sketching, Pen Interaction
![Page 8: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/8.jpg)
SUEDE (2000)
Low-Fidelity Is Not Just About Ink
![Page 9: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/9.jpg)
Topiary (2004)
Location Awareness, Wizard of Oz
![Page 10: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/10.jpg)
Activity Designer (2008)
Long-Lived Activities
![Page 11: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/11.jpg)
FrameWire (2010)
Tangible Interaction
![Page 12: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/12.jpg)
Testing and PatternsWizard of Oz and Low Fidelity Testing
Remote Usability Testing
Controlled A/B Experiments
Patterns
![Page 13: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/13.jpg)
Remote Usability TestingConferencing-based testing
Use tools like video conferencing, instant messaging, and screencastingto test with a remote participant
Semi-automated remote testingAutomatic logging and some analysis of usage
Controlled online A/B experimentsCarefully measure results of showing different versions to different sets of live customers
![Page 14: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/14.jpg)
Semi-Automated Remote UsabilityNow available through a variety of services
Loop11 UserZoomTryMyUI ValidatelyUserlytics WhatUsersDoUsertesting.com YouEye
Unlikely you need to bake your ownSome include mobile testingCrowds for automated testing in build processes
http://www.nngroup.com/articles/unmoderated-user-testing-tools/
![Page 15: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/15.jpg)
Semi-Automated Remote UsabilityMove usability testing online
participants access the “lab” via webanswer questions & complete tasks in “survey”records actions or screens for playbackcan test many people completing many tasks
Analyze data individually or in aggregateplayback individual sessionsfind general problem areasif needed, look closely with traditional methods
![Page 16: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/16.jpg)
Semi-Automated Remote Usability
![Page 17: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/17.jpg)
Semi-Automated Remote Usability
![Page 18: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/18.jpg)
Semi-Automated Remote Usability
![Page 19: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/19.jpg)
WebQuilt: Visual AnalysisGoals
link page elements to actionsidentify behavior/navigation patternshighlight potential problems areas
Interactive graph based on web contentdesigners can indicate expected pathscolor code common usability interestsfiltering to show only target participantsuse zooming for analyzing at varying granularity
![Page 20: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/20.jpg)
WebQuilt: Visual Analysis
![Page 21: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/21.jpg)
WebQuilt: Visual Analysis
![Page 22: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/22.jpg)
WebQuilt: Visual Analysis
![Page 23: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/23.jpg)
Testing and PatternsWizard of Oz and Low Fidelity Testing
Remote Usability Testing
Controlled A/B Experiments
Patterns
![Page 24: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/24.jpg)
Controlled A/B Experiments Many names for it
A/B tests or Control/Treatment
Randomized Experimental Design
Controlled experiments
Split testing
Parallel flights
(this section mostly due Ronny Kohavi)
![Page 25: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/25.jpg)
Controlled A/B ExperimentsExample: Amazon Shopping Cart Recommendations
Add an item to your shopping cartMost sites show the cart
At Amazon, Greg Linden had idea to show recommendations based on cart items
From Greg Linden’s Blog: http://glinden.blogspot.com/2006/04/early-amazon-shopping-cart.html
![Page 26: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/26.jpg)
Controlled A/B ExperimentsEvaluation
Pro: cross-sell more itemsCon: distract people from checking out
Highest Paid Person’s Opinion: Stop the project
Simple experiment run:Wildly successful
From Greg Linden’s Blog: http://glinden.blogspot.com/2006/04/early-amazon-shopping-cart.html
![Page 27: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/27.jpg)
Marketplace: Solitaire vs Poker
B: Poker game
A: Solitaire game
Experiment run in Windows Marketplace / Game Downloads
Which image has the higher clickthrough? By how much?
![Page 28: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/28.jpg)
Marketplace: Solitaire vs Poker
B: Poker game
A: Solitaire game
Experiment run in Windows Marketplace / Game Downloads
Which image has the higher clickthrough? By how much?
A is 61% better
![Page 29: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/29.jpg)
Never Underestimate Solitaire
![Page 30: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/30.jpg)
Never Underestimate Solitaire
![Page 31: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/31.jpg)
Checkout Page
Example from Bryan Eisenberg’s article on clickz.com
Conversion rate is percentage of visits that include purchase
Which version has a higher conversion rate?
A B
![Page 32: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/32.jpg)
Checkout PageConversion rate is percentage of visits that include purchase
Example from Bryan Eisenberg’s article on clickz.com
Which version has a higher conversion rate?
A B
![Page 33: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/33.jpg)
Checkout PageConversion rate is percentage of visits that include purchase
Coupon Code decreases by factor of 10
A B
![Page 34: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/34.jpg)
45
Office Online Feedback
A B
Feedback A puts everything together, whereas feedback B is two-stage: question follows rating.
Feedback A just has 5 stars, whereas B annotates the stars with “Not helpful” to “Very helpful” and makes them brighter.
Which one has a higher response rate? By how much?
![Page 35: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/35.jpg)
46
Office Online Feedback
A B
Feedback A puts everything together, whereas feedback B is two-stage: question follows rating.
Feedback A just has 5 stars, whereas B annotates the stars with “Not helpful” to “Very helpful” and makes them brighter.
Which one has a higher response rate? By how much?
B gets more than double response rate.
![Page 36: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/36.jpg)
Another Feedback VariantCall this variant C. Like B, also two-stage.Which one has a higher response rate, B or C?
C
![Page 37: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/37.jpg)
Another Feedback VariantCall this variant C. Like B, also two-stage.Which one has a higher response rate, B or C?
C
C outperforms B by a factor of 3.5
![Page 38: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/38.jpg)
Office OnlineClicks on revenue generating links (red links)
A B
![Page 39: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/39.jpg)
Office OnlineClicks on revenue generating links (red links)
A B
A gets many more clicks
A B
![Page 40: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/40.jpg)
Office OnlineClicks on revenue generating links (red below)
A B
B gets more revenue
A B
![Page 41: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/41.jpg)
Examples Where Data Is WrongIf something is “amazing,” find the flaw!
If you have a mandatory birth date field,and people think it’s unnecessary, you will find lots of 11/11/11 or 01/01/01
If you have an optional drop down, do not default to the first alphabetical entry, or you will have lots of: jobs = Astronaut
Traffic to doubled between 1-2am Nov 6, 2011 for many web sites, relative to same hour week prior
![Page 42: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/42.jpg)
MSN US Home PageProposal: New Offers module below Shopping
Control
Treatment
![Page 43: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/43.jpg)
Experiment ResultsRan A/B test for 12 days on 5% of MSN US visitors
![Page 44: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/44.jpg)
Experiment ResultsRan A/B test for 12 days on 5% of MSN US visitors
Clickthrough:Page views per person-day:
![Page 45: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/45.jpg)
Experiment ResultsRan A/B test for 12 days on 5% of MSN US visitors
Clickthrough:Page views per person-day:
decreased 0.49%
decreased 0.35%
![Page 46: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/46.jpg)
Experiment ResultsRan A/B test for 12 days on 5% of MSN US visitors
Clickthrough:Page views per person-day:
Value of click from home page: X centsNet = Expected Revenue –
Value Per Click * Direct lost clicks –Value Per Click * Lost Due to Decreased Views
decreased 0.49%
decreased 0.35%
![Page 47: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/47.jpg)
Experiment ResultsRan A/B test for 12 days on 5% of MSN US visitors
Clickthrough:Page views per person-day:
Value of click from home page: X centsNet = Expected Revenue –
Value Per Click * Direct lost clicks –Value Per Click * Lost Due to Decreased Views
Net was negative (in millions of dollars), offers module did not launch
decreased 0.49%
decreased 0.35%
![Page 48: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/48.jpg)
![Page 49: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/49.jpg)
![Page 50: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/50.jpg)
![Page 51: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/51.jpg)
![Page 52: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/52.jpg)
![Page 53: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/53.jpg)
![Page 54: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/54.jpg)
![Page 55: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/55.jpg)
![Page 56: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/56.jpg)
![Page 57: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/57.jpg)
![Page 58: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/58.jpg)
![Page 59: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/59.jpg)
![Page 60: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/60.jpg)
![Page 61: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/61.jpg)
![Page 62: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/62.jpg)
![Page 63: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/63.jpg)
![Page 64: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/64.jpg)
![Page 65: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/65.jpg)
![Page 66: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/66.jpg)
![Page 67: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/67.jpg)
![Page 68: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/68.jpg)
Data Driven Methods Not Just Online79
![Page 69: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/69.jpg)
Data Driven Methods Not Just Online80
![Page 70: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/70.jpg)
Data Driven Methods Not Just Online81
![Page 71: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/71.jpg)
Limitations of Data Driven TestingDrives hill-climbing, but not overall design
A design may be better, but is it good?
Impossible for new designs to compete
Can be difficult to scale to many featuresNow we step through a larger example
![Page 72: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/72.jpg)
83
1
![Page 73: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/73.jpg)
CSE440 - Autumn 2007User Interface Design, Prototyping, and Evaluation
84
2
![Page 74: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/74.jpg)
CSE440 - Autumn 2007User Interface Design, Prototyping, and Evaluation
85
3
![Page 75: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/75.jpg)
CSE440 - Autumn 2007
User Interface Design, Prototyping, and Evaluation
86
4
![Page 76: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/76.jpg)
CSE440 - Autumn 2007
User Interface Design, Prototyping, and Evaluation
87
5
![Page 77: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/77.jpg)
Quick-Flow Checkouts
CSE440 - Autumn 2007
User Interface Design, Prototyping, and Evaluation
88
6
![Page 78: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/78.jpg)
Testing in a Larger Design
![Page 79: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/79.jpg)
![Page 80: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/80.jpg)
Testing and PatternsWizard of Oz and Low Fidelity Testing
Remote Usability Testing
Controlled A/B Experiments
Patterns
![Page 81: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/81.jpg)
92
1
![Page 82: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/82.jpg)
93
• What site is this?– Logo in top-left corner denotes the site– Another logo at top-right to reinforce– examples of SITE BRANDING
1
![Page 83: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/83.jpg)
CSE440 - Autumn 2007
94
• What kind of site is this?– Shopping cart icon– Tab row content & categories on left– Prices in content area– UP-FRONT VALUE PROPOSITION– example of PERSONAL E-COMMERCE
1
![Page 84: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/84.jpg)
CSE440 - Autumn 2007
95
• What can I do here?– Welcome for new visitors– Tab row / Search on top– “Categories”– Prices– Examples of OBVIOUS LINKS
1
![Page 85: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/85.jpg)
96
• Most important info visible without scrolling
• ABOVE THE FOLD
1
![Page 86: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/86.jpg)
CSE440 - Autumn 2007
User Interface Design, Prototyping, and Evaluation
97
2
![Page 87: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/87.jpg)
CSE440 - Autumn 2007
User Interface Design, Prototyping, and Evaluation
98
• 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 88: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/88.jpg)
CSE440 - Autumn 2007
User Interface Design, Prototyping, and Evaluation
99
• Where am I in the site?– “Home > Music” are
LOCATION BREAD CRUMBS– TAB ROW says “Music”– Album cover, “Product Highlights”,
and CD cover
2
![Page 89: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/89.jpg)
CSE440 - Autumn 2007
User Interface Design, Prototyping, and Evaluation
100
• Can I trust these sellers? – Who am I buying from?– Are they reputable?– What about shipping?
2
![Page 90: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/90.jpg)
CSE440 - Autumn 2007
User Interface Design, Prototyping, and Evaluation
101
• The Fold– Hmm, what’s below here?
2
![Page 91: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/91.jpg)
CSE440 - Autumn 2007
User Interface Design, Prototyping, and Evaluation
102
• Impulse buy• PESONALIZED
RECOMMENDATIONS
• About this album• Lots of unused space• Still more info below…
2
![Page 92: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/92.jpg)
CSE440 - Autumn 2007
User Interface Design, Prototyping, and Evaluation
103
• Is this product any good?– Editorial reviews– Customer reviews– RECOMMENDATION
COMMUNITY
2
![Page 93: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/93.jpg)
CSE440 - Autumn 2007
User Interface Design, Prototyping, and Evaluation
104
3
![Page 94: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/94.jpg)
CSE440 - Autumn 2007
User Interface Design, Prototyping, and Evaluation
105
• What site am I at? – Logo in upper-left– Colors, layout, font– examples of SITE BRANDING
3
![Page 95: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/95.jpg)
CSE440 - Autumn 2007
User Interface Design, Prototyping, and Evaluation
106
• 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
3
![Page 96: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/96.jpg)
CSE440 - Autumn 2007
User Interface Design, Prototyping, and Evaluation
107
• Cross-selling– Possibly a pleasant surprise– Impulse buy– CROSS-SELLING &
UP-SELLING
3
![Page 97: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/97.jpg)
CSE440 - Autumn 2007
User Interface Design, Prototyping, and Evaluation
108
• 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
3
![Page 98: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/98.jpg)
CSE440 - Autumn 2007
User Interface Design, Prototyping, and Evaluation
109
• What can I do?– “Proceed to Checkout”
HIGH VISIBILITY ACTION BUTTON– Visually distinct– 3D, looks clickable– Repeated above and below fold
3
![Page 99: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/99.jpg)
CSE440 - Autumn 2007
User Interface Design, Prototyping, and Evaluation
110
4
![Page 100: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/100.jpg)
CSE440 - Autumn 2007
User Interface Design, Prototyping, and Evaluation
111
• What if I don’t have a User ID?
• What if I forgot my password?
• SIGN-IN/NEW ACCOUNT options
4
![Page 101: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/101.jpg)
CSE440 - Autumn 2007
User Interface Design, Prototyping, and Evaluation
112
5
![Page 102: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/102.jpg)
CSE440 - Autumn 2007
User Interface Design, Prototyping, and Evaluation
113
• What site?– Logo, layout, color, fonts
• Where in site?– Checkout, step 1 of 3– “Choose shipping address”– QUICK-FLOW CHECKOUT
5
![Page 103: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/103.jpg)
CSE440 - Autumn 2007
User Interface Design, Prototyping, and Evaluation
114
• Note what’s different– No tab rows– No impulse buys– Only navigation on page takes you to
next step
• This is a PROCESS FUNNEL– Extraneous info and links removed to
focus customers
5
![Page 104: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/104.jpg)
Quick-Flow Checkouts
CSE440 - Autumn 2007
User Interface Design, Prototyping, and Evaluation
115
6
![Page 105: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/105.jpg)
Quick-Flow Checkouts
CSE440 - Autumn 2007
User Interface Design, Prototyping, and Evaluation
116
• Last step of process– Step 3, “Place Order”– “Place my order” button
• Two HIGH-VISIBILITY ACTION BUTTONS for fold
6
![Page 106: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/106.jpg)
Quick-Flow Checkouts
CSE440 - Autumn 2007
User Interface Design, Prototyping, and Evaluation
117
• No nasty surprises– Can see order– Total price is same as shopping
cart– ORDER SUMMARY
6
![Page 107: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/107.jpg)
Quick-Flow Checkouts
CSE440 - Autumn 2007
User Interface Design, Prototyping, and Evaluation
118
• Easy to change shipping and billing
• Easy to save this info– Easier to setup info in context of
specific task
![Page 108: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/108.jpg)
Design Equals SolutionsDesign is about finding solutions
Designers often reinventHard to know how things were done beforeWhy things were done a certain wayHow to reuse solutions
One option is patternsBut this is also why we point you at research
![Page 109: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/109.jpg)
Design PatternsDesign patterns communicate common design problems and solutions
First used in architecture [Alexander]How to create a beer hall where people socialize?
![Page 110: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/110.jpg)
Design Patterns
![Page 111: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/111.jpg)
Using Design PatternsNot 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, and rooms”
Beer hall is part of a center for public lifeBeer hall needs spaces for groups to be alone ALCOVES
![Page 112: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/112.jpg)
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
& Towns
InteriorsLocal
Gatherings
![Page 113: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/113.jpg)
Web Design PatternsCommunicate design problems & solutions
how to create navigation bars for finding relevant content
how to create a shopping cart that suports check out
how to make e-commerce sites where people return & buy
![Page 114: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/114.jpg)
NAVIGATION BAR (K2)Problem: Customers need a structured, organized way of finding the most important parts of your Web site
![Page 115: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/115.jpg)
NAVIGATION BAR (K2)Solution diagram
Captures essence on how to solve problem
First-level navigation
Second-level navigation
Link to home
![Page 116: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/116.jpg)
Patterns organized by group
Pattern Groups
Advanced ecommerceCompleting tasksPage layoutsSearchPage-level navigationSpeedThe mobile web
Site genresNavigational frameworkHome pageContent managementTrust and credibilityBasic ecommerce
![Page 117: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/117.jpg)
PROCESS FUNNEL (H1)Problem:
Need a way to help people complete highly specific stepwise tasks
Ex. Create a new accountEx. Fill out survey forms Ex. Check out
![Page 118: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/118.jpg)
PROCESS FUNNEL (H1)
![Page 119: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/119.jpg)
PROCESS FUNNEL (H1)• 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
![Page 120: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/120.jpg)
PROCESS FUNNEL (H1)Problem:
What if users need extra help?
![Page 121: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/121.jpg)
PROCESS FUNNEL (H1)
![Page 122: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/122.jpg)
CONTEXT-SENSITIVE HELP (H8)
![Page 123: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/123.jpg)
FLOATING WINDOWS (H6)
![Page 124: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/124.jpg)
FLOATING WINDOWS (H6)
![Page 125: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/125.jpg)
PROCESS FUNNEL (H1)Solution Diagram
![Page 126: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/126.jpg)
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 127: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/127.jpg)
Patterns Support CreativityPatterns come from successful examples
sites that are so successful that lots of people are familiar with their paradigmsinteraction techniques/metaphors that work well across many sites (e.g., shopping carts)
Not too general and not too specificyou need to specialize to your needs
Patterns let you focus on the hard, unique problems of your design situation
![Page 128: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/128.jpg)
Principles, Guidelines, TemplatesPatterns help design without over-constraining
unlike principles, patterns are not too general
unlike guidelines, patterns discuss tradeoffs, show good examples, and tie to other patterns
unlike style guides, patterns not too specific, can be specialized to a design
unlike templates, patterns illustrate flows and relationships among different pages
![Page 129: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/129.jpg)
Web Design Patterns
![Page 130: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/130.jpg)
Web Design Patterns
![Page 131: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/131.jpg)
Pre-PatternsPatterns require broad adoption and examples
Many version of the same basic ideaShown successful in many contextsThat is what makes them patterns
This is challenging in novel domains
Pre-patterns are based in weaker evidenceCan help speed diffusion of techniques and resultsCan help see relationships among ideas
![Page 132: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/132.jpg)
UbiComp Pre-PatternsLiterature reviewButton-up card sorting of lessons from literatureCut down based on critique by other researchers
![Page 133: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/133.jpg)
UbiComp Pre-Patterns
Web Interface Design, Prototyping, &
![Page 134: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/134.jpg)
A – Ubiquitous Computing Genres
B – Physical-Virtual Spaces
C – Developing Successful Privacy
D – Designing Fluid Interactions
Describes broad classes of emerging applications, providing many examples and ideas
Associating physical objects and spaces with information and meaning; location-based services; helping users navigate such spaces
Policy, systems, and interaction issues in designing privacy-sensitive systems
How to design for interactions involving dozens or even hundreds of sensors and devices while making users feel like they are in control
Upfront Value Proposition (A1)Personal Ubiquitous Computing(A2)Ubiquitous Computing for Groups(A3)Ubiquitous Computing for Places(A4)Guides for Exploration andNavigation (A5)Enhanced Emergency Response(A6)Personal Memory Aids (A7)Smart Homes (A8)Enhanced EducationalExperiences (A9)Augmented Reality Games (A10)Streamlining Business Operations(A11)Enabling Mobile Commerce (A12)
Active Map (B1)Topical Information (B2)Successful Experience Capture(B3)User-Created Content (B4)Find a Place (B5)Find a Friend (B6)Notifier (B7)
Fair Information Practices (C1)Respecting Social Organizations (C2)Building Trust and Credibility (C3)Reasonable Level of Control (C4)Appropriate Privacy Feedback (C5)Privacy-Sensitive Architectures (C6)Partial Identification (C7)Physical Privacy Zones (C8)Blurred Personal Data (C9)Limited Access to Personal Data (C10)Invisible Mode (C11)Limited Data Retention (C12)Notification on Access of Personal Data (C13)Privacy Mirrors (C14)Keeping Personal Data on Personal Devices (C15)
Scale of Interaction (D1)Sensemaking of Services andDevices (D2)Streamlining Repetitive Tasks(D3)Keeping Users in Control (D4)Serendipity in Exploration (D5)Context-Sensitive I/O (D6)Active Teaching (D7)Resolving Ambiguity (D8)Ambient Displays (D9)Follow-me Displays (D10)Pick and Drop (D11)
UbiComp Pre-Patterns
![Page 135: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/135.jpg)
PatternsWhen you see advice, consider its depth
Result of an individual study / rantPre-pattern based on some meta-analysisEstablished pattern
Be aware of misapplying patternsAnd be aware of anti-patterns
![Page 136: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/136.jpg)
Touch and Microsoft Windows
2004 2012
![Page 137: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/137.jpg)
Consistency vs. SpecializationBeware of simply copying a design language
Consistency is your friend until is it not your friend
Not limited to platform-level decisionsOne “look” for your appOr targeted at each device
![Page 138: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/138.jpg)
Dark PatternsA Dark Pattern is an interface that has been carefully crafted to trick people into doing things, such as buying insurance with their purchase or signing up for recurring bills.
Disguised AdsAds that are disguised as other kinds of content or navigation, in order to get users to click on them
![Page 139: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/139.jpg)
Dark PatternsA Dark Pattern is an interface that has been carefully crafted to trick people into doing things, such as buying insurance with their purchase or signing up for recurring bills.
Friend SpamA site or game asks for your credentials, then goes on to publish content or send out bulk messages
![Page 140: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/140.jpg)
Dark Patterns
![Page 141: CSE 440: Introduction to HCI€¦ · Migrate to Prototype, Storyboard-Based Programming. DENIM (2000) Early Stage, Multiple Levels of Details, Sketching, Pen Interaction. SUEDE (2000)](https://reader036.vdocuments.site/reader036/viewer/2022071216/604739e05aacab1b542dcefc/html5/thumbnails/141.jpg)
CSE 440: Introduction to HCIUser Interface Design, Prototyping, and Evaluation
James FogartyEunice JunDavid WangElisabeth ChinRavi Karkar
Lecture 14:Testing and Patterns
Tuesday / Thursday10:30 to 11:50