dt+ux Design Thinking for User Experience Design, Prototyping & Evaluation Autumn 2015 Prof. James A. Landay, Stanford University

Size: px

Start display at page:

Download "dt+ux Design Thinking for User Experience Design, Prototyping & Evaluation Autumn 2015 Prof. James A. Landay, Stanford University"

Catherine Pierce
5 years ago
Views:

DESIGN THINKING FOR USER EXPERIENCE DESIGN + PROTOTYPING + EVALUATION Hall of Fame or Shame?

Landay Computer Science Department Stanford University Hall of Shame!

unique Well polished, aesthetically pleasing Podcasts App Apple Inc.

confused metaphor is difficult to understand Focus on retro means the user has to wait 5 seconds to watch

Landay Computer Science Department Stanford University Outline Selecting Tasks Tasks Video Prototyping

tasks customers have faced / will face collect any necessary materials Should provide reasonable coverage

1 DESIGN THINKING FOR USER EXPERIENCE DESIGN + PROTOTYPING + EVALUATION Hall of Fame or Shame? Concept Videos Podcasts App Apple Inc. Prof. James A. Landay Computer Science Department Stanford University Hall of Shame! DESIGN THINKING FOR USER EXPERIENCE DESIGN + PROTOTYPING + EVALUATION Good At first glance, is fun and unique Well polished, aesthetically pleasing Podcasts App Apple Inc. Concept Videos Bad What does a tapedeck have to do with podcasts? confused metaphor is difficult to understand Focus on retro means the user has to wait 5 seconds to watch animation of tape loading before anything plays Prof. James A. Landay Computer Science Department Stanford University Outline Selecting Tasks Tasks Video Prototyping Concept Video Examples Administrivia Team Break Making a Concept Video High-fidelity Video Examples Real tasks customers have faced / will face collect any necessary materials Should provide reasonable coverage compare check list of functions to tasks Mixture of simple & complex tasks simple task (common or introductory) moderate task complex task (infrequent or for power customers) dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 5 dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 6 1

What Should Tasks Look Like? Say what customer wants to do, but not how allows comparing different design alternatives Good Bad What Should Tasks Look Like?

