05 Video

dt+UX – Design Thinking for User Experience Design, Prototyping & Evaluation 2021/01/27
Winter 2021
Prof. James A. Landay
Stanford University
dt + UX DESIGN THINKING FOR USER EXPERIENCE DESIGN + PROTOTYPING + EVALUATION

Hall of Fame or Shame?
darksky.net
Concept Videos
Computer Science Department
Stanford University
Winter 2021
January 27, 2021
2021/01/27 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 2
1 2
Hall of Fame! Hall of Fame or Shame?

f
darksky.net Google app logos

Good
–uncluttered visual design
–key info large (current weather)
–simple understandable icons
–easy to scan week’s weather
–optional details & animations
Bad
–“Precip Map” takes a lot of space
2021/01/27 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 3 2021/01/27 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 4
3 4
dt + UX DESIGN THINKING FOR USER EXPERIENCE DESIGN + PROTOTYPING + EVALUATION

Hall of Shame!
Google app logos

Good Concept Videos
–colorful
–consistent
Bad Computer Science Department
–cannot tell what is what at a glance Stanford University
Winter 2021
January 27, 2021
2021/01/27 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 5
5 6
1
Winter 2021
Stanford University
Outline
• Tasks Task. The structured set of activities
• Video Prototypes or high-level actions required to
• Concept Videos achieve a high-level user goal.
• Administrivia
• Team Break
what a user wants to do
• Making a Concept Video
• High-fidelity Video Examples
7 8
Task-based Design & Evaluation What Should Tasks Look Like?

• Say what customer wants to do, but not how
• Real tasks customers have faced / will face – allows comparing different design alternatives
– collect any necessary materials Good (Task)
Tony is visiting London and wants to find the
• Do your tasks support the problem you are solving? pub that his friend told him about. He is walking
down the street using his phone to navigate to
the place that he has previously looked up.
• Mixture of simple & complex tasks
– simple task (common or introductory)
– moderate task
– complex task (infrequent or for power customers)
2021/01/27 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 2021/01/27 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 10
9
9 10
What Should Tasks Look Like? What Should Tasks Look Like?
• Say what customer wants to do, but not how • Say what customer wants to do, but not how
– allows comparing different design alternatives – allows comparing different design alternatives
Bad (this is a Task flow) • Be specific – stories based on facts!
Tony clicks on the Charing – say who customers are (use POVs or personas or profiles)
Cross Pub icon and selects • design can really differ depending on who
“directions to” as he walks • name names (allows getting more info later)
down the street. • characteristics of customers (job, expertise, etc.)
– forces us to fill out description w/ relevant details
• Tasks should usually describe a complete goal
– forces us to consider how features work together
• example: phone-in bank functions
11 12
2
Winter 2021
Stanford University
Using Tasks in Design (cont.)

Using Tasks in Design
• Rough out an interface design
• Write up a description of tasks – discard features that don’t support your tasks
– formally or informally • or add a real task that exercises that feature
– run by customers and rest of the design team – major screens & functions (not too detailed)
– get more information where needed – hand sketched
Let my friends know where I am • Produce task flows for each task
– what customer has to do & what they would see
Manny is in the city at a club that he wasn’t planning to go
– step-by-step performance of task
to and would like to let his girlfriend, Sherry, know where he
– illustrate using storyboards (AKA wireframes)
is and be notified when she is about to get to the club.
• sequences of sketches showing screens & transitions
13 14
Task Flows Show How to Do the Task

• Task Flows are design specific, tasks aren’t Recap
• Task Flows force us to
– show how various features will work together
– settle design arguments by seeing examples HMW: How might we make the wait the most exciting
• Show users taskflows to get feedback part of the trip?
Solution: An app that leads kids on a scavenger hunt

adventure around the airport.
2021/01/27 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 15 Winter 2021 Design Thinking for User Experience Design, Prototyping & Evaluation 16
15 16
What is a task?
SIMPLE: hunt for treasure DO IT NOW

