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.

1. _MOBILE UX
DESIGNING
THE
MOBILE
USER
EXPERIENCE
Mark Delaney
User Experience Designer / 5 September 2012

3. Designing the mobile
User Experience
Why care about mobile?
Mobile design considerations
Responsive web design
Mobile prototyping

4. _MOBILE UX
WHY
CARE
ABOUT
MOBILE?

5. IN A
WORLD OF
THEIR
MOBILE
DEVICES
Source: Kathy Slamen Photography

6. Mobile is growing
like crazy.

7. PC vs. Smartphone Sales
Source: http://bkaprt.com/mf/4
Mobile UX – Designing the Mobile User Experience

8. “Mobile phones
will overtake PC’s
as the most
common web
access devices
by 2013”
Gartner Research, 2010

9. UNDER-
STANDING
THE
MOBILE
CON-
SUMER

10. Smartphones are always
with you
73%
OF PEOPLE SURVEYED
Say they don’t leave
their home without
their device
Google: Our Mobile Planet, May 2012

11. Home
97%
On the go
Work 80%
76%
In a store 64%
used everywhere
Smartphones are
Café or coffee shop
64%
Restaurant
56%
At a social gathering
56%
Airport
55%
Public transport
44%
Doctor
35%
School
24%
Google: Our Mobile Planet, May 2012

12. Allowing users to stay
connected
59%
Emailing 51%
Social Networking 45%
Search 41%
ACCESS THE INTERNET
On their smartphones Video 24%
at least once a day
Google: Our Mobile Planet, May 2012

13. Smartphones have become so
important that…
24%
WOULD RATHER GIVE
UP TV THAN THEIR
smartphone
Google: Our Mobile Planet, May 2012

14. Major access point
for search
38%
SEARCH ON THEIR
SMARTPHONES
every day
Google: Our Mobile Planet, May 2012

15. Smartphones
are used while
multi-tasking
with other
media
Google: Our Mobile Planet, May 2012

16. Designing the mobile
User Experience
Why care about mobile?
Mobile design considerations
Responsive web design
Mobile prototyping essentials

17. _MOBILE UX
MOBILE
DESIGN
CONSIDER-
ATIONS

18. MOBILE
FIRST
Source: www.flickr.com/photos/pete-karl/4637024524

19. Designing for mobile first
3 reasons to consider mobile first approach
■ Mobile is exploding
Today's smartphones are driving huge use of
networked applications and Web content.
■ Mobile forces you to focus
There simply isn't room in a 320 by 480 pixel
screen for extraneous, unnecessary elements. You
have to prioritise.
■ Mobile extends your capabilities
Allows you to deliver innovative experiences by
building on new capabilities native to mobile
devices and modes of use
Mobile UX – Designing the Mobile User Experience

20. “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

21. MOBILE
WEBSITE,
WEB APP
OR NATIVE
APP?
Source: Gerry Alexis

22. What are the differences?
In case you were wondering…
■ Mobile optimised website
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
Mobile UX – Designing the Mobile User Experience

23. So what one should
you create?

24. MOBILE
CONTEXT
Source: Marie Kåstru

25. The mobile context is somewhat varied…

26. Design for partial attention
and interruption
“One thumb, one eyeball”
■ Expectation of engagement
Immersive isn’t always desirable
■ Multi-tasking and task switching
People are motivated to be productive and efficient
■ Human constraints
Varied concentration spans caused by social settings,
and ergonomic limitations of mobile devices
Mobile UX – Designing the Mobile User Experience

27. SCREEN
SIZE
Source: www.flickr.com/photos/katerha/4592429363

28. 1024 x 768 as an agreed standard

29. Losing that
much screen
space forces
you to focus
Mobile UX – Designing the Mobile User Experience

30. TOUCH
TARGETS
Source: www.flickr.com/photos/ogimogi/2223450729/sizes/l/in/photostream/

31. Finger-friendly design
Go small by going big
■ Small touch targets lead to big problems
Small touch targets make users work harder because
they require more accuracy to hit
■ Pixel width of the average index finger
The average width of the index finger is 1.1 to 2
cm (11 – 20 mm) for most adults
■ Finger-sized is ideal, but not always practical
Finger-sized targets are much easier to apply on a
tablet than a mobile device because there is more
screen space available
Mobile UX – Designing the Mobile User Experience

