Mobile UX - From Principles To Prototypes

Mobile UX: From Principles to Prototypes
Rachel Hinman
Nokia
Monday, April 23, 2012
Mobile UX
From Principles to Prototypes

Part I
Rachel Hinman
Senior Research Scientist Nokia Research Lab Palo Alto, California USA
Hinman
2004
I used to be a web designer, too!
UX Immersion Conference, April 2012 All materials 2012
Q:
Where do I begin?
Where do I begin!
Q: Q:!
What can we do with mobile?
How can we streamline the checkout process!
2
Q:
Where do I begin?
Where do I begin!
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
3
8:30am - Noon

Similarities and differences between designing for web and mobile Three most important attributes of great mobile experiences A set of mobile design principles Three mobile design activities
8:30am - Noon

4
8:30am - Noon

8:30am - Noon

5
Okay, lets get started!
Okay let"s get started!
A! Q:
What are the similarities?
What are the similarities!
6
UX designers know how to work in a rapidly evolving eld

13!
Web designers know how to work in a rapidly evolving eld!
UX designers understand how to create experiences within technical constraints

14!
Ability to work within technical constraints!
7
UX designers use similar tools and processes

15!
Similar Tools Similar processes!
Q: Q: A ! !
What are the differences?
What are the differences?!
8
A mobile phone is not a computer

17!
A mobile phone is not a computer!
A!
umm. duh!
Um duh!!
9
Seated in a relatively predictable environment Large screen enables multi-tasking Keyboard and a mouse for input
19!
Differences in the mobile environment!
20!
10
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
21!
22!
Mobile phones started out as a one-to-one!
11
23!
They evolved!
24!
Mobile phones evolved from the landline phone!
12
26!
Smartphone added !
13
27! 27!
Smartphone added !
The Rearview Mirror Effect
14
Even Even in in situations situations inin which whichaaspirit spiritof of exploration exploration and and freedom freedomexist, exist, where wherewe faculty are free are to free experiment to experiment and to work work beyond beyond physical physical and social and constraints, social constraints, our cognitive habits our cognitive often habits get often in the get way. in" the way. Marshall Marshall McLuhan McLuhan called called it the it rear-view the mirror rear-view effect, noting mirror that effect, We noting see thethat world We see through the world a rear-view through mirror. a rear-view We march mirror. We march backwards backwards into into the future. the future. !
Mobile presents an opportunity to invent new ways for users to interact with information.
30!
15
Mobile phones arent really phones anymore

31!
iPhone!
Hypothesis vs. Agenda!
16
17
AQ: !
Whats the rst step?
What are the differences?!
18
Steps
37
Step One: Become familiar with the medium youre designing for
38!
Shift your perspective and point of view!
19
NO EXCUSES!
Buy a modern mobile device
39!
Step Two: Mobile culture indoctrination

40!
20
Images needed!
Observe the culture youre designing for
41!
Step Three: Brace yourself for a fast and exciting ride

42!
21
The rapid development of cell phones is killing early cell phones much faster than it's killing any of the early, older legacy technologies. I think that is a real principle... something you have to understand if you're going to be in this line of work. It's very romantic. It's very fast moving. You are building dead lumps of plastic. When people come out and they show you an iPhone, or an Android... they are showing you larval versions of something much more sophisticated. The world you are building right now is the ground oor for something much larger -- and the soil beneath that ground oor is violently unstable.
-- Mobile Monday Amsterdam November 2008
43!
Rapid Evolution!
Great Mobile Experiences: 1 are uniquely mobile 2 are sympathetic to context 3 3! speak their power
Great Mobile user experiences!
22
Q: A!
Do you remember a time when the web was new?
Do you remember a time!
23
!! A!
We need a web presence!
Do you remember a time!
Brochureware
48!
Solution: Brochure - online!
24
!! A!
We need online commerce!
we need a web presence!
What about shipping?

50!
Online commerce!
25
!! A!
Lets make our site like
Make it like the world!
52!
Southwest airlines!
26
Lessons Learned from Web

