Professional Documents
Culture Documents
Designing: Mobile
Designing: Mobile
DESIGNING
MOBILE
EXPERIENCES
Available
NOW
http://mobiledesign.org
HOUSEKEEPING
mobiledesign.org
mobiledesign.org/workshop
flingmedia.com
slideshare.net/fling
linkedin.com/in/fling
@fling
The Layers
of the
Mobile
Experience
IDEA
The rst thing we need is an idea that inspires us.
NEEDS & GOALS
IDEA
The rst thing we need is an idea that inspires us.
Identify a basic need with our desired user.
CONTEXT
NEEDS & GOALS
IDEA
The rst thing we need is an idea that inspires us.
Identify a basic need with our desired user.
The circumstances where information adds value.
STRATEGY
CONTEXT
NEEDS & GOALS
IDEA
The rst thing we need is an idea that inspires us.
Identify a basic need with our desired user.
The circumstances where information adds value.
How we can add value to the business.
DEVICE PLAN
STRATEGY
CONTEXT
NEEDS & GOALS
IDEA
The rst thing we need is an idea that inspires us.
Identify a basic need with our desired user.
The circumstances where information adds value.
How we can add value to the business.
Choose the devices that best serves our audience.
DESIGN
DEVICE PLAN
STRATEGY
CONTEXT
NEEDS & GOALS
IDEA
The rst thing we need is an idea that inspires us.
Identify a basic need with our desired user.
The circumstances where information adds value.
How we can add value to the business.
Choose the devices that best serves our audience.
Create a user experience based around needs.
PROTOTYPE
DESIGN
DEVICE PLAN
STRATEGY
CONTEXT
NEEDS & GOALS
IDEA
The rst thing we need is an idea that inspires us.
Identify a basic need with our desired user.
The circumstances where information adds value.
How we can add value to the business.
Choose the devices that best serves our audience.
Create a user experience based around needs.
Test the experience within the context.
DEVELOPMENT
PROTOTYPE
DESIGN
DEVICE PLAN
STRATEGY
CONTEXT
NEEDS & GOALS
IDEA
The rst thing we need is an idea that inspires us.
Identify a basic need with our desired user.
The circumstances where information adds value.
How we can add value to the business.
Choose the devices that best serves our audience.
Create a user experience based around needs.
Put all the pieces together.
Test the experience within the context.
TESTING
DEVELOPMENT
PROTOTYPE
DESIGN
DEVICE PLAN
STRATEGY
CONTEXT
NEEDS & GOALS
IDEA
The rst thing we need is an idea that inspires us.
Identify a basic need with our desired user.
The circumstances where information adds value.
How we can add value to the business.
Choose the devices that best serves our audience.
Create a user experience based around needs.
Put all the pieces together.
And test, and test, and test some more.
Test the experience within the context.
OPTIMIZATION
TESTING
DEVELOPMENT
PROTOTYPE
DESIGN
DEVICE PLAN
STRATEGY
CONTEXT
NEEDS & GOALS
IDEA
The rst thing we need is an idea that inspires us.
Identify a basic need with our desired user.
The circumstances where information adds value.
How we can add value to the business.
Choose the devices that best serves our audience.
Create a user experience based around needs.
Put all the pieces together.
And test, and test, and test some more.
Reduce all assets to its lowest possible size.
Test the experience within the context.
PORTING
OPTIMIZATION
TESTING
DEVELOPMENT
PROTOTYPE
DESIGN
DEVICE PLAN
STRATEGY
CONTEXT
NEEDS & GOALS
IDEA
The rst thing we need is an idea that inspires us.
Identify a basic need with our desired user.
The circumstances where information adds value.
How we can add value to the business.
Choose the devices that best serves our audience.
Create a user experience based around needs.
Put all the pieces together.
And test, and test, and test some more.
Reduce all assets to its lowest possible size.
Adapt for other devices that t our strategy.
Test the experience within the context.
Discussion
What do you want to learn
today?
Is it to create visual experiences?
Is it to take advantage of the mobile
opportunity?
Is it to gure out how to make sense of
this new medium?
Is it something more?
All of the above?
What is Mobile
Design?
JARGON ALERT
Mobile Design
The creation of user experiences
for the mobile context.
It doesnt start
with Photoshop
Why
Mobile?
Whats Next?
Generation Y
97% own a computer
94% own a mobile phone
76% use Instant Messaging
69% use Facebook
56% own an iPod
Generation Z
Born in the modern digital
age. Technology is infused at
birth.
Generation Z
Born in the modern digital
age. Technology is infused at
birth.
The iPhone is to them
Generation Z
Born in the modern digital
age. Technology is infused at
birth.
The iPhone is to them
as the Macintosh was to us.
The Mobile Generation
2009 2010 2011 2012 2013 2014 2015
Everyone Else
source: us census bureau
In less ve years, the
mobile generation
could have more
buying power than all
other demographics
Discussion
Why are you here?
What is it about mobile that appeals to
you the most?
What do you see as being the obstacles?
(your understanding? your company? the
technology? etc.)
What are the biggest opportunities?
New
Rules
R
u
l
e
#
1 F
o
r
g
e
t
W
h
a
t
Y
o
u
T
h
i
n
k
Y
o
u
K
n
o
w
Palm
2%
Blackberry
3%
Windows Mobile
5%
Symbian
6%
Java ME
7%
Android
7%
iPhone
69%
R
u
l
e
#
2
B
e
l
i
e
v
e
W
h
a
t
Y
o
u
S
e
e
,
N
o
t
W
h
a
t
Y
o
u
R
e
a
d
Experiment
Share your
ndings
R
u
l
e
#
3
C
o
n
s
t
r
a
i
n
t
s
N
e
v
e
r
C
o
m
e
F
i
r
s
t
vs.
R
u
l
e
#
4
F
o
c
u
s
o
n
C
o
n
t
e
x
t
,
G
o
a
l
s
a
n
d
N
e
e
d
s
R
u
l
e
#
5
Y
o
u
C
a
n
t
S
u
p
p
o
r
t
E
v
e
r
y
t
h
i
n
g
Palm
2%
Blackberry
3%
Windows Mobile
5%
Symbian
6%
Java ME
7%
Android
7%
iPhone
69%
R
u
l
e
#
6
D
o
n
t
C
o
n
v
e
r
t
,
C
r
e
a
t
e
R
u
l
e
#
7
K
e
e
p
I
t
S
i
m
p
l
e
Needs
&
Goals
JARGON ALERT
Needs
The circumstances in which
something is necessary, or that
require some course of action.
Abraham Harold Maslow
(April 1, 1908 June 8, 1970)
was an American psychologist.
He is noted for his concept-
ualization of a "hierarchy of
human needs", and is
considered the founder of
humanistic psychology.
JARGON ALERT
Goals
The object of a person's ambition
or efort; an aim or desired result
User Goals
B
u
s
i
n
e
s
s
G
o
a
l
s
T
e
c
h
n
i
c
a
l
G
o
a
l
s
Sweet
Spot
JARGON ALERT
Neurolinguistic
Programming
A model of interpersonal
communication chiey concerned with
the relationship between successful
patterns of behavior and the subjective
experiences underlying them.
L
e
a
r
n
i
n
g
T
y
p
e A
u
d
i
t
o
r
y
2
0
%
o
f
a
l
l
p
e
o
p
l
e
c
o
n
n
e
c
t
w
i
t
h
o
t
h
e
r
s
v
e
r
b
a
l
l
y
i
s
a
l
l
t
h
e
y
n
e
e
d
t
o
f
e
e
l
c
o
n
n
e
c
t
e
d
a
n
d
p
r
o
d
u
c
t
i
v
e
w
i
t
h
o
t
h
e
r
s
L
e
a
r
n
i
n
g
T
y
p
e
V
i
s
u
a
l
3
5
%
o
f
a
l
l
p
e
o
p
l
e
B
e
i
n
g
a
b
l
e
t
o
s
e
e
c
o
n
c
e
p
t
s
i
l
l
u
s
t
r
a
t
e
d
a
s
d
i
a
g
r
a
m
s
o
r
c
h
a
r
t
s
a
n
d
g
r
a
p
h
s
i
s
h
e
l
p
f
u
l
f
o
r
t
h
i
s
m
a
j
o
r
i
t
y
l
e
a
r
n
i
n
g
t
y
p
e
.
L
e
a
r
n
i
n
g
T
y
p
e
K
i
n
e
s
t
h
e
t
i
c
4
5
%
o
f
a
l
l
p
e
o
p
l
e
i
n
c
o
r
p
o
r
a
t
e
m
u
s
c
l
e
m
e
m
o
r
y
a
n
d
h
a
n
d
-
e
y
e
m
o
v
e
m
e
n
t
t
o
p
r
o
c
e
s
s
a
n
d
r
e
t
a
i
n
n
e
w
i
n
f
o
r
m
a
t
i
o
n
Exercise
Needs & Goals
Lets examine BBC
What human needs does the BBC serve?
What are the goals of the BBCs
audience?
Does the BBC utilize neurolinguistic
programming models? If so, how?
How do we document our ndings?
Context
JARGON ALERT
Context
The circumstances that form the
setting for an event, statement, or
idea, and in terms of which it can
be fully understood and assessed.
Context
BIG C
Context with a capital C
is how the user will derive
value from something
they are currently doing.
In other words, the
understanding of
circumstance. It is the
mental model they will
establish to form
understanding.
context
little c
The mode, medium, or
environment in which we
perform a task or the
circumstances of
understanding.
our present location
our device of access
our state of mind
Physical
Context
My present location.
My physical context will
dictate how I access
information and therefore
how I derive value from it.
Media
Context
My device of access.
The media context isnt
just about the immediacy
of the information we
receive
How to engage people in
real time.
Modal
Context
Our present state of
mind.
Where should I eat?
Should I buy it now or
later?
Is this safe or not?
Events
TV
Billboard
Radio
Live
Website
A
u
d
i
t
o
r
y
Kinesthetic
V
i
s
u
a
l
Word of
Mouth
Print Ad
Mobile
Device
IVR
SMS
IVR
SMS
WAP
SMS
QR Code
SMS
QR Code
SMS
SMS
MMS
SMS
WAP
SMS
SMS
Bluetooth
Notify
WAP
WAP
MMS
Email
Send to
Friend
WAP Site
Notify
Buy
WAP Site
WAP Site
Send to
Friend
Join
Buy
Notify
Notify
Send to
Friend
Post
WAP Site
MMS
Send to
Friend
Notify
Send to
Friend
Join
Discuss
Send to
Friend
Notify
Down
load
Down
load
Notify
Vote
Join
Vote
Notify
Buy
Send to
Friend
Notify
Events
TV
Billboard
Radio
Live
Website
A
u
d
i
t
o
r
y
Kinesthetic
V
i
s
u
a
l
Word of
Mouth
Print Ad
Mobile
Device
IVR
SMS
IVR
SMS
WAP
SMS
QR Code
SMS
QR Code
SMS
SMS
MMS
SMS
WAP
SMS
SMS
Bluetooth
Notify
WAP
WAP
MMS
Email
Send to
Friend
WAP Site
Notify
Buy
WAP Site
WAP Site
Send to
Friend
Join
Buy
Notify
Notify
Send to
Friend
Post
WAP Site
MMS
Send to
Friend
Notify
Send to
Friend
Join
Discuss
Send to
Friend
Notify
Down
load
Down
load
Notify
Vote
Join
Vote
Notify
Buy
Send to
Friend
Notify
Events
TV
Billboard
Radio
Live
Website
A
u
d
i
t
o
r
y
Kinesthetic
V
i
s
u
a
l
Word of
Mouth
Print Ad
Mobile
Device
IVR
SMS
IVR
SMS
WAP
SMS
QR Code
SMS
QR Code
SMS
SMS
MMS
SMS
WAP
SMS
SMS
Bluetooth
Notify
WAP
WAP
MMS
Email
Send to
Friend
WAP Site
Notify
Buy
WAP Site
WAP Site
Send to
Friend
Join
Buy
Notify
Notify
Send to
Friend
Post
WAP Site
MMS
Send to
Friend
Notify
Send to
Friend
Join
Discuss
Send to
Friend
Notify
Down
load
Down
load
Notify
Vote
Join
Vote
Notify
Buy
Send to
Friend
Notify
Events
TV
Billboard
Radio
Live
Website
A
u
d
i
t
o
r
y
Kinesthetic
V
i
s
u
a
l
Word of
Mouth
Print Ad
Mobile
Device
IVR
SMS
IVR
SMS
WAP
SMS
QR Code
SMS
QR Code
SMS
SMS
MMS
SMS
WAP
SMS
SMS
Bluetooth
Notify
WAP
WAP
MMS
Email
Send to
Friend
WAP Site
Notify
Buy
WAP Site
WAP Site
Send to
Friend
Join
Buy
Notify
Notify
Send to
Friend
Post
WAP Site
MMS
Send to
Friend
Notify
Send to
Friend
Join
Discuss
Send to
Friend
Notify
Down
load
Down
load
Notify
Vote
Join
Vote
Notify
Buy
Send to
Friend
Notify
Exercise
Define the Context
Again lets use the BBC as our example
What are the physical contexts?
What are the media contexts?
What are the modal contexts?
What is the BIG Context?
What are some of the possible business
strategies simply by addressing
context?
Types
of Apps
T
y
p
e
s
o
f
A
p
p
s
A
p
p
l
i
c
a
t
i
o
n
M
e
d
i
u
m
SMS
Experiences where the goal
is to alert users of new
information.
WEBSITE
Experiences that provide
the user with simple
informational data.
WIDGETS
Experiences that are based
on an existing multi-
platform framework.
WEB
APPS
When you want to employ a
cross-platform application
strategy.
NATIVE
APPS
Experiences that take
advantage of the native
features of the device.
GAMES
Experiences that entertain.
Device
Support
Complexity
User
Experience
Language
Offline
Support
Device
Features
Initial Cost
Long Term
Cost
SMS All Simple Limited N/A No None Low High
Mobile
Websites
All Simple Limited HTML No None Low Low
Mobile
Web
Widgets
Some Medium Great HTML Limited Limited Low Low
Mobile
Web
Application
Some Medium Great
HTML, CSS,
JS
Limited Limited Mid Low
Native
Application
All Complex Excellent Various Yes Yes High Mid
Games All Complex Excellent Various Yes Yes Very High High
MEDIUM MATRIX
T
y
p
e
s
o
f
A
p
p
s
A
p
p
l
i
c
a
t
i
o
n
C
o
n
t
e
x
t
UTILITY
A simple at-a-glance tool.
LOCALE
An application based on
the physical context.
INFORM
ATIVE
An application meant to
inform.
PRODUC
TIVITY
Meant to increase our
available time.
IMMER-
SIVE
An application meant to
distract or entertain.
User Experience Type Task Type Task Duration Combine with
Utility At-a-Glance Information Recall Very Short Immersive
Locale Location-based Contextual Information Quick Immersive
Informative Content-based Seek Information Quick Locale
Productivity Task-based Content Management Long Utility
Immersive Full Screen Entertainment Long Utility, Locale
CONTEXT MATRIX
Mobile
IA
KEEP IT
SIMPLE
SITEMAPS
CLICKSTREAMS
Start
?
Action
?
View
View
Action
?
Action
View
?
View
Finish
?
View
Action
View
?
View
Yes
Yes
No
No
Yes No
No
No
Option
Option
Yes
Yes
No
Yes
No
Maybe
WIREFRAMES
PROTOTYPING
DIFFERENT IA
FOR
DIFFERENT
DEVICES?
Exercise
Designing a Mobile
Information Architecture
Lets build a mobile wireframe for the
BBC
Sketch out an IA for both touch and
traditional devices.
What are the primary navigation items?
How can you can you tease content?
How are they diferent? How are they
the same?
THE
DESIGN
MYTH
Back
Navigation
Title New
Content
Mobile
Design
The Tent Pole
The business goal of a tent-pole
production is to support or prop
up the losses from other
productions.
However, to create a tent-pole
production, the creators involved
must make an artistic
work that they know
will appeal to the
largest possible
audience, providing
something for everyone.
vs.
Best Possible Experience
In mobile development, the risks
and costs of creating that tent-
pole product are just too high.
This lesson is so easily seen
through bad or just plain
uninspired mobile design.
Asking creative people
to create uninspiring
work is a fast track
to mediocrity.
vs.
iPhone The Rest
Elements of Mobile Design
|
CONTEXT
|
MESSAGE
|
LOOK & FEEL
|
LAYOUT
|
COLOR
|
TYPE
|
GRAPHICS
Context
Who are the users?
What do you know about them?
What type of behavior can you assume
or predict about the users?
What is happening?
What are the circumstances in which
the users will best absorb the content
you intend to present?
When will they interact?
Are they at home and have large
amounts of time? Are they at work
where they have short periods of time?
Will they have idle periods of time
while waiting for a train, for example?
Where are the users?
Are they in a public space or a private
space? Are they inside or outside?
Is it day or is it night?
Why will they use your app?
What value will they gain from your
content or services in their present
situation?
How are they using their mobile
device?
Is it held in their hand or in their
pocket?
How are they holding it?
Open or closed? Portrait or landscape?
Message
What you are trying to say about
your site or application visually?
Your message is the overall mental
impression you create explicitly
through visual design.
How someone will
react to your design?
If you take a step back,
and look at a design
from a distance, what
is your impression?
Look & Feel
Look & Feel is used to describe the
appearance
As in I want a clean look and feel
or I want a usable look and feel.
The problem is:
As a mobile designer,
what does it mean?
Layout
How the user will visually process
the page
The structural and visual
components of layout often get
merged together, creating
confusion and making
your design more
difcult to produce.
Color
The most common obstacle you
encounter when dealing with color
is mobile screens.
When complex designs are
displayed on diferent mobile
devices, the limited color depth
on one device can cause
banding, or unwanted
posterization in the
image.
Typography
How type is rendered on mobile
screens:
subpixel-based screens
A subpixel is the division of each
pixel into a red, green, and blue
(or RGB) unit at a micro-
scopic level, enabling
for a greater level of
antialiasing for each
font character or glyph.
Typography
How type is rendered on mobile
screens:
a
n
d
n
e
i
t
h
e
r
w
i
l
l
m
a
k
i
n
g
t
o
k
e
n
i
n
v
e
s
t
m
e
n
t
s
i
n
g
r
e
e
n
t
e
c
h
.
W
h
e
r
e
i
s
t
h
e
n
e
x
t
i
n
d
u
s
t
r
i
a
l
r
e
v
o
l
u
t
i
o
n
c
r
y
i
n
g
o
u
t
f
o
r
r
e
v
o
l
u
t
i
o
n
a
r
i
e
s
?
S
i
m
p
l
e
:
i
n
i
n
d
u
s
t
r
i
e
s
d
o
m
i
n
a
t
e
d
b
y
c
l
e
a
r
,
d
u
r
a
b
l
e
,
s
t
r
u
c
t
u
r
a
l
b
a
r
r
i
e
r
s
t
o
e
f
c
i
e
n
c
y
a
n
d
p
r
o
d
u
c
t
i
v
i
t
y
.
U
m
a
i
r
H
a
q
u
e
2
1
s
t
C
e
n
t
u
r
y
I
n
d
u
s
t
r
i
a
l
R
e
v
o
l
u
t
i
o
n
IN 100 YEARS
We need a new Industrial
Revolution that will dene the
stepping stones for the next
hundred years.
We need a deep examination of the
impact that the Information
Age will have on real
people for generations
to come.
MOBILE IS
WHERE THE
CONVERSATION
STARTS
MOBILE IS...
...the introduction to the larger concepts of how
to address the users context in a multi-device
environment
...how to deal with data portability
...about making content accessible to all people,
regardless of location, education,
or ability
...how to leverage the mobile
web, the social web, the
desktop web, desktop
software, and other
emerging technologies
to the benet of your users.
What do you
think?
http://mobiledesign.org
My name is Brian Fling and Im a Mobile Designer
twitter.com/fling
company: pinchzoom.com
blog: flingmedia.com
Fonts used: Archer & Avenir
Illustrations by Simon Oxley (www.idokungfoo.com)
THANK YOU