Ux design for iPhone

UX DESIGN FOR IPHONE
Paul Coulton

UX DESIGN FOR IPHONE
Paul Coulton
We have over 250,000 apps in the app store.We don’t need any more
Fart apps. If your app doesn’t do something useful or provide some
form of lasting entertainment, it may not be accepted.

MYTHS ABOUT UX DESIGN
• Its about making ugly
interfaces pretty
• Its another name for
usability
• Its slows the development
process

MYTHS ABOUT UX DESIGN
• Its about making ugly
interfaces pretty
• Its another name for
usability
• Its slows the development
process
There was no Master
Bates or Seaman Stains in
Captain Pugwash

INTHE
BEGINNING Japan Yawning about
Iphone
Apple's much anticipated iPhone is
'buisiness as usual, in a country
where mobile features are already
so advanced
“when technology delivers basic
needs, user experience
dominates”
Don Norman

WHATS DOES
IT INCLUDE ?
Is the art of structuring
data

WHATS DOES
IT INCLUDE ?
data
examines embedded
behaviours in physical and
virtual spaces

WHATS DOES
IT INCLUDE ?
data
examines embedded
virtual spaces
a measure of ease of use of
a tool in order to achieve a
particular goal

WHATS DOES
IT INCLUDE ?
data
examines embedded
virtual spaces
particular goal
(Ergonmics) study of
optimising the interface
between human beings and
designed objects

WHATS DOES
IT INCLUDE ?
data
examines embedded
virtual spaces
particular goal
designed objects
uses a cognitive
methodology relating to
study, design, construction
and implementation of
human centric computer

WHATS DOES
IT INCLUDE ?
data
examines embedded
virtual spaces
particular goal
designed objects
uses a cognitive
methodology relating to
study, design, construction
and implementation of
human centric computer
designing the interaction
between human and
computer including graphic
design

HOW DO WE EXPERIENCE?
Positive Effectiveness
Efficiency
Pride
Pleasure
Joy
Engagement
Love
Trust
Fun
Negative Anger
Frustration
Disappointment
Shame
Stupidity
Indifference
Hate
There can be a large scale of emotions when using mobile
applications

SW PRODUCT QUALITY
ISO-9126
Functionality Reliability Efﬁciency Usability Portability Maintainability
Suitability Maturity Time behaviour Operability Install-ability Testability
Accuracy FaultTolerance
Resource
Utilisation
Learnability Adaptability Stability
... ... ... ... ... ...

SW PRODUCT QUALITY
ISO-9126
Resource
Utilisation
... ... ... ... ... ...
Usability means ease-of-use
“What is the required level of mental and physical effort
to complete the tasks?”

SW PRODUCT QUALITY
ISO-9126
Resource
Utilisation
... ... ... ... ... ...
Usability means ease-of-use
“What is the required level of mental and physical effort
to complete the tasks?”
UX: Expectations, motives,
actions, interpretations, …

EXTENDING USABILITYTO UX
OVERALL UX
Pragmatic Hedonic
Social Value
Richer social life
Image/Status
Symbol
Enjoyment
Pleasure Stimulation
Utility
Feature set Reliabilty
Usability
Easy to fulﬁl a goal Easy to use
Useful
All I need
No Clutter
No malfunction
Secure
Robust
Navigation
Performance
Intuitive
Taking into use
Anywhere
Anytime
Communicate
Monitor
Presentable
Good Citizen
Fits my image
Look
Behaviour
Feel
First use
Novel behaviour
New sensations
New activities

UX ISTEMPORAL
Expected User
Experience
User experience
during interaction
Overall user
experience
Brand image
Advertisements
Friends, Reports,...
(before use)
User,
Context,
System
Brand image
Advertisements
Friends, Reports,...
(outside interaction)

UX IN PRODUCT LIFECYCLE
!  "#$%&'()'$
*+'&$
,'-./0)$
!  1#$23+4&'$
-56(-)6$
!  7#$%&'()'$
8'+.&'$)5$
946$
!  :#$%();0$
())'3).53$
<.&+)$
=>?&'++.53$
@4&;0(+'$
A05&)$)'&>$
4+'$
B53/$)'&>$
4+'$
Objective
Catch
Attention
Create
desire to
buy
Create/
Increase
delight
Ensure
loyalty
Desired
response
Context
Direct design
element
Grab it Try it Explore it Stick to it
1st Exposure:
shop, friend
Demo use
In use, short
term
In use, long
term
Industrial design,
haptics, content,
form factor,
display keypad
Start-up, idle,
menu, graphics
and animations,
sounds, UE
concepts
Content, set-up,
enhancements
Quality of
usability,
localisation,
implementation,
consistency,
support

