HCID 2014: Film & broadcasting techniques applied to UX design. Rebeca Miranda, System Concepts
-
Upload
city-interaction-lab -
Category
Technology
-
view
103 -
download
0
description
Transcript of HCID 2014: Film & broadcasting techniques applied to UX design. Rebeca Miranda, System Concepts
![Page 1: HCID 2014: Film & broadcasting techniques applied to UX design. Rebeca Miranda, System Concepts](https://reader033.fdocuments.net/reader033/viewer/2022051613/54c7b7644a7959dd038b45e1/html5/thumbnails/1.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022051613/54c7b7644a7959dd038b45e1/html5/thumbnails/2.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022051613/54c7b7644a7959dd038b45e1/html5/thumbnails/3.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022051613/54c7b7644a7959dd038b45e1/html5/thumbnails/4.jpg)
How to create stories
![Page 5: HCID 2014: Film & broadcasting techniques applied to UX design. Rebeca Miranda, System Concepts](https://reader033.fdocuments.net/reader033/viewer/2022051613/54c7b7644a7959dd038b45e1/html5/thumbnails/5.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022051613/54c7b7644a7959dd038b45e1/html5/thumbnails/6.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022051613/54c7b7644a7959dd038b45e1/html5/thumbnails/7.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022051613/54c7b7644a7959dd038b45e1/html5/thumbnails/8.jpg)
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 10: HCID 2014: Film & broadcasting techniques applied to UX design. Rebeca Miranda, System Concepts](https://reader033.fdocuments.net/reader033/viewer/2022051613/54c7b7644a7959dd038b45e1/html5/thumbnails/10.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022051613/54c7b7644a7959dd038b45e1/html5/thumbnails/11.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022051613/54c7b7644a7959dd038b45e1/html5/thumbnails/12.jpg)
12
Pre-production Planning ahead
![Page 13: HCID 2014: Film & broadcasting techniques applied to UX design. Rebeca Miranda, System Concepts](https://reader033.fdocuments.net/reader033/viewer/2022051613/54c7b7644a7959dd038b45e1/html5/thumbnails/13.jpg)
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 15: HCID 2014: Film & broadcasting techniques applied to UX design. Rebeca Miranda, System Concepts](https://reader033.fdocuments.net/reader033/viewer/2022051613/54c7b7644a7959dd038b45e1/html5/thumbnails/15.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022051613/54c7b7644a7959dd038b45e1/html5/thumbnails/16.jpg)
Other techniques to create stories
![Page 17: HCID 2014: Film & broadcasting techniques applied to UX design. Rebeca Miranda, System Concepts](https://reader033.fdocuments.net/reader033/viewer/2022051613/54c7b7644a7959dd038b45e1/html5/thumbnails/17.jpg)
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](https://reader033.fdocuments.net/reader033/viewer/2022051613/54c7b7644a7959dd038b45e1/html5/thumbnails/18.jpg)
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 22: HCID 2014: Film & broadcasting techniques applied to UX design. Rebeca Miranda, System Concepts](https://reader033.fdocuments.net/reader033/viewer/2022051613/54c7b7644a7959dd038b45e1/html5/thumbnails/22.jpg)
22 22
Videos and animations Project deliverables