We borrowed broken models. Too focused on tactics. We confused the solution with the need. We didnt focus on what the web could do well.
What we learned from the web!
Q: A!
How do we NOT do that again?
How do we not do that again?!
27
Design Principles
Uniquely Mobile
Mobile is a unique & different medium - focus on what it can do well. Technology can guide, but should not be the focus. Focus on needs instead of tactics and solutions.
VS.
28
Design Principle: Uniquely Mobile
Focus on what mobile can do well
vs!
58!
Identify your assumptions!
29
vs!
59!
Technology can help guide, but should not be the focus
30
Need vs. Solution
Research Techniques
INVASIVE! Deprivation ! Study! Diary Studies! RESEARCHER! NOT PRESENT! Online! Survey! Trafc! Studies! Prototype! Testing!
Contextual! interviews!
RESEARCHER! PRESENT!
Shadowing!
Shop Alongs!
LESS INVASIVE!
62!
31
Research Techniques
INVASIVE! Deprivation ! Study! Diary Studies! Prototype! Testing!
RESEARCHER! NOT PRESENT!
Use Two Techniques

Contextual! interviews! Online! Survey! Trafc! Studies! Shadowing!
RESEARCHER! PRESENT!
Shop Alongs!
LESS INVASIVE!
63!
Solution Speak
Solution
Database of Dr. Names Map Calendar Email Facebook Updates LinkedIn Search Picassa
Need
Find a Doctor near me Get from point A to Point B I need to know what may happen I need to communicate I need to feel connected I need to manage my identity I need to answer a question I need to share
64!
32
Your Design Challenge!
Create a mobile experience for the Portland Marriott Hotel

65!

Step 1: Identifying Mobile Needs
1.# Divide into groups 2.# Develop a list of mobile needs 3.# Identify top 3-5 mobile needs
25 Minutes
66!
33
Q: A!
What exactly do you mean by mobile context ?
Pictures of mobile contexts!
34
A!
Pictures of mobile contexts!
More pictures of mobile contexts!
35
Social context!
!! A!
Context is complex!
Context is complex!
36
A!
Context is about understanding human relationships to the people, places and things in the world.
Context is about understanding the relationships!
Context Framework
74!
Context Framework!
37
Context Framework
75!
Context Framework!
Orchestration and Inection

76!
Relationships Chording!
38
77!
Peanut butter!
Spatial
78!
Google: Facebook!
39
Temporal
79!
Temporal!
Social
80!
Spatial - peanut butter!
40
Semantic
81!
Google: Facebook!
Peanut butter in Melbourne right now?

82!
Peanut butter in Denver!
41
The web is good at people and things.

A!
The web is really good at semantic relationships.

(and okay at social relationships)
Context is about understanding the relationships!
Mobile is good at places
84!
Context Framework!
42
Mobile is good at spatial and temporal relationships.
85!
Context Framework!
86!
Google maps - PC vs. Mobile!
43
There are currently not many technologies that help us understand place, and temporal and spatial relationships.
87!
Temporal and spatial relationships are underserved!
Q:
How do we get that understanding?
How do you get that understanding?!
44
Design Principles:
Sympathy to Context
Design for partial attention and interruption Reduce cognitive load and opportunity cost Ideate in the wild
Sympathy to context principles!
Design for partial attention and interruption

90!
Text entry will never be easy!
45

91!
Cognitive Load
92!
46
Opportunity cost
93!
Ideate in the wild

94!
47
Create a mobile experience for the Portland Marriott Hotel

95!
Currently you have

Mobile Needs
96!
48

Step 2: Sympathy to the mobile context
1.# Divide into groups 2.# Head to the streets 3.# Ideate in the wild Create 2-3 concepts based on the needs your team identied
35 Minutes
97!
Wand in the world!
Go outside and brainstorm ideas

98!
in the wild ideation!
49
Anatomy of a concept
99!
35 Minutes
100!
50
101!
Context Framework!
102!
Context Framework!
51
Q:! A!
Huh?
Speak their power?!
52
105!
A light switch!
106!
Shopping cart!
53
107!
Shopping cart!
We can annotate expectations in the web world
108
We can annotate expectations in the web world!
54
Look inside the book Add to cart Shipping! REALLY! Look inside the book Free two-day shipping
Get it new OR used! Maybe a kindle!
Collectible! Sell mine
109
We can annotate expectations in the web world!
110
Options have to be apparent and intuitive in mobile for people to !
55
Q:! A!
How do I create mobile interfaces that speak their power?
How do you make interfaces that speak their power!
Edit!!!
112!
56
Ruthless Editing
113!
We made the web in the image of ourselves, and in the U.S., that means OBESE.
~Jason Grigsby
57
A!
115!
116!
58
A!
117!
A!
118!
59
A!
119!
Josh Clark Example