In random breakout rooms of 3-4, come up with
MODERATE: set up a custom scavenger hunt for your kids simple, moderate, and complex tasks for this
solution.
COMPLEX: compete against other kids/families
Winter 2021 Design Thinking for User Experience Design, Prototyping & Evaluation 17 Winter 2021 Design Thinking for User Experience Design, Prototyping & Evaluation 18
17 18
3
Winter 2021
Stanford University
Video Prototypes
What How
• Illustrate how users will interact w/ system
• Unlike brainstorming, video prototyping contracts
the design space
Task Task • Quick to build
Flow
• Inexpensive
Concept Video • Forces designers to consider details of how users
Video Prototype will interact with & react to the design
• May better illustrate context of use
19 20
Video Prototype Characteristics

Paper Prototypes, Existing Software or Projected Images as a
background
Optional Narration, Conversation preferred

Video
narrator explains events & others move images/illustrate interaction while
actors perform movements – viewer expected to understand w/o voice-over Prototype
Usually fixed prototypes, but also used in open prototypes
e.g., live video as Wizard of Oz tool & 2nd camera to capture
Examples
With good storyboards, a good short film can be shot in 1-2 hours
21 22
Tuned Carbon Shopper

23 24
4
Winter 2021
Stanford University
It’s About Stories
Concept
+ Vision
Videos
How to capture an early
concept and tell a story
25 26
Key Pieces of Successful Concept Videos

It’s About Details
People Context The Solution

(roles) (scene) (props)
Kid & parents Wants to use force, but failing Dad’s car let’s you remotely
Upper middle class – VW land turn it on. The force is alive!
27 28
Keep it Simple
Use what you know and what you have

29 30
5
Winter 2021
Stanford University
Concept Video
Examples
MicroHealth
31 32
SpeakEasy InvestorScope
33 34
Buckets
SpringBoard
CS147 Film Festival winner 2015
35 36
6
Winter 2021
Stanford University
Administrivia Team Break

• Goal of project presentations this week is to select a project
direction for the quarter using feedback from TA & peers
• Practice Presentations
• Project Selection Criteria
– novelty • Create Presentations
– significant UI component
• e.g., bad if all smart AI but no UI
• Write up/Review Report
– impact (e.g., frequency, density & pain)
– could this be harmful to individuals & communities? (is it ethical?)
• Ask the Teaching Staff Questions!
• Selection is not about
– business feasibility
– implementation feasibly in 1 quarter
• need only a way to approximate
37 38
Exit Tickets & Attendance

• There will be 1 exit ticket per week. You will have 24
hours from the end of lecture to turn it in.
– Exit tickets shouldn’t take longer than 5 minutes to complete, and will
be based on both lecture and readings.
– Exit tickets are graded on accuracy and will count towards your
The Goal of any good
participation grade (worth 10% of your grade). conceptual film…
– There is an optional feedback section at the end of every exit ticket;
we encourage you to fill it out! We read every single bit of feedback!
• Reminder that attendance is recorded at every lecture!
Winter 2021 Design Thinking for User Experience Design, Prototyping & Evaluation 39 2021/01/27 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 40
39 40
Someone should be able to understand Making a Concept Video

your project simply by watching your film
Define
What is the message of the film?
What is the value proposition you offer?
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!
41 42
7
Winter 2021
Stanford University
Storyboarding
Storyboarding
Use sticky notes so scenes can be moved
Include lines to be spoken if necessary
Use appropriate angles
43 44
Storyboarding Shoot your Film

Get as many shots (angles, close ups, distance…) as
SCENE 4
you can! you never know what might be useful later.
Words On Screen: Investigate
Voiceover: The mitochondria are the powerhouse
of the cell
If you choose to use music
SHOT 1
beautiful flower, child’s eyes are wide looking at Now is a good time to pick some songs. Music can be very
it head is cocked to the side, inquisitive powerful if chosen well. (see Vimeo for music you can use free)
SHOT 2 Edit your Film

