Mobile Prototyping Essentials - Part II

Mobile Prototyping Essentials
Part II

Rachel Hinman
Senior Research Scientist
Nokia Research Lab
Palo Alto, California USA
Hinman

Our plan for today…
8:30am - Noon
What makes mobile UX different?
Three Design/Mobile UX Exercises:
• Identifying Mobile Needs
• Ideating in the Wild
• Creating a Good Hand
Noon – 1:30pm - LUNCH

1:30pm – 5:30pm
Mobile prototyping essentials
Three Mobile Prototyping Exercises
• Storyboarding
• Translating GUI to NUI
• Creating an In-Screen Prototype

Great Mobile Experiences:
1 are uniquely mobile

2 are sympathetic to context

3 speak their power
3

8:30am - Noon
What makes mobile UX different?
Three Design/Mobile UX Exercises:
• Identifying Mobile Needs
• Ideating in the Wild
• Creating a Good Hand
Noon – 1pm - LUNCH

1pm – 5pm
Mobile prototyping essentials
Three Mobile Prototyping Exercises
• Storyboarding
• Translating GUI to NUI
• Creating an In-Screen Prototype

Q: What makes mobile UX different?

Q:

5

Bad
Decision-Making

11

The final diamonds are where good
design decisions matter most…

…and where designers new to mobile
have the least domain specific skill
and confidence.

12

Seated in a relatively predictable environment

Large screen enables multi-tasking

Keyboard and a mouse for input

13

Highly variable context and environment

Small screen size and limited text input

UI takes up the entire screen

Difficult to multi-task and easy to get lost

14

Designers new to mobile
A don‟t have the domain
specific skills or heuristics to
lean on.

15

Prototype
Prototype
Prototype
Prototype
Prototype
Prototype
Prototype
Prototype

16

PC Prototyping
is considered a

Luxury
A

17

Mobile Prototyping is

Essential
A

18

The best way
to develop those skills
is to prototype early
and often.

19

A

Prototypes are the ultimate
decision-making aid

20

Review the four “whys” of mobile prototyping

Identify the two genres of prototyping and
overview of six prototyping methods

Review the key differences between NUI
and GUI interfaces
Overview of animation principles that can be
incorporated into your mobile experiences

Three hands-on activities
21


overview six prototyping methods

and GUI interfaces

22



and GUI interfaces

23



and GUI interfaces

24



and GUI interfaces

25

Okay, let‟s get started!

26

“Whys” of prototyping
Improve your design decision-making

Communicate an Idea

Gather User Feedback

Explore the “Unknowns”

Fine-tune an Idea
28

Communicating an Idea or Experience

YouTube Video 29

Gather User Feedback

30

Explore the Unknowns

31

Fine-Tune an Idea

32

Experiential Prototyping

34

Tactical Prototyping

35

Experiential Prototyping:
Best suited for design explorations where:

1 You are working on a “broader”
mobile project.

2 Target mobile hardware and software
scope is unknown.
(perhaps being created).

3 The design space is relatively
unchartered.
36

Tactical Prototyping:

1 You are working on a “focused”
mobile project.

scope is known.

3 The design space is relatively known.

37


38

Context will likely be
your blindside

42

Context Framework

43

Context Framework

44

will help you understand
context

45

Experiential Prototyping:
You are working on a “broader”
1 mobile project.

scope is unknown.
(perhaps being created).

3 The design space is relatively
unchartered.

Experiential Prototypes
Body Storming

Speed Dating Prototypes

Storyboarding

Concept Videos

In reality… people‟s lives are messy

Similar to improvisational theater, body storming
involves acting out possible scenarios or use
cases with actors and props. Unlike computer-
based technology that is logic based and only
makes visible the conditions that existed
before, people are
illogical, perceptive, aware, and self-correcting.

Body storming is a technique that helps capture
and harness these messy yet essential aspects
of human behavior and account for them in the
mobile design process.
56

1. Select groups of five to eight
participants in a troupe.

Photo by Christian Crumlish (xian), 2009 on Flickr 57

1. Select groups of five to eight
participants in a troupe.

2. Identify 3-5 experience
scenarios for your troupe to
“perform.”

Examples: Purchasing a cup of
coffee with my iPhone, selecting
which phone to purchase in
a carrier‟s store.


3. Every player must have a
role; there should be no
“trees” that are just for
background. Use large
cards that label the roles
people are playing.

59
Photo by Christian Crumlish (xian), 2009 on Flickr

4. Props can have
feelings, thoughts, and the
ability to speak. Use
thought-bubble cards to
show what a participant is
thinking versus saying.


5. Have a narrator or color commentator who
can explain things. The narrator can
pretend the scenario is like television,
using a remote to stop action, rewind,
or fast-forward.

6. De-brief after each scenario. What did
the group learn? What was surprising?
What seemed important? Capture what
you learned from the exercise and
discuss how you can integrate it into
what happens next.