32. Microsoft
touch
guidelines

33. TOUCH
GESTURES
Source: www.flickr.com/photos/7247517@N02/1503933726//

34. Touch guidance
Mobile UX – Designing the Mobile User Experience

35. Content over navigation
Mobile UX – Designing the Mobile User Experience

36. PIXEL
DENSITY
Source: www.flickr.com/photos/randomguyweird/5412716286/

37. Designing
for iPhone
4's Retina
Display
Mobile UX – Designing the Mobile User Experience

38. Guidelines for scaling
to pixel density
Avoid the following:
■ Don't use smaller images that are scaled up
Images are scaled by default, images look blurry at
140% scale on HD
■ Don’t use larger images that are scaled down
Larger images that are scaled down can show
scaling distortion and jagged edges
■ Avoid specifying sizes that aren't multiples
of 5px
Units that aren't multiples of 5px can experience
pixel shifting when scaled to 140% and 180%.
Mobile UX – Designing the Mobile User Experience

39. Designing the mobile
User Experience
Why care about mobile?
Mobile design considerations
Responsive web design
Mobile prototyping

40. _MOBILE UX
RE-
SPONSIVE
WEB
DESIGN
(RWD)

41. “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

42. Becoming responsive
The ingredients…
■ 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
Mobile UX – Designing the Mobile User Experience

43. Responsive Web Design
principles
Desktop Tablet Smartphone
Header Header Header
Sidebar 2
Sidebar 1
Sidebar 1
Content Content Content
Sidebar 2 Sidebar 1
Sidebar 2
Mobile UX – Designing the Mobile User Experience

44. Responsive Web Design
IS RWD
principles
REALLY THE
RIGHT
ANSWER?
Mobile UX – Designing the Mobile User Experience Source: www.flickr.com/photos/rohit_saxena/4873732679

45. What would
Jakob do?
(WWJD)
Mobile UX – Designing the Mobile User Experience

46. “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

47. Designing the mobile
User Experience
Why care about mobile?
Mobile design considerations
Responsive web design
Mobile prototyping

48. _MOBILE UX
MOBILE
PROTOTYPING

49. “Do I need to change
to my design process?”

50. “When the rubber hits
the road, what do I
need to do differently?”

51. The User Experience
Design Process

52. “Designers new to
mobile don’t have
the domain specific
skills or heuristics
to lean on”
Rachel Hinman – Mobile Frontier, 2012

53. Mobile Prototyping is
ESSENTIAL

54. PROTO-
TYPES ARE
DECISION
MAKING
AIDS
Source: www.flickr.com/photos/cannedtuna/6491204853/

55. Prototyping
Key reasons to include 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
Mobile UX – Designing the Mobile User Experience

56. 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
Mobile UX – Designing the Mobile User Experience

57. PROTO-
TYPING
METHODS
Source: www.flickr.com/photos/21218849@N03/2829366856/

58. Explore ideas
with low fidelity
sketching
Source: www.netmagazine.com

59. Validate
decisions with
paper
prototyping
Source: Rachel Hinman – The Mobile Frontier

60. On-device
prototyping has
significant
benefits
Source: m.clove.co.uk

61. Prototyping is no
substitute for creativity
and great ideas. Those
come from you.

62. Designing the mobile UX
Considerations, tips and techniques
■ The mobile web is different ■ Optimise for file size and memory
A shift from the static environment of the PC Less is more
■ Design for humans ■ Pixel sizes will likely vary
Understand the varied context of use As will pixel density on many devices
■ Consider mobile first ■ Is a ‘Responsive’ Design suitable?
It pays to explore the mobile first approach Base this on ROI
■ Native app, web app or hybrid? ■ Do research and prototypes
What is the most appropriate for you Understand your users and the experience
■ Define constraints ■ Get something on a device asap
Understand the limitations – e.g. screen size Solve design problems in context
Mobile UX – Designing the Mobile User Experience

63. Thank you
mark.delaney@intergen.co.nz

64. Any questions?