120!
It$s like a game of cards!
60
Josh Clark Example

121!
Historically, we start with structure
61
Try hiding the structure
Try starting with intuition.
62
Its like a card game

125!
Each card speaks its power

126!
63
You win with a good hand

127!

Step 3: Creating UIs that speak their power
128!
Pivoting people through information!
64
129!
Pivoting people through information!
Create a winning hand.

1.# Translate a concept from your half sheet into a series of UI screens. 2.# Each screen should speak its power. 3.# REMEMBER: The point of this exercise is to hone your editing skills and create UIs that feel intuitive for users.
30 Minutes
130!
65
Tips for Ruthless Editing

1. What is the primary purpose of this screen? 2. What are the 3-5 secondary actions this screen must provide to a user? 3. What is the most intuitive way to visualize this information? 4. Will users know how to interact with this screen within three seconds? 5. Is the information on this screen too dense? What can be removed? 6. How can I get users to the information they are looking for in the least amount of time?
131!
66
LUNCH!
12 1:30pm
I used to be a web designer, too!
67
Mobile UX
From Principles to Prototypes

Part II
Rachel Hinman
Senior Research Scientist Nokia Research Lab Palo Alto, California USA
Hinman
Q:
Q:!
1!
A!
A!
:-(
4
2!
A!
?
6
3!
7!
Bad Decision-Making
4!
The nal diamonds are where good design decisions matter most and where designers new to mobile have the least domain specic skill and condence.
10
5!
11
A!
Designers new to mobile dont have the domain specic skills or heuristics to lean on.
12
6!
Prototype Prototype Prototype Prototype Prototype Prototype Prototype Prototype

13
A!
Luxury
14
PC Prototyping is considered a
7!
A!
Essential
15
Mobile Prototyping is
The best way to develop those skills is to prototype early and often.
16
8!
A!
Prototypes are the ultimate decision-making aid
17
Our plan for today

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
18
9!
Our plan for today

Review the four whys of mobile prototyping Identify the two genres of prototyping and overview 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
19
Our plan for today

20
10!
Our plan for today

21
Our plan for today

22
11!
Okay, lets get started!
23
Prototyping
24
12!
Whys of prototyping
Communicate an Idea Gather User Feedback Explore the Unknowns Fine-tune an Idea
stea lt slid his e!
Improve your design decision-making
25
Communicating an Idea or Experience
YouTube Video!
26
13!
Gather User Feedback
27
Explore the Unknowns
28
14!
Fine-Tune an Idea
29
Two Genres
30
15!
Experiential Prototyping
31
Tactical Prototyping
32
16!
Experiential Prototyping:
Best suited for design explorations where:
stea lt slid his e!
1 2 3
You are working on a broader mobile project. Target mobile hardware and software scope is unknown.
(perhaps being created).
The design space is relatively unchartered.

33
Tactical Prototyping: 1 2 3
stea lt slid his e!
You are working on a focused mobile project. Target mobile hardware and software scope is known. The design space is relatively known.
34
17!
Experiential Prototyping
35
36
18!
37
Context Matters
38
19!
Context will likely be your blindside
39
Context Framework
stea lt slid his e!
40
20!
Context Framework
stea lt slid his e!
41
Experiential Prototyping will help you understand context
42
21!
Experiential Prototyping:
1 2 3
You are working on a broader mobile project. Target mobile hardware and software scope is unknown.
(perhaps being created).
The design space is relatively unchartered.
Experiential Prototypes
Body Storming Speed Dating Prototypes Concept Videos Storyboarding
22!
Bodystorming
45!
Through Lines
23!
24!
25!
In reality peoples 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.
52!
26!
1." Select groups of ve to eight participants in a troupe.
Photo by Christian Crumlish (xian), 2009 on Flickr
53!
1." Select groups of ve 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 carriers store.
54!
27!
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.
55!
4. Props can have feelings, thoughts, and the ability to speak. Use thought-bubble cards to show what a participant is thinking versus saying.
56!
28!
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.
57!
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.
58!
29!
Bodystorming will help you capture the emotional tenor of mobile interactions
59
Design in Context
60!
30!
Speed Dating Prototypes
Illustration courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating
62!
31!
Scott Davidoff of CMU

" Few design tools " High Cost of Failure " Unpredictable social consequences
Rapidly Exploring Application Design through Speed Dating
63!
Speed Dating Prototypes

Builds on three theories:
1 2 3
Abundance brings perspective. Need to cross boundaries to know they exist. Multiple low-cost engagements with multiple concepts enables a broader perspective to emerge.
64!
32!
Step One
Identify most promising concepts
65!
Step Two
Create storyboards that depict each concept
Illustration courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating
66!
33!
Step Three
Present storyboards to users & gather feedback
67!
Step Four
Create prototypes
Photo courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating
68!
34!
Step Five
Conduct user enactments with prototypes
Photo courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating
69!
Speed Dating Prototypes are especially well-suited for gathering user impressions of a new-to-the-world experience
70
35!
Concept Videos
Nokia 888 communicator concept phone design by Tamer Nakisci
72!
36!
73!
74! 74!
37!
Concept Videos
Pros
" High Impact " Highly Shareable " Good for High-Level Ideas " Technology still in development
75!
Concept Videos
Pros
" High Impact " Highly Shareable " Good for High-Level Ideas " Technology still in development
Cons
" Resource Intensive!!! " Skill Intensive " Cultural Fit " Concept videos dont make bad ideas good.
76!
38!
The rst step of creating a concept video is.
77
78
39!
Storyboarding
79!
80
40!
Mobile UX Storyboarding
Identify the central idea(s) you are trying to communicate.
81
Identify the central idea(s) you are trying to communicate. Create a character and identify the key issues he/she currently faces.
82
41!
Identify the central idea(s) you are trying to communicate. Create a character and identify the key issues he/she currently faces. Rough out a basic story.
83
Identify the central idea(s) you are trying to communicate. Create a character and identify the key issues he/she currently faces. Rough out a basic story. Start lling in the cells. Rough out the complete story, then ll in details.
84
42!
Identify the central idea(s) you are trying to communicate. Create a character and identify the key issues he/she currently faces. Rough out the basic story Start lling in the cells. Rough out the complete story, then ll in details.
85
86
43!
87

Storyboarding
Act
ivity
88
44!

Storyboarding: Ideas
Act
ivity
89

Storyboarding
Act
ivity
1 Select one concept youd like to explore

more deeply using the storyboarding technique. templates provided.
2 Storyboard one scenario using the 3 Remember to identify the key issues the
character faces and rough out the complete story before lling in details.
45!
Tactical Prototyping
Tactical Prototypes
Sketching/Paper Prototyping In-Screen Mobile Prototypes Mobile Browser Prototypes Keynote/Powerpoint Prototypes Flash Prototype Platform Specic Prototype
stea lt slid his e!
92
46!
Tactical Prototypes
Sketching/Paper Prototyping In-Screen Mobile Prototypes Mobile Browser Prototypes Keynote/Powerpoint Prototypes Flash Prototype Platform Specic Prototype
stea lt slid his e!
93
Sketching
94
47!
Great mobile UIs speak their power
95
Q:! A!
Huh?
96
48!
97
98
49!
99
We can annotate expectations in the web world
100
50!
Look inside the book Add to cart Shipping! REALLY! Look inside the book Free two-day shipping
Get it new OR used! Maybe a kindle!
Collectible! Sell mine
101
102
51!

103!
Q:! A!
How do I create mobile interfaces that speak their power?
104!
52!
Edit!!!
105!
Ruthless Editing
106!
53!
A Brave NUI World
107!
108!
54!
109!
Were reaching the edges of what GUI can do
110!
55!
Most mobile smartphones have touchscreens with Natural User Interfaces

111!
GUIs Become Brittle on a Mobile Device
112!
56!
57!
115!
GUI/NUI Chasm
116!
58!
Key differences between NUI and GUI
117!
Dening Attributes of
GUIs
118!
59!
GUI Mental Model = Computer as tool

119!
GUI = Recognition What you see is what you get
120!
60!
GUI = Metaphorics, containment and place
121!
GUIs = Heavy Chrome, Icons & Buttons

122!
61!
Dening Attributes of
NUIs
123!
NUI Mental Model = Computer as media

124!
62!
NUI = Intuition What you do is what you get
125!
NUI = Fluid, Unmediated, and Organic
126!
63!
NUIs = Content is the Star

127!
128
64!
GUI = Experiences are anchored

129!
NUI = Experiences Unfold

130!
65!
NUIs Unfold Like a Game
131!
NUIs Can Feel Anchor-less
132!
66!
133
Mobile Experiences Unfold
stea lt slid his e!
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
134!
67!
Nested Doll Pattern
135!
Hub and Spoke Pattern
136!
68!
Bento Box Pattern
137!
Filtered View Pattern
138!
69!
A!
Trick to unfolding = Information boulders to pebbles
139!
A!
140
70!
A!
141

From GUI to NUI
Act
ivity
142!
71!

From GUI to NUI
Act
ivity
1 Identify an interaction sequence youd like

to recreate using NUI principles. templates provided.
2 Sketch out the interaction using the 3 Identify how youd like your mobile
experience to unfold.
143!
144!
72!
145!
REMEMBER!
Understanding the differences between graphical and natural user interfaces.
Act
ivity
Its easy to go crazy and try to do it all. Instead, focus on applying what weve covered
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.
146!
73!
147
Paper In-Screen Prototypes
Following Process documented by Diego Pulido via UX Magazine Paper In-Screen Prototypes
Photos courtesy of Diego Pulido and UX Magazine
148!
74!
1. Sketch screen layouts. ! #! ##! ! !
Photo courtesy of Diego Pulido and UX Magazine
149
1. Sketch screen layouts. 2. Scan or photograph the sketches.
150
75!
1. Sketch screen layouts. 2. Scan or photograph the sketches. 3. Making sizing adjustments to the les.
Photo courtesy of Diego Pulido and UX Magazine!
151
4. Save the resized images in a le format supported by the mobile device. Be mindful of the sequencing of your screens and label les accordingly.
152
76!
4. Save the resized images in a le format supported by the mobile device. Be mindful of the sequencing of your screens and label les accordingly. 5. Import the les into the mobile devices photo gallery.
Photo courtesy of Diego Pulido and UX Magazine!
153!
4. Save the resized images in a le format supported by the mobile device. Be mindful of the sequencing of your screens and label les accordingly. 5. Import the les into the mobile devices photo gallery. 6. Click and swipe away.
Photo courtesy of Diego Pulido and UX Magazine 154!
77!

Create an in-screen prototype. Hang your screen designs on the wall. Photograph each design.
Act
ivity
Transfer photos from the camera to computer and make any sizing adjustments. Sync images to your mobile device and swipe away.
155!
Tactical Prototypes
Sketching In-Screen Mobile Prototypes Mobile Browser Prototypes Keynote/Powerpoint Prototypes Flash Prototype Platform Specic Prototype
stea lt slid his e!
156
78!
Paper Prototyping
157!
158!
79!
Mobile Browser Prototypes
159!
Keynote/Powerpoint Prototypes
160!
80!
161
LOGO
Tagline
Edit
162
81!
LOGO
Tagline
Sydney Opera House
There is no doubt that the Sydney Opera House is his masterpiece. It is one of the great iconic buildings of the 20th century, an image of great beauty that has become known throughout the world a symbol for not only a city, but a whole country and continent.
Edit
163
LOGO
Tagline
Sydney Opera House

Edit
164
82!
LOGO
Tagline
Sydney Opera House

Edit
165
LOGO
Tagline
Sydney Opera House
Edit
166
83!
LOGO
Tagline
Edit
167
Reasons for Prototyping in Keynote/Powerpoint

Its super efficient and fast!
stea lt slid his e!
Level of delity is high gives you an end result that looks and feels like a real app. Supports *some* gestures and transitions. Its as close as you can get to the real thing without digging into code.
168
84!
Motion: New Design Material
169
Animation & Transitions

A new design elements that can:
Reinforce cognition.
stea lt slid his e!
Help users form a mental model of how information will unfold. Provide cues for interaction. Help make your experience feel more intuitive for users.
170
85!
Twelve Basic Principles of Animation
171
Principle One
Squash and Stretch
172
86!
Principle One
Squash and Stretch
173
Principle Two
Anticipation
174
87!
Principle Two
Anticipation
175
Principle Three
Staging
176
88!
Principle Three
Staging
177
Principle Four
Straight Ahead and Pose to Pose
178
89!
Principle Four
Straight Ahead and Pose to Pose
179
Principle Five
Follow Through and Overlapping Action
180
90!
Principle Five
Follow Through and Overlapping Action
181
Principle Six
Slow in and Out
182
91!
Principle Six
Slow in and Out
183
Principle Seven
Arcs
184
92!
Principle Seven
Arcs
185
Principle Eight
Secondary Action
186
93!
Principle Eight
Secondary Action
187
Principle Nine
Timing
188
94!
Principle Nine
Timing
189
Principle Ten
Exaggeration
190
95!
Principle Ten
Exaggeration
191
Principle Eleven and Twelve
Solid Drawing and Appeal
192
96!
Specifying Transitions
Sketches Courtesy of Greg Nudelmen Storyboarding iPad Transitions
193
Transitions and Animation

Methods for specifying motion:
Hand drawn sketches. Include specications on wireframes. Build a prototype of key motion phrases using PowerPoint, Keynote or other prototyping tool.
194!
97!
Motion is an Art. There are no formulas.
195
Fidelity
196!
98!
Failure
197!
Prototyping is not a Panacea
198!
99!
A!
Luxury
PC Prototyping is considered a
A!
Essential
Mobile Prototyping is
100!
Thank you!
Email: rachel.hinman@nokia.com
Templates and Online Resources: www.rachelhinman.com/mobile_prototyping_essentials
Oh! By the way, Im writing a book..
The Mobile Frontier

A Guide for Designing Mobile Experiences
Expected Publication: April 2011
Follow along
101!

Mobile UX - From Principles To Prototypes

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Mobile UX - From Principles To Prototypes

Enviado por

Direitos autorais:

Formatos disponíveis

Mobile UX: From Principles to Prototypes

Monday, April 23, 2012

From Principles to Prototypes

I used to be a web designer, too!

UX Immersion Conference, April 2012 All materials 2012

What can we do with mobile?

How can we streamline the checkout process!

Our plan for today

What makes mobile UX different?

Mobile prototyping essentials

What makes mobile UX different?

What makes mobile UX different?

What makes mobile UX different?

What makes mobile UX different?

Okay, lets get started!

Okay let"s get started!

What are the similarities?

What are the similarities!

UX designers know how to work in a rapidly evolving eld

Web designers know how to work in a rapidly evolving eld!

UX designers understand how to create experiences within technical constraints

Ability to work within technical constraints!

UX designers use similar tools and processes

Similar Tools Similar processes!

What are the differences?

What are the differences?!

A mobile phone is not a computer

A mobile phone is not a computer!

Differences in the mobile environment!

Differences in the mobile environment!

Difficult to multi-task and easy to get lost

Differences in the mobile environment!

Mobile phones started out as a one-to-one!

Mobile phones evolved from the landline phone!

The Rearview Mirror Effect

Mobile phones arent really phones anymore

Hypothesis vs. Agenda!

Hypothesis vs. Agenda!

Hypothesis vs. Agenda!

Hypothesis vs. Agenda!

Whats the rst step?

What are the differences?!

Shift your perspective and point of view!

Shift your perspective and point of view!

Step Two: Mobile culture indoctrination

Shift your perspective and point of view!

Observe the culture youre designing for

Shift your perspective and point of view!

Step Three: Brace yourself for a fast and exciting ride

Shift your perspective and point of view!

Do you remember a time when the web was new?

Do you remember a time!

We need a web presence!

Do you remember a time!

Solution: Brochure - online!

We need online commerce!

we need a web presence!

What about shipping?

Lets make our site like

Make it like the world!

Lessons Learned from Web

What we learned from the web!

How do we NOT do that again?