Bodystorming will help you capture
the emotional tenor of mobile
interactions

63

Design in Context

64


Illustration courtesy of Scott Davidoff
Rapidly Exploring Application Design through Speed Dating 66

Scott Davidoff of CMU
•Few design tools

•High Cost of Failure

•Unpredictable social consequences


Builds on three theories:

1 Abundance brings perspective.

Need to cross boundaries to know
2 they exist.

Multiple low-cost engagements with
3 multiple concepts enables a broader
perspective to emerge.
68

Step One
Identify most
promising
concepts

69

Step Two
Create storyboards
that
depict each concept

Illustration courtesy of Scott Davidoff

Step Three
Present storyboards to
users & gather
feedback

71

Step Four
Create prototypes

Photo courtesy of Scott Davidoff

Step Five
Conduct user enactments
with prototypes

Photo courtesy of Scott Davidoff

Speed Dating Prototypes are
especially well-suited for gathering
user impressions of
a new-to-the-world experience

74

Mobile UX Storyboarding
Identify the central idea(s) you are
trying to communicate.

78


Create a character and identify the key
issues he/she currently faces.

79


Rough out a basic story.

80


Rough out a basic story.

Start filling in the cells. Rough out the
complete story, then fill in details.
81


Rough out the basic story

Start filling in the cells. Rough out the
complete story, then fill in details.
82

Your Design Challenge!
Storyboarding

1 Select one concept you‟d like to explore more
deeply using the storyboarding technique.

Storyboard one scenario using the templates
2 provided.
Remember to identify the key issues the
3 character faces and rough out the complete
story before filling in details.

Concept Videos

Nokia 888 communicator concept phone design by Tamer Nakisci 91

Concept Videos
Pros
•High Impact

•Highly Shareable

•Good for High-Level
Ideas

•Technology still in
development
94

Concept Videos
Pros Cons
•High Impact •Resource Intensive!!!

•Highly Shareable •Skill Intensive

•Good for High-Level •Cultural Fit
Ideas
•Concept videos don‟t
•Technology still in make bad ideas good.
development
95

Tactical Prototypes
Sketching/Paper Prototyping

In-Screen Mobile Prototypes

Mobile Browser Prototypes

Keynote/Powerpoint Prototypes

Flash Prototype

Platform Specific Prototype
97

Tactical Prototypes
Sketching/Paper Prototyping




Flash Prototype

98

Great mobile UIs
speak their power

100

Ruthless
Editing

101

A Brave NUI World

102

Seated in a relatively predictable environment

Large screen enables multi-tasking

Keyboard and a mouse for input

104

We‟re reaching the edges
of what GUI can do

105

Most mobile smartphones
have touchscreens with
Natural User Interfaces
106

GUIs Become Brittle
on a Mobile Device

107

Key differences between
NUI and GUI

112

Defining Attributes of

GUIs…

113

GUI Mental Model =
Computer as tool

114

GUI = Recognition
“What you see is what you get”

115

GUI = Metaphorics, containment and place

116

GUIs = Heavy Chrome, Icons & Buttons

117

Defining Attributes of

NUIs…

118

NUI Mental Model =
Computer as media

119

NUI = Intuition
“What you do is what you get”

120

NUI = Fluid, Unmediated, and Organic

121

NUIs = Content is the Star
122

Highly variable context and environment

Small screen size and limited text input

UI takes up the entire screen

Difficult to multi-task and easy to get lost

123

GUI = Experiences are anchored

124

NUI = Experiences Unfold

125

NUIs Unfold Like a Game

126

NUIs Can Feel Anchor-less

127

Mobile Experiences Unfold
Patterns for how mobile experiences unfold
and progressively reveal their nature

1 The Nested Doll Pattern

2 The Hub and Spoke Pattern

3 The Bento Box Pattern

4 The Filtered View Pattern
129

Nested Doll Pattern

130

Hub and Spoke Pattern

131

Bento Box Pattern

132

Filtered View Pattern

133

A

Trick to unfolding =
Information boulders to pebbles

134

From GUI to NUI

1 Identify an interaction sequence you‟d like to
recreate using NUI principles.

2 Sketch out the interaction using the
templates provided.

3 Identify how you‟d like your mobile
experience to unfold.

135

REMEMBER!
It‟s easy to go crazy and try to do it all.
Instead, focus on applying what we‟ve covered…

Understanding the differences between
graphical and natural user interfaces.

Experimenting with how your mobile experience
can unfold and and progressively reveal its
nature.

Play around with the unfolding patterns that have
been presented… or invent some of your own.
136

Paper In-Screen Prototypes

Following Process documented by Diego Pulidovia
UX Magazine – Paper In-Screen Prototypes
Photos courtesy of Diego Pulido and UX Magazine

139

1. Sketch screen layouts.