say who customers are (use personas or profiles) design can really differ depending on who name names (allows getting more info later) characteristics of customers (job, expertise, etc.

forces us to consider how features work together example: phone-in bank functions dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 8 Tasks Describe a Complete Goal Tasks

Design Write up a description of tasks formally or informally run by customers and rest of the design team get more information where needed Check missed calls and call back Manny is in the city at a

2 What Should Tasks Look Like? Say what customer wants to do, but not how allows comparing different design alternatives Good Bad What Should Tasks Look Like? Say what customer wants to do, but not how allows comparing different design alternatives Be specific stories based on facts! say who customers are (use personas or profiles) design can really differ depending on who name names (allows getting more info later) characteristics of customers (job, expertise, etc.) forces us to fill out description w/ relevant details example: dentists forms dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 7 Some should describe a complete goal forces us to consider how features work together example: phone-in bank functions dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 8 Tasks Describe a Complete Goal Tasks Describe a Complete Goal dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 9 dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 10 Using Tasks in Design Write up a description of tasks formally or informally run by customers and rest of the design team get more information where needed Check missed calls and call back Manny is in the city at a club and would like to call his girlfriend, Sherry, to see when she will be arriving a the club. She called from a friends house while he was on the subway, so he couldn t answer the phone. He would like to check his missed calls and find the number so that he can call her back. dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 11 Using Tasks in Design (cont.) Rough out an interface design discard features that don t support your tasks or add a real task that exercises that feature major screens & functions (not too detailed) hand sketched at least 30 sketches on the low-fi assignment! Produce task flows for each task what customer has to do & what they would see step-by-step performance of task illustrate using storyboards sequences of sketches showing screens & transitions dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 12 2

Task Flows Show How to Do the Task Task Flows are design specific, tasks aren t Task Flows force us to show how various features will work together settle design arguments by seeing examples only

contracts the design space Quick to build Inexpensive Forces designers to consider details of how users will react to the design May better illustrate context of use dt+ux: Design Thinking for User

3 Task Flows Show How to Do the Task Task Flows are design specific, tasks aren t Task Flows force us to show how various features will work together settle design arguments by seeing examples only examples sometimes need to look beyond Show users storyboards of task flows to get feedback Video Prototyping Illustrate how users will interact w/ system Unlike brainstorming, video prototyping contracts the design space Quick to build Inexpensive Forces designers to consider details of how users will react to the design May better illustrate context of use dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 13 dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 14 Video Prototype Characteristics Paper Prototypes, Existing Software or Projected Images as a background Optional Narration, Conversation preferred narrator explains events & others move images/illustrate interaction while actors perform movements viewer expected to understand w/o voice-over Usually fixed prototypes, but can also use in open prototypes e.g., live video as Wizard of Oz tool & 2nd camera to capture Video Prototype Examples With good storyboards, a good short film can be shot in 1-2 hours dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 15 dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 16 greenbean Tuned dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 17 dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 18 3

Carbon Shopper dt+ux: Design Thinking for User Experience

Thinking for User Experience Design, Prototyping & Evaluation

capture an early concept and tell a story dt+ux: Design 22

4 Carbon Shopper dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 19 uplift dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 20 Concept + Vision Videos Balancer dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 21 How to capture an early concept and tell a story dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 22 It s About Stories It s About Details dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 23 dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 24 4

Key Pieces of Successful Concept Videos People (roles) Context (scene) The Solution (props) Keep it Simple dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 25 dt+ux: Design

5 Key Pieces of Successful Concept Videos People (roles) Context (scene) The Solution (props) Keep it Simple dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 25 dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 26 Concept Video Examples Use what you know and what you have dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 27 dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 28 Cookable MicroHealth dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 29 dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 30 5

Musistant dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 31 SpeakEasy dt+ux: Design Thinking for User Experience Design, Prototyping &

Design, Prototyping & Evaluation 34 Administrivia Grading for presentation was missing a piece, revised to say Description of new needfinding, revised POVs, HMWs, &

(detailed data, methods, appropriateness of participants) (25 points) Description of the insights from the testing (25 points) Goal of project presentations this

g., frequency, density & pain) Tongues dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 35 Selection is not about business feasibility

6 Musistant dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 31 SpeakEasy dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 32 InvestorScope dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 33 SpringBoard dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 34 Administrivia Grading for presentation was missing a piece, revised to say Description of new needfinding, revised POVs, HMWs, & brainstorming of selected solutions (25 points) Description of experience prototypes (diversity, innovativeness, appropriateness) (25 points) Description of testing (detailed data, methods, appropriateness of participants) (25 points) Description of the insights from the testing (25 points) Goal of project presentations this week is to select a project idea for the quarter using feedback from TA & peers Project Selection Criteria novelty significant UI component (e.g., bad if all smart AI but no UI) impact (e.g., frequency, density & pain) Tongues dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 35 Selection is not about business feasibility implementation feasibly in 1 quarter (need only a way to approximate) dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 36 6

Team Break Practice Presentations Create Presentations Write up/review

The Goal of any good conceptual film dt+ux: Design Thinking for User

for User Experience Design, Prototyping & Evaluation 38 Someone should

a Concept Video Define What is the message of the film?

Make a basic plot Discuss plot ideas until you get a few that really

storyboards of scenes to plan how you will film it * note: not UI

dt+ux: Design Thinking for User Experience Design, Prototyping &

can be moved Include lines to be spoken if necessary SCENE 4 Words On

the cell SHOT 1 beautiful flower, child s eyes are wide looking at it

angles SHOT 2 ipad pans into view, image on screen shows the cellular

