22
Film & broadcasting techniques applied to UX design Human Computer Interaction Day 2014 Rebeca Miranda 23 rd April 2014

HCID 2014: Film & broadcasting techniques applied to UX design. Rebeca Miranda, System Concepts

Embed Size (px)

DESCRIPTION

- Storytelling techniques along the research and design process. - Elements of a story (Characters, plot, space, time) How to create stories - Creating characters from your users - Using the plot as problem solving tool. - Ordering the information to make sense for the viewer. - Narrative types and uses - Filming and broadcasting audiovisual techniques to tell your stories. - Your user as a story creator

Citation preview

Page 1: HCID 2014: Film & broadcasting techniques applied to UX design. Rebeca Miranda, System Concepts

Film & broadcasting techniques applied to UX design Human Computer Interaction Day 2014

Rebeca Miranda

23rd April 2014

Page 2: HCID 2014: Film & broadcasting techniques applied to UX design. Rebeca Miranda, System Concepts

2

Agenda

Film & broadcasting techniques applied to UX design

Human Computer Interaction Day 2014 Rebeca Miranda

Page 3: HCID 2014: Film & broadcasting techniques applied to UX design. Rebeca Miranda, System Concepts

3

Storytelling techniques along a User Centred Design process

Research

Design Development & Evaluation

Storyboards VoxPops Video Highlights Sketching

Collecting stories Personas

Brainstorming Role Play

Personas Storyboards Using stories

to inform other teams

Turning users’ stories into tasks Ideation sessions

[email protected] @RebecaMiranda

Page 4: HCID 2014: Film & broadcasting techniques applied to UX design. Rebeca Miranda, System Concepts

How to create stories

Page 5: HCID 2014: Film & broadcasting techniques applied to UX design. Rebeca Miranda, System Concepts

5

Elements of a story In a UX context

123 Space and time

Characters

Concept

4 Plot

[email protected] @RebecaMiranda

Page 6: HCID 2014: Film & broadcasting techniques applied to UX design. Rebeca Miranda, System Concepts

6

What do I want to convey with my story?

Who is my audience?

Why is this story relevant?, why do other people need to know it?

The concept

Page 7: HCID 2014: Film & broadcasting techniques applied to UX design. Rebeca Miranda, System Concepts

7

User research

Insights

Personas Storyboards

Live Personas Role Play

Videos

Your story User stories

[email protected] @RebecaMiranda

Creating characters from users Working with Live Personas

Page 8: HCID 2014: Film & broadcasting techniques applied to UX design. Rebeca Miranda, System Concepts

8

Ways to create characters from your users

-  Real data coming from User interviews, ethnography, etc: picking up those characters that are more interesting, engaging. You don’t need to copy the person, just use it as a starting point (e.g. age, profession, and the single bit that call your attention when you visited their home: e.g. she was very tidy, and worried about not to annoyed her roomate)

[Add example here]

-  Using your imagination: characters that come from target audience groups, and in a way embrace the characteristics of that group. In this way, you need to use your imagination, and you might need to bring the character a bit to the extreme to make it clear.

[Add example here]

-  Observing users is going to give your character:

Credibility

Most times real people are far more interesting that fantasies (e.g. the guy we interview for O2 as an interesting character (hero), had an accident his struggle to recover mobility and speech.

Plot

Real problems and facts that will help you build your plot, and the space and time in which the story will develop

Creating characters from your users

Real users

Your imagination

[Use the personas we created for SC – create drawings]

+

Page 9: HCID 2014: Film & broadcasting techniques applied to UX design. Rebeca Miranda, System Concepts

9

Creating characters from users

[email protected] @RebecaMiranda

Page 10: HCID 2014: Film & broadcasting techniques applied to UX design. Rebeca Miranda, System Concepts

10

Working with archetypes.

Archetype: ˈärk(i)ˌtīp

•  a very typical example of a certain person or thing: the book is a perfect archetype of the genre.

•  a recurrent symbol or motif in literature, art, or mythology: mythological archetypes of good and evil.

[email protected] @RebecaMiranda

Page 11: HCID 2014: Film & broadcasting techniques applied to UX design. Rebeca Miranda, System Concepts

11

1.  Setup (Character and basic situation is introduced)

2.  Conflict (and incident, a problem or a catalyst that puts things and characters into motion)

3.  Resolution (the problem is solved, characters confront it and the situation leads to and end – calm state again)

[Introduce a chart that illustrate this with a graph showing moments of tension, attention, intereste, peaks]

Ordering the information to make sense for the viewer. Structure and linearity

1 2 3 Resolution The problem is solved, characters confronted and the situation leads to an end – calm state again

Conflict And incident, a problem or a catalyst that puts things and characters into motion

Setup Character and basic situation are introduced

[email protected] @RebecaMiranda

Page 12: HCID 2014: Film & broadcasting techniques applied to UX design. Rebeca Miranda, System Concepts

12

Pre-production Planning ahead

Page 13: HCID 2014: Film & broadcasting techniques applied to UX design. Rebeca Miranda, System Concepts

13

Production Shot & framing Types of shots

Resource images Mid Shot Medium close-up Close-up

Very wide shot Wide shot

Source: http://www.mediacollege.com/video/shots/

Page 14: HCID 2014: Film & broadcasting techniques applied to UX design. Rebeca Miranda, System Concepts

14

Post-production Video edition & audio

[email protected] @RebecaMiranda

Page 15: HCID 2014: Film & broadcasting techniques applied to UX design. Rebeca Miranda, System Concepts

15 15

Videos and animations VoxPops, research deliverables and communication tools

Page 16: HCID 2014: Film & broadcasting techniques applied to UX design. Rebeca Miranda, System Concepts

Other techniques to create stories

Page 17: HCID 2014: Film & broadcasting techniques applied to UX design. Rebeca Miranda, System Concepts

17

•  Different characters' points of view on the same story

•  Different outcomes of the same story

•  Different outcomes depending on the spectator

Narrative types and uses Non-linear variations

Page 18: HCID 2014: Film & broadcasting techniques applied to UX design. Rebeca Miranda, System Concepts

18

Using the plot as a problem solving tool. HCID 2013 – Innovation workshop

Aspects of the experience Solutions

Issue/ Challenge

Variations of solution

Valid idea

Story (2nd act) Story (1st act)

Using stories to create solutions

[email protected] @RebecaMiranda

Page 19: HCID 2014: Film & broadcasting techniques applied to UX design. Rebeca Miranda, System Concepts

19

Using the plot as a problem solving tool. 221b Baker Street

[email protected] @RebecaMiranda

Page 20: HCID 2014: Film & broadcasting techniques applied to UX design. Rebeca Miranda, System Concepts

20

Your user as a story creator

[email protected] @RebecaMiranda

Page 21: HCID 2014: Film & broadcasting techniques applied to UX design. Rebeca Miranda, System Concepts

020 7240 3388

www.system-concepts.com

Rebeca Miranda

[email protected] @RebecaMiranda

Page 22: HCID 2014: Film & broadcasting techniques applied to UX design. Rebeca Miranda, System Concepts

22 22

Videos and animations Project deliverables