140
Photo courtesy of Diego Pulido and UX Magazine


2. Scan or photograph
the sketches.

141


2. Scan or photograph
the sketches.

3. Making sizing
adjustments to the
files.

142

4. Save the resized
images in a file format
supported by the mobile
device. Be mindful of the
sequencing of your
screens and label files
accordingly.

143

4. Save the resized
sequencing of your
accordingly.

5. Import the files into the
mobile device‟s photo
gallery.

144

4. Save the resized
sequencing of your
accordingly.

5. Import the files into the
mobile device‟s photo
gallery.

6. Click and swipe away.
145

Create an in-screen prototype.

Hang your screen designs on the wall.

Photograph each design.

Transfer photos from the camera to computer
and make any sizing adjustments.

Sync images to your mobile device
and swipe away….

146

Tactical Prototypes
Sketching




Flash Prototype

147


148

Reasons for Prototyping
in Keynote/Powerpoint
It‟s super efficient and fast!

Level of fidelity is high – gives you an end
result that looks and feels like a real app.

Supports *some* gestures and transitions.

It‟s as close as you can get to the real thing
without digging into code.
150

Tactical Prototypes
Sketching




Flash Prototype

152

Emergent Mobile Topics
1 Shapeshifting

2 A Brave NUI World

3 Comfortable Computing

“We made the web
in the image of
ourselves, and in
the U.S., that
means OBESE.”

~Jason Grigsby

Q:
“I think a lot of web design in the
past five to ten years is actually
Q:
just a reflection of print again.
We‟ve been designing for one
context, which isn‟t much better
than a PDF document.”

~ Bryan Rieger

160

Q: “Our obsession with layout
(carried over from print design)
Q:
keeps us from seizing much
bigger opportunities on mobile.”

~ Luke Wroblewski

161

Plans & Situated Action
Mutual Reconfiguration

Q: Suchman‟s theory of mutual
reconfiguration suggests a person‟s
Q:
capacity to act (their agency) is
reconfiguredwhen it comes into contact
with another thing or person -
thathuman action is constantly
constructed and reconstructed
from dynamic interactions with the
material and social worlds.

Q:

Q:

Two
Design Implications

Q:

Q:

1. Shift in contextual assumptions

Q:

Q:

2. Shift in our sensibilities
around content as a design material

A
Throughout the design process,
our work should be situated in
the contexts where it will be used.

Design as the manipulation of materials.

Q:

Q:

Pages and screens
are not our design material

“Right now many designers end up
focusing a lot of energy on the overlying
Q:
view – the whole template and look and
feel. But the smaller the screen gets, the
Q:
less that stuff matters.

One of the most important things we‟ve
started looking at is writing and working
with APIs rather than designing „pages‟
for one context.”

~Stephanie Rieger

“For so much digital content, there is no
good metaphor to render anymore – the
content is just information, text and
images – so new approaches to
Q:
interaction and visual UI design are
needed.”

~Mike Kruzeniski

“The most profound technologies
Q:
are those that disappear.
Q:
They weave themselves into the
fabric of everyday life until they are
indistinguishable from it.”

~ Mark Weiser
The Computer for the 21st Century

Q:

Q:

Tab Pad Yard-Sized Board

1991

Mobile devices are
the gateway drug for ubicomp

Following toddlers into the future

“I like cuddling up in bed with Netflix
Q:
on the iPad instead of sitting in front
of the TV. It‟s more comfortable to
Q:
go to bed with a movie the same
way I used to go to bed with a
book”

~ Norbert
iPad Study Participant

“It‟s almost like my blankie…
Q:
I curl up in bed with it, or on the
couch. I usually have it with
Q:
me, regardless of extenuating
circumstances ”

~ Erin
iPad Study Participant

“It’s almost like my blankie…”

This should look familiar…

213

This should look familiar…

The web has evolved around a
task-efficiency model.

Mobile can be different.

214

Tasks are about completion…

215


Possibilities are interactions that
accrue over time…

216


accrue over time…

… or facilitate
exploration…
217


accrue over time…

..or are about
… or facilitate SENSING
exploration… INTENT!
218

Prototyping is not a Panacea

228

PC Prototyping
is considered a

Luxury
A

Mobile Prototyping is

Essential
A

Mobile presents an
opportunity to invent new
ways for users to interact
with information.

232

Thank you!
Email:
rachel.hinman@nokia.com

Templates and Online Resources:
www.rachelhinman.com/mobile_prototyping_essentials

Oh! By the way, I‟m writing a book..

The Mobile Frontier
A Guide for Designing
Mobile Experiences

Expected Publication: May 2012

Follow along…

Mobile Prototyping Essentials - Part II

More Related Content

What's hot

Similar to Mobile Prototyping Essentials - Part II

Recently uploaded

Mobile Prototyping Essentials - Part II

Editor's Notes