7 Team Break Practice Presentations Create Presentations Write up/review Report Ask the Teaching Staff Questions! The Goal of any good conceptual film dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 37 dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 38 Someone should be able to understand your project simply by watching your film Making a Concept Video Define What is the message of the film? Can you describe it in a few lines? Make a basic plot Discuss plot ideas until you get a few that really make sense, decide characters Storyboard Turn these into multiple storyboards of scenes to plan how you will film it * note: not UI storyboards! dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 39 dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 40 Storyboarding Use sticky notes so scenes can be moved Include lines to be spoken if necessary SCENE 4 Words On Screen: Investigate Voiceover: The mitochondria are the powerhouse of the cell SHOT 1 beautiful flower, child s eyes are wide looking at it head is cocked to the side, inquisitive Storyboarding Use appropriate angles SHOT 2 ipad pans into view, image on screen shows the cellular structure of the plant dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 41 dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 42 7

Shoot your Film Get as many shots (angles, close ups, distance ) as you can!

Lighting If you choose to use music Now might be a good time to pick some songs.

(see Vimeo for music you can use free) Edit your Film Use your storyboard!

dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 43 dt+ux:

Video Examples dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation

Close-Up shots Capture emotion People Avoid conversation (This is the hardest to get right

8 Shoot your Film Get as many shots (angles, close ups, distance ) as you can! you never know what might be useful later. Lighting If you choose to use music Now might be a good time to pick some songs. Music can be very powerful if chosen well. (see Vimeo for music you can use free) Edit your Film Use your storyboard! This part should be simple if you have storyboarded correctly. dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 43 dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 44 High Fidelity Video Examples dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 45 dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 46 Use Close-Up shots Capture emotion People Avoid conversation (This is the hardest to get right and ends up distracting) Use the right person for the role-ask friends AWI Vink, Cauchard, & Landay dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 47 dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 48 8

always cut down) The Solution Don t Sell it Don t tell people to use your solution, show them why dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 49 dt+ux: Design Thinking

9 Plan your story Storyboard it. Is the story believable? Film multiple angles Wow Effect Show your solution at it s best, save the best for last Subtlety Show how the solution makes the user feel subtly Context Film longer than the shot needs (you can always cut down) The Solution Don t Sell it Don t tell people to use your solution, show them why dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 49 dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 50 High Fidelity Video Prototypes High Fidelity Video Prototypes Final Perspective Video dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 51 Final Cookable Video dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 52 Token (Concept Video) Token (hi-fi video) dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 53 dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 54 9

High Fidelity Concept Videos High Fidelity Concept Videos Pedro Andrade, CIID dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 55

quickly communicate how a user will use a design Concept videos set up more of the story of use Both techniques are useful your projects are at the concept

Prototyping & Evaluation 58 Next Time Lecture Early & Future Visions of HCI Read As We May Think by Vannevar Bush Tools For Thought Ch 9 (Engelbart Demo)

10 High Fidelity Concept Videos High Fidelity Concept Videos Pedro Andrade, CIID dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 55 parqtheapp dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 56 High Fidelity Concept Videos Summary Video prototypes allow us to quickly communicate how a user will use a design Concept videos set up more of the story of use Both techniques are useful your projects are at the concept video stage Smart Primer dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 57 dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 58 Next Time Lecture Early & Future Visions of HCI Read As We May Think by Vannevar Bush Tools For Thought Ch 9 (Engelbart Demo) Project Define your tasks starting in studio this week Shoot & edit a Concept Video dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation 59 10

Design Exploration! CS HCID: User Interface Design, Prototyping, Evaluation, Autumn 2014 Prof. James A. Landay Stanford University

Design Exploration! CS HCID: User Interface Design, Prototyping, Evaluation, Autumn 2014 Prof. James A. Landay Stanford University HCI+D: USER INTERFACE DESIGN + PROTOTYPING + EVALUATION Hall of Fame or Shame? Design Exploration Computer Science Department THINQ Smart Fridge By LG October 2, 2014 * slides marked Buxton are courtesy