LIFE ONTHE APP STORE
• Most mobile applications have
a relatively short “shelf life”
with on average less than
25% of users returning to the
app one day after download,
dropping to around 5% after
30 days.
• Pinch Media

LIFE ONTHE APP STORE
• Most mobile applications have
a relatively short “shelf life”
with on average less than
25% of users returning to the
app one day after download,
dropping to around 5% after
30 days.
• Pinch Media
The category to which an application
belongs seems to have a strong
effect on return rate – applications
that are typically more dynamic e.g.
sports (results, league tables etc.)
and entertainment apps fared better
than games, utility, and lifestyle
applications.

SHUFFLINGTHE DECK
• By appearing on the Top 100
list, applications would receive
2.3x more downloads on
average and often an order of
magnitude higher for the Top
25 and Top 10 list.
• Pinch Media

DOING A DEAL
• ”We only did the ﬁrst iPad/
iPhone integration with
Chillingo and aside from that
we’ve published everything
ourselves.We will not use
Chillingo again.”
• “You don’t need publishers.
• Angry Birds “Mighty Eagle”
PeterVesterbacka

CONTEXT IS EVERYTHING IN
MOBILE
TOPIC ON THE MOVE AT HOME
Light
Weather
Noise
Usage
Attention
Movement
Connections
Power
Flow
Cost
Senses
Daylight, dark at night Stable indoor lighting
Cold, heat, raining, snowing Warm and comfortable
Trafﬁc, people talking Air conditioning humming
One handed use Two hands available
Many distractions Family
Device, hand and ﬁnger waving Sitting
3G connection lost, off-line use stable WLAN connection
Flat Battery occasionally Having recharger available
Many interruptions from
context
Potential system interruptions
Charged by downloaded data Flat rate WLAN
Easier to listen Time to view

