designing the mobile user experience
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.TRANSCRIPT
![Page 1: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/1.jpg)
DESIGNING THE MOBILE USER EXPERIENCE
Mark Delaney
User Experience Designer / 5 September 2012
_MOBILE UX
![Page 2: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/2.jpg)
![Page 3: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/3.jpg)
Designing the mobile
User Experience
Mobile design considerations
Mobile prototyping
Responsive web design
Why care about mobile?
![Page 4: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/4.jpg)
WHY CARE ABOUT MOBILE?
_MOBILE UX
![Page 5: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/5.jpg)
IN A
WORLD OF
THEIR
MOBILE
DEVICES
Source: Kathy Slamen Photography
![Page 6: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/6.jpg)
Mobile is growing
like crazy.
![Page 7: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/7.jpg)
Mobile UX – Designing the Mobile User Experience
PC vs. Smartphone Sales
Source: http://bkaprt.com/mf/4
![Page 8: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/8.jpg)
“Mobile phones
will overtake PC’s
as the most
common web
access devices
by 2013” Gartner Research, 2010
![Page 9: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/9.jpg)
UNDER-
STANDING
THE
MOBILE
CON-
SUMER
![Page 10: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/10.jpg)
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
![Page 11: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/11.jpg)
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
![Page 12: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/12.jpg)
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
![Page 13: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/13.jpg)
24% WOULD RATHER GIVE
UP TV THAN THEIR
Google: Our Mobile Planet, May 2012
smartphone
Smartphones have become so important that…
![Page 14: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/14.jpg)
38% SEARCH ON THEIR
SMARTPHONES
Google: Our Mobile Planet, May 2012
every day
Major access point for search
![Page 15: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/15.jpg)
Google: Our Mobile Planet, May 2012
Smartphones are used while multi-tasking
with other media
![Page 16: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/16.jpg)
Designing the mobile
User Experience
Mobile design considerations
Mobile prototyping essentials
Responsive web design
Why care about mobile?
![Page 17: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/17.jpg)
MOBILE DESIGN CONSIDER-ATIONS
_MOBILE UX
![Page 18: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/18.jpg)
MOBILE
FIRST
Source: www.flickr.com/photos/pete-karl/4637024524
![Page 19: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/19.jpg)
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
![Page 20: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/20.jpg)
“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
![Page 21: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/21.jpg)
MOBILE
WEBSITE,
WEB APP
OR NATIVE
APP?
Source: Gerry Alexis
![Page 22: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/22.jpg)
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
![Page 23: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/23.jpg)
So what one should
you create?
![Page 24: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/24.jpg)
MOBILE
CONTEXT
Source: Marie Kåstru
![Page 25: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/25.jpg)
The mobile context is somewhat varied…
![Page 26: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/26.jpg)
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
![Page 27: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/27.jpg)
SCREEN
SIZE
Source: www.flickr.com/photos/katerha/4592429363
![Page 28: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/28.jpg)
1024 x 768 as an agreed standard
![Page 29: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/29.jpg)
Mobile UX – Designing the Mobile User Experience
Losing that much screen space forces you to focus
![Page 30: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/30.jpg)
TOUCH
TARGETS
Source: www.flickr.com/photos/ogimogi/2223450729/sizes/l/in/photostream/
![Page 31: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/31.jpg)
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
![Page 32: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/32.jpg)
Microsoft touch guidelines
![Page 33: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/33.jpg)
TOUCH
GESTURES
Source: www.flickr.com/photos/7247517@N02/1503933726//
![Page 34: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/34.jpg)
Mobile UX – Designing the Mobile User Experience
Touch guidance
![Page 35: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/35.jpg)
Mobile UX – Designing the Mobile User Experience
Content over navigation
![Page 36: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/36.jpg)
PIXEL
DENSITY
Source: www.flickr.com/photos/randomguyweird/5412716286/
![Page 37: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/37.jpg)
Mobile UX – Designing the Mobile User Experience
Designing for iPhone 4's Retina Display
![Page 38: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/38.jpg)
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:
![Page 39: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/39.jpg)
Designing the mobile
User Experience
Mobile design considerations
Mobile prototyping
Responsive web design
Why care about mobile?
![Page 40: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/40.jpg)
RE- SPONSIVE WEB DESIGN (RWD)
_MOBILE UX
![Page 41: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/41.jpg)
“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
![Page 42: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/42.jpg)
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…
![Page 43: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/43.jpg)
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
![Page 44: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/44.jpg)
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
![Page 45: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/45.jpg)
Mobile UX – Designing the Mobile User Experience
What would
Jakob do?
(WWJD)
![Page 46: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/46.jpg)
“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
![Page 47: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/47.jpg)
Designing the mobile
User Experience
Mobile design considerations
Mobile prototyping
Responsive web design
Why care about mobile?
![Page 48: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/48.jpg)
MOBILE PROTOTYPING
_MOBILE UX
![Page 49: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/49.jpg)
“Do I need to change
to my design process?”
![Page 50: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/50.jpg)
“When the rubber hits
the road, what do I
need to do differently?”
![Page 51: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/51.jpg)
The User Experience Design Process
![Page 52: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/52.jpg)
“Designers new to
mobile don’t have
the domain specific
skills or heuristics
to lean on”
Rachel Hinman – Mobile Frontier, 2012
![Page 53: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/53.jpg)
ESSENTIAL Mobile Prototyping is
![Page 54: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/54.jpg)
PROTO-
TYPES ARE
DECISION
MAKING
AIDS
Source: www.flickr.com/photos/cannedtuna/6491204853/
![Page 55: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/55.jpg)
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
![Page 56: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/56.jpg)
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
![Page 57: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/57.jpg)
PROTO-
TYPING
METHODS
Source: www.flickr.com/photos/21218849@N03/2829366856/
![Page 58: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/58.jpg)
Source: www.netmagazine.com
Explore ideas
with low fidelity
sketching
![Page 59: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/59.jpg)
Source: Rachel Hinman – The Mobile Frontier
Validate
decisions with
paper
prototyping
![Page 60: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/60.jpg)
Source: m.clove.co.uk
On-device
prototyping has
significant
benefits
![Page 61: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/61.jpg)
Prototyping is no
substitute for creativity
and great ideas. Those
come from you.
![Page 62: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/62.jpg)
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
![Page 63: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/63.jpg)
Thank you [email protected]
![Page 64: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/64.jpg)
Any questions?
![Page 65: Designing the mobile user experience](https://reader033.vdocuments.mx/reader033/viewer/2022051613/54c769d14a79596c548b4624/html5/thumbnails/65.jpg)