tablet pans into view, image on screen shows the Use your storyboard! This part should be simple if you have
cellular structure of the plant
storyboarded correctly.
45 46
Lighting
47 48
8
Winter 2021
Stanford University
Avoid Clutter
4
2021/01/27 dt+UX: Design Thinking for 9User Experience Design, Prototyping & Evaluation 2021/01/27 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation
50
49 50
AWI
5 Vink, Cauchard, & Landay
2021/01/27 dt+UX: Design Thinking for 1User Experience Design, Prototyping & Evaluation 2021/01/27 dt+UX: Design Thinking for User Experience Design, Prototyping & Evaluation 52
51 52
Use Close-Up shots Plan your story –

Storyboard it.
Capture emotion Is the story believable?
Avoid conversation
(This is the hardest to get right
Film multiple angles
and ends up distracting)
People Context Film longer than the
shot needs (you can
Use the right person always cut down)
for the role-ask friends
53 54
9
Winter 2021
Stanford University
ChoreoLab (2015 winner)

Wow Effect
Show your solution at it’s
best, save the best for last
The Solution Subtlety

Show how the solution
makes the user feel – subtly
Don’t ‘Sell’ it
Don’t tell people to use your
solution, show them why
55 56
PiggyBag (2018 winner)
Munch (2015 runner up)

57 58
Cabana (2017 winner) Token (Concept Video)
59 60
10
Winter 2021
Stanford University
High Fidelity
Video
Examples
Off (2019 runner up)
61 62
Token (hi-fi video) High Fidelity Video Prototypes
63 64
High Fidelity Video Prototypes High Fidelity Concept Videos
Pedro Andrade, CIID

65 66
11
Winter 2021
Stanford University
High Fidelity Concept Videos High Fidelity Concept Videos
parqtheapp Smart Primer

67 68
Summary Next Time

• Project
– Define your tasks starting in studio this week
• Video prototypes allow us to quickly communicate
– Shoot & edit a Concept Video
how a user will use a design
• Lecture (Mon)
– Design Exploration
• Concept videos set up more of the story of use • Read
– Pg. 135-151 from Buxton’s Sketching User Experience
– Tohidi, Buxton, Baecker, Sellen, “Getting the Right Design and
• Both techniques are useful the Design Right: Testing Many Is Better Than One”, CHI
– your projects are at the concept video stage 2006.
69 70
12

05 Video

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

05 Video

Uploaded by

Copyright:

Available Formats

dt+UX – Design Thinking for User Experience Design, Prototyping & Evaluation 2021/01/27

dt + UX DESIGN THINKING FOR USER EXPERIENCE DESIGN + PROTOTYPING + EVALUATION

Hall of Fame! Hall of Fame or Shame?

darksky.net Google app logos

dt + UX DESIGN THINKING FOR USER EXPERIENCE DESIGN + PROTOTYPING + EVALUATION

Google app logos

Task-based Design & Evaluation What Should Tasks Look Like?

Using Tasks in Design (cont.)

Task Flows Show How to Do the Task

Solution: An app that leads kids on a scavenger hunt

SIMPLE: hunt for treasure DO IT NOW

COMPLEX: compete against other kids/families

Video Prototype Characteristics

Optional Narration, Conversation preferred

Tuned Carbon Shopper

It’s About Stories

Key Pieces of Successful Concept Videos

People Context The Solution

Use what you know and what you have

Administrivia Team Break

Exit Tickets & Attendance

• Reminder that attendance is recorded at every lecture!

Someone should be able to understand Making a Concept Video

Make a basic plot

Use sticky notes so scenes can be moved

Include lines to be spoken if necessary

Use appropriate angles

Storyboarding Shoot your Film

SHOT 2 Edit your Film

Use Close-Up shots Plan your story –

ChoreoLab (2015 winner)

The Solution Subtlety

PiggyBag (2018 winner)

Munch (2015 runner up)

Cabana (2017 winner) Token (Concept Video)

Token (hi-fi video) High Fidelity Video Prototypes

High Fidelity Video Prototypes High Fidelity Concept Videos

Pedro Andrade, CIID

High Fidelity Concept Videos High Fidelity Concept Videos

parqtheapp Smart Primer

Summary Next Time

You might also like