!"#$%#&'()'*+,-*!
"#$%&$'()*+!',-)&.,!/)*/01'!$*2!&+$3(%('4!'0+'(*.!5(',!$/'&$%!&+0-+!(+!$+!(*'0.-$%!6)-!20+(.*!$+!+5!'0+'(*.!(+!6)-!+)6'5$-0!
20#0%)170*'!
./'#&'()'*+,-(*0$%&+0-*!
8,(+!1$-'!)6!',0!1-)/0++!7$4!30!2)*0!(*!+'$.0+9!:;!/)*/01'!<=;*'0-$/'()*!>0+(.*!<=!?-$1,(/!>0+(.*@!A-)')'410+!$-0!20#0%)102!
1'2-'(&3'(45(.0-6'7&!
B10/(64!:C!2-(#0-+!$*2!'$-.0'+@!;20*'(64!&+0-!0D10-(0*/0!2-(#0-+!',$'!7&+'!30!6&%E%%02!6)-!',0!1-)2&/'!')!30!+&//0++6&%@!F$G0!
70$+&-$3%0!'$-.0'+H!5,0*0#0-!1)++(3%0!
87'6+9:(&3'(-'')*(#-)(60-&';&(09(%*'!
;20*'(64!',0!10)1%0!5,)!5(%%!&+0!',0!1-)2&/'H!5,4!$*2!5,$'!',04!5(%%!&+0!('!6)-H!$*2!&*20-!5,$'!/)*2('()*+!',04!5(%%!&+0!('!
UX DRIVEN DEVELOPMENT

UX CONCEPTING
The concept can describe an existing or non-existing product

DEVILS INTHE DETAIL
• The level of detail of the concept
description detail can vary.This
depends on
• The target audience you are
trying to impress :Investors /
management / engineers /
consumers / etc.
• The next product decisions to
make (management or
development)

DESIGN APPS AS
INFORMATION APPLIANCES
• Design Axioms for an
Information Appliance:
• Simplicity
• Versatility
• Pleasurability
• Don Norman

WHO ISYOUR APP FOR?
The most popular phone in the world?

WHO ISYOUR APP FOR?
The most popular phone in the world?
!
!"#
$"#
%"#
&#
&#
'#
$# %$# ()*+,#
-,./012#
34#
5)6)7)8,#
-)19#:7+;//)1#
<8,;*=>779#
?@@8>#
A6B>7#

INTERACTION
DESIGN
1. Design the view level
navigation map

INTERACTION
DESIGN
2. Design each individual view,
one-by-one

INTERACTION
DESIGN
3. Select a used UI
component for the view data

INTERACTION
DESIGN
4. Design validation

INTERACTION
DESIGN
5. Co-operation withVisual
design

INTERACTION
DESIGN
6. Design reviews
√

GRAPHICAL DESIGN
Contents
User‘s and
service
provider’s
data
UI Controls
Menus,
buttons,
scroll bars, …
Decoration
Ornamental
UI elements…
Layout Colors Typography Graphics
Composition,
grids, spaces, …
Hues, shades,
tones,…
Fonts, typefaces,
…
Icons, images,
frames, borders,
…
Graphical and Visual Style
UI’s
visual
appearance
!"#$%&'&($%)

!"#$%"&
'#("%&
BENEFITS OF
GRAPHICAL
DESIGN
Guides the user’s eye where
you want it to be
Highlighting critical elements
on the screen
Capable of communicating
emotions, not only
information

!"#$%"&
'#("%&
BENEFITS OF
GRAPHICAL
DESIGN
Guides the user’s eye where
you want it to be
Highlighting critical elements
on the screen
Capable of communicating
emotions, not only
information
In the perfect
mobile
application
functionality,
usability, and
graphic design
are intertwined
and support one
another

IMPACT OF GRAPHICAL
DESIGN
You form your
ﬁrst impression in
a few seconds
(mostly
subconscious
activity)
Graphical Design impacts
users emotionally, even
before they start thinking
First impressions
are important in
relationships
In this case, the
“user-product”
relationships
You might change
your choice after
looking at the
designs for a
while (conscious)

Limited display space
requires tough
prioritization on what
to present, and how
Some desktop
designs are directly
applicable, others
completely
unacceptable
REINVENTING
THE WHEEL
The universal graphical design
rules apply also for mobile
device UIs
However consider carefully
what metaphors or other
design details can and should be
adopted from the desktop
designs

COLOUR
Colour is a wide topic. It can cover
aspects of science, art and
psychology
Wireframes are often black-and-
white by purpose
Colors can steal the attention
from the interaction design
A rule for mobile devices - keep it
simple

PICKING COLOURS
When selecting colours some designers rely on their personal
experience, intuition and taste

MAYTHE FORCE OF
TYPOGRAPHY BE WITHYOU
You might take typography for granted until it fails.
What
was
normal
for
typewriting
in
the
past,

looks
now
outdated.
Of
course
if
your
UX
is
to
look
old-‐fashioned,

it
can
provide
the
effect
your
looking
for.
There are many way to ruin a reading experience
The text might look cool, but it can be hard to read
Graphical Design is not the opposite to text, it is a part of it
Typefaces alone can have an both emotional and
practical impacts on the reader.

SIZE NOW
MATTERS
For three generations of the
iPhone,Apple kept the screen
consistent (320x480 pixels and 3.5
inches diagonal). But now Apple's
new iPhone 4 boasts the highest
resolution phone screen ever
(960x640 pixels, 3.5 inches
diagonal, & an 800:1 contrast ratio.

MOBILE CONTEXT
CHARACTERISTICS
!"#$%&'()"*#+&,( -&.+/"(0")+1"(
)"*#+&,(
2"3%(&,/4()"*#+&,(
!"#$%&'()"*(%"+$#',$&"-'./"01%2$%"&,%$$)&3"
1+#1),$+"4(5'0$"5%(-&$%&"1)+"67&8"
!"&.1)+1%+"9:;<=>?"
#$%&'()",1)"5$"(@.'4'A$+"
.("-(%B"()"4(&."4(5'0$"
+$#',$&8"
!"0(-C2%1@/',&"#$%&'()"
*$1.D%$&")("#'+$("(%"1D+'("
,().$)."1)+"*$-"'412$&8"
UI Designs,
case
BBC.com
(Oct’09)

UTILITY IN MOBILE DEVICES
If utility is important to the mobile application concept the
graphical design should be Simple, clear and effective
Use colours and
layout to create
clear and logical
structures for the
content.
If you use images,
minimise the size.
Avoid decorative
elements.
Avoid horizontal scrolling

CHECKLIST
• Check the desired company/product brand
• Check what are the UX goals: will “standard” design be enough or
is a “wow” desired
• You can break the graphical design rules - but only if you know
them
• Check the target mobile UI platform: look, feel and components
• Validate product concept, use cases, UX requirements
• Do close cooperation with interaction design
• Check the display technology where the application will be used

Ux design for iPhone

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Ux design for iPhone (20)

More from Paul Coulton (15)

Recently uploaded (20)

Ux design for iPhone