View
107
Download
5
Category
Tags:
Preview:
DESCRIPTION
Mobile is hot right now. People are spending more time on their mobile devices than ever before. Given that the number of people accessing the web via mobile devices is predicted to surpass the number accessing via the desktop in the next two years, it is high time that we start to take this mobile thing seriously. The mobile web is different. It can be daunting for those venturing into the mobile realm for the first time. Where do you start? Do you need to design a native app, a web app or a combination of both? What devices should you target? In this Twilight Presentation Mark Delaney spoke about: User-Centred Mobile Design Mobile Design Considerations Principles to Prototypes Responsive Design Techniques Mark is a senior UX Designer at Intergen and leads the User Experience Design team. In this presentation he took attendees on a whirlwind tour of the best practices for organising and designing your mobile experience.
Citation preview
DESIGNING THE MOBILE USER EXPERIENCE
Mark Delaney
User Experience Designer / 5 September 2012
_MOBILE UX
Designing the mobile
User Experience
Mobile design considerations
Mobile prototyping
Responsive web design
Why care about mobile?
WHY CARE ABOUT MOBILE?
_MOBILE UX
IN A
WORLD OF
THEIR
MOBILE
DEVICES
Source: Kathy Slamen Photography
Mobile is growing
like crazy.
Mobile UX – Designing the Mobile User Experience
PC vs. Smartphone Sales
Source: http://bkaprt.com/mf/4
“Mobile phones
will overtake PC’s
as the most
common web
access devices
by 2013” Gartner Research, 2010
UNDER-
STANDING
THE
MOBILE
CON-
SUMER
73% OF PEOPLE SURVEYED
Google: Our Mobile Planet, May 2012
Say they don’t leave
their home without
their device
Smartphones are always with you
Smartphones are used everywhere
Google: Our Mobile Planet, May 2012
97%
80% 76%
64% 64% 56% 56%
55%
44%
35%
24%
At
a s
oci
al g
ath
eri
ng
Ho
me
On
th
e g
o
Wo
rk
In a
sto
re
Café
or
coff
ee s
ho
p
Rest
au
ran
t
Air
po
rt
Pu
blic
tran
spo
rt
Do
cto
r
Sch
oo
l
59% On their smartphones
at least once a day
ACCESS THE INTERNET
Google: Our Mobile Planet, May 2012
51%
45%
41%
24%
Allowing users to stay connected
Emailing
Social Networking
Search
Video
24% WOULD RATHER GIVE
UP TV THAN THEIR
Google: Our Mobile Planet, May 2012
smartphone
Smartphones have become so important that…
38% SEARCH ON THEIR
SMARTPHONES
Google: Our Mobile Planet, May 2012
every day
Major access point for search
Google: Our Mobile Planet, May 2012
Smartphones are used while multi-tasking
with other media
Designing the mobile
User Experience
Mobile design considerations
Mobile prototyping essentials
Responsive web design
Why care about mobile?
MOBILE DESIGN CONSIDER-ATIONS
_MOBILE UX
MOBILE
FIRST
Source: www.flickr.com/photos/pete-karl/4637024524
Mobile UX – Designing the Mobile User Experience
Designing for mobile first
■ Mobile is exploding
3 reasons to consider mobile first approach
■ Mobile forces you to focus
Today's smartphones are driving huge use of
networked applications and Web content.
■ Mobile extends your capabilities
There simply isn't room in a 320 by 480 pixel
screen for extraneous, unnecessary elements. You
have to prioritise.
Allows you to deliver innovative experiences by
building on new capabilities native to mobile
devices and modes of use
“If you design mobile
first, you create
agreement on what
matters most. You can
then apply the same
rationale to the
desktop/laptop version
of the web site.”
Ethan Marcotte – A List Apart
MOBILE
WEBSITE,
WEB APP
OR NATIVE
APP?
Source: Gerry Alexis
Mobile UX – Designing the Mobile User Experience
What are the differences?
■ Mobile optimised website
In case you were wondering…
An iteration of your desktop site that has been
optimised for the mobile context
■ Native app A custom-made application users can download onto
their mobile phone for frequent use
■ Mobile web app Is designed to work like a native app but accessible via
a browser
So what one should
you create?
MOBILE
CONTEXT
Source: Marie Kåstru
The mobile context is somewhat varied…
Mobile UX – Designing the Mobile User Experience
Design for partial attention and interruption
■ Expectation of engagement
“One thumb, one eyeball”
■ Multi-tasking and task switching
Immersive isn’t always desirable
■ Human constraints
People are motivated to be productive and efficient
Varied concentration spans caused by social settings,
and ergonomic limitations of mobile devices
SCREEN
SIZE
Source: www.flickr.com/photos/katerha/4592429363
1024 x 768 as an agreed standard
Mobile UX – Designing the Mobile User Experience
Losing that much screen space forces you to focus
TOUCH
TARGETS
Source: www.flickr.com/photos/ogimogi/2223450729/sizes/l/in/photostream/
Mobile UX – Designing the Mobile User Experience
Finger-friendly design
■ Small touch targets lead to big problems
Go small by going big
■ Pixel width of the average index finger
Small touch targets make users work harder because
they require more accuracy to hit
■ Finger-sized is ideal, but not always practical
The average width of the index finger is 1.1 to 2
cm (11 – 20 mm) for most adults
Finger-sized targets are much easier to apply on a
tablet than a mobile device because there is more
screen space available
Microsoft touch guidelines
TOUCH
GESTURES
Source: www.flickr.com/photos/7247517@N02/1503933726//
Mobile UX – Designing the Mobile User Experience
Touch guidance
Mobile UX – Designing the Mobile User Experience
Content over navigation
PIXEL
DENSITY
Source: www.flickr.com/photos/randomguyweird/5412716286/
Mobile UX – Designing the Mobile User Experience
Designing for iPhone 4's Retina Display
Mobile UX – Designing the Mobile User Experience
Guidelines for scaling to pixel density
■ Don't use smaller images that are scaled up
■ Don’t use larger images that are scaled down
Images are scaled by default, images look blurry at
140% scale on HD
■ Avoid specifying sizes that aren't multiples
of 5px
Larger images that are scaled down can show
scaling distortion and jagged edges
Units that aren't multiples of 5px can experience
pixel shifting when scaled to 140% and 180%.
Avoid the following:
Designing the mobile
User Experience
Mobile design considerations
Mobile prototyping
Responsive web design
Why care about mobile?
RE- SPONSIVE WEB DESIGN (RWD)
_MOBILE UX
“Rather than tailoring
disconnected designs to
each of an ever-
increasing
number of web devices,
we can treat them as
facets of the same
experience”
Ethan Marcotte – A List Apart
Mobile UX – Designing the Mobile User Experience
Becoming responsive
■ A flexible, grid-based layout The benefits of creating a liquid layout are becoming
too great to ignore
■ Flexible images and media Being able to create flexible images is an important
consideration when trying to create a flexible layout
■ Media queries Allow you to gather data about site visitors and use it
to apply the appropriate styles
The ingredients…
Mobile UX – Designing the Mobile User Experience
Responsive Web Design principles
Desktop Tablet Smartphone
Header Header Header
Content Content Content Sid
eb
ar
1
Sid
eb
ar
2
Sid
eb
ar
1
Sidebar 2 Sidebar 1
Sidebar 2
Mobile UX – Designing the Mobile User Experience
Responsive Web Design principles
IS RWD
REALLY THE
RIGHT
ANSWER?
Source: www.flickr.com/photos/rohit_saxena/4873732679
Mobile UX – Designing the Mobile User Experience
What would
Jakob do?
(WWJD)
“It’s cheap but degrading
to reuse content and
design across diverging
media forms like…
desktop vs. mobile.
Superior UX requires tight
platform integration.”
Jakob Nielson – May 2012
Designing the mobile
User Experience
Mobile design considerations
Mobile prototyping
Responsive web design
Why care about mobile?
MOBILE PROTOTYPING
_MOBILE UX
“Do I need to change
to my design process?”
“When the rubber hits
the road, what do I
need to do differently?”
The User Experience Design Process
“Designers new to
mobile don’t have
the domain specific
skills or heuristics
to lean on”
Rachel Hinman – Mobile Frontier, 2012
ESSENTIAL Mobile Prototyping is
PROTO-
TYPES ARE
DECISION
MAKING
AIDS
Source: www.flickr.com/photos/cannedtuna/6491204853/
Mobile UX – Designing the Mobile User Experience
Prototyping
■ Communicate a design idea or experience
Prototypes serve as a powerful
communication tool because they are often
more precise than words
■ Gather user feedback
Prototypes provide you with a tangible
artefact in which to gather feedback
Key reasons to include prototyping
Mobile UX – Designing the Mobile User Experience
Prototyping Four “whys” of prototyping
■ Explore the unknowns
Provide the means to explore tangible
solutions and helps designers see potential
issues
■ Fine-tune an idea
The devil is often in the details, and
prototyping is a great way to fine-tune your
work
PROTO-
TYPING
METHODS
Source: www.flickr.com/photos/21218849@N03/2829366856/
Source: www.netmagazine.com
Explore ideas
with low fidelity
sketching
Source: Rachel Hinman – The Mobile Frontier
Validate
decisions with
paper
prototyping
Source: m.clove.co.uk
On-device
prototyping has
significant
benefits
Prototyping is no
substitute for creativity
and great ideas. Those
come from you.
Mobile UX – Designing the Mobile User Experience
Considerations, tips and techniques
Designing the mobile UX
■ The mobile web is different A shift from the static environment of the PC
■ Design for humans Understand the varied context of use
■ Consider mobile first It pays to explore the mobile first approach
■ Native app, web app or hybrid? What is the most appropriate for you
■ Define constraints Understand the limitations – e.g. screen size
■ Optimise for file size and memory Less is more
■ Pixel sizes will likely vary As will pixel density on many devices
■ Is a ‘Responsive’ Design suitable? Base this on ROI
■ Do research and prototypes Understand your users and the experience
■ Get something on a device asap Solve design problems in context
Thank you mark.delaney@intergen.co.nz
Any questions?
Recommended