The document discusses strategies for putting mobile first in design and development. It covers analyzing the changing mobile landscape, identifying opportunities, design considerations, and approaches. Key points include: - Smartphone and tablet usage is surging globally and replacing desktops in many regions. Mobile operating systems are dominated by Android and iOS. - Understanding user needs, behaviors, and contexts through research is important to identify opportunities. Motivation, ability, and triggers influence user actions. - Effective mobile design considers factors like screen size, reach, and usage contexts like one-handed use. Images should prioritize recognition over description. - Responsive, hybrid, and native apps each have pros and cons depending on needs like functionality

1. 31 July 2013
Putting Mobile First

2. Putting Mobile First
• A Changing World
• Where is the Opportunity?
• Design Considerations
• The Optimum Approach
• Making It Happen
• Considering The Future

3. ”
“The average smartphone user reaches to their
phone 150 times per DAY!
-Mary Meeker at #D11
A Changing World – The Mobile Take-Over

7. 2013
Asia Pacific Europe North America Middle East and Africa Latin America
A Changing World – Users of Mobile by Region 2012 - 2017
2012
Source:PortioResearch
2017

8. A Changing World – Operating System by Region
EuropeAustralia
June 2012 to May 2013
Asia
iOS Android SymbianOS Other
Source: StatCounter–GlobalStatCounter-http://gs.statcounter.com/

9. Mobile Marketing Strategy for Australia

10. A Changing World – Smartphone Operating System in Australia
2011 - 2012
Australia
iOS Android Windows OS SymbianOS Other
Source:ACMA Communicationsreport2011–12

11. A Changing World – The Surge Towards Tablet
GlobalUnitsShipped(MMs)
Global PC (Desktop / Notebook) and Tablet Shipments by Quarter (Q1: 1995 - Q1: 2013)
Source:KatyHuberty,EhudGelblum,MorganStanleyResearch.Gartner.Dataasof4/13. Note:NotebookPCsincludeNetbooks

12. ”
“Australians are ahead in the mobile space.
What we’re seeing is retailers who haven’t
been part of the e-commerce space are
leapfrogging to having a mobile store first
instead of setting up an e-commerce site
Is Australia Already Ahead of the Curve?

13. So What?
• Loads of mobile devices
• Mostly using iOS
• However smartphone market is predominantly Android (not iOS)
• Tablet on the rise globally
• If you are not ahead of the curve look to the next…

14. Optimising Mobile
• A Changing World
• Where is the Opportunity?
• Design Considerations
• The Optimum Approach
• Making It Happen
• Considering The Future

15. Where is the Opportunity?
Take the time to
understand your user’s
needs, behaviour and
context.

16. Opportunity Section

19. Where is the Opportunity? – Mobile User Scenarios
Areyoudoingenough?Whatcouldbedonebetter?
Visualize
goalsandtasks:
• Personas
• Scenarios
Test
assumptions:
• Contextualinquiry
• Focusgroupsand
interviews
Identify
assumptions:
• Whatdoyourusers
need?
• Whatdoyourusersdo?

20. Allanah’s Story
Alannah views video content from
students and alumni who studied some
of the units she is interested in
Alannah selects her preferences and
submits them
She receives a Facebook notification to
confirm her selection and that she can
update her timetable
That evening
Alannah updates
her timetable and
shares it with
some of her
friends

22. Where is the Opportunity? - Mathew Algie - Ethical Coffee Campaign

23. Where is the Opportunity?
“How do we know that
people are going to
actually use it?”

25. Where is the Opportunity? – The art of persuasion
Threemainfactorstoencouragebehaviour
2.Ability
“Whatresourcesare
required?”
“DoIhavethose
resources?”
“Isitworthit?”
3.Triggers
“ShouldIactnow?”
“CanIactlater?"
1.Motivation
“Howimportantisthis
outcometome?”
“Willthishelpmegetto
whereIwanttogonext?”

26. Where is the Opportunity? – The Fogg Behaviour Model
Ability
Motivation
Triggers
Succeed Here
Triggers
Fail Here
High
Motivation
Low
Motivation
Hard To Do Easy To Do

29. Putting Mobile First
• A Changing World
• Where is the Opportunity?
• Design Considerations
• The Optimum Approach
• Making It Happen
• Considering The Future

30. Design Considerations – Multi Screen Patterns
• Coherence
• Synchronisation
• Deviceshifting
• Complementarity
• Simultaneity

31. Coherence

32. Coherence-Example

33. Synchronisation

34. Synchronisation-Example

35. DeviceShifting

36. DeviceShifting-Example

37. Complementarity

38. Complementarity-Example

39. Simultaneity

40. Complementarity-Example

41. ”
“Effective mobile designs not only account for
these one thumb/one eyeball experiences but
aim to optimize for them as well.
Luke Wroblewski – Mobile First

42. Design Considerations – Common Language

43. Design Considerations – Hit Areas

44. Design Considerations - Images
Recognition
Putting a picture to either a person or a
place:
‘Meet Bob the new council member
for your area’
Or
‘Drop by the new office on Flinders
Lane’
Description
Where a specific item is better
described visually:
‘We will be rolling out new wheely
bins to replace our old ones, they
will look like this:’
Or
‘Our new Series 125fx is the fastest
widget on the market and comes in
orange!’

45. Design Considerations - Reach
Right hand
Easy
Average
Hard
Left hand
Easy
Average
Hard

47. Putting Mobile First
• A Changing World
• Where is the Opportunity?
• Design Considerations
• The Optimum Approach
• Making It Happen
• Considering The Future

48. What Are My Options?
Mobi
Responsive
Hybrid
Apps
Native
Framework
Web
App
Feed
Aggregators

49. The Optimum Approach - mobi

50. The Optimum Approach - mobi

51. The Optimum Approach - mobi
What it’s good for:
• Providing focus and clear
structure
• Deploying without impact on
main website
• Delivering quickly
• Wide reach working via browser
• Can be designed to understand
and respond to screen size or
orientation
Considerations:
• Careful consideration to
content impacting
performance.
• Keep the design simple and
effective
• You need to design for tablet
and phone to maximise
experience.
• Links to m. or mobi domain
name

52. The Optimum Approach - Responsive

53. The Optimum Approach - Responsive
What it’s good for:
• Reflows the same content
from the website
• Content is presented on all
devices and screen sizes.
• Architecture of the site
remaining the same
• Single update of content
Considerations:
• Cannot apply a different tone
of voice for mobile usage.
• Experience not built around
the user or context
• Requires to think in % and not
fixed width
• Supported screen size has to
be chosen

54. ”
“It's cheap but degrading to reuse content and
design across diverging media forms like
print vs. online or desktop vs. mobile.
Superior UX requires tight platform
integration.
Jakob Neilsen – 21st May 2012

55. The Optimum Approach – Hybrid Apps

56. The Optimum Approach – Example

57. The Optimum Approach - Frameworks

58. The Optimum Approach - Frameworks
What it’s good for:
• Lets you develop once and
deploy many
• Cross device support widening
reach
• A balance between rich design
and reach
• Simplifying the interface whilst
enabling functionality
• Deployment via app stores
Considerations:
• Will not be a rich interface
• Restricted in functions
• Balance between features and
reach
• Typically uses HTML5 and
JavaScript.

59. The Optimum Approach – Native Apps

60. • The Optimum Approach – Native Apps

61. • The Optimum Approach – iButterfly

63. The Optimum Approach - Native
What it’s good for:
• Provides a rich interface
• Uses the full phone feature set
• Designed around the user
• Optimal performance
• Provides joy of use
• Can differentiate your brand
Considerations:
• Needs to be developed for
each device type
• Designs typically can be shared
• Data is a key consideration for
unconnected use

64. The Optimum Approach - Feeds

65. Optimising Mobile
• A Changing World
• Where is the Opportunity?
• Design Considerations
• The Optimum Approach
• Making It Happen
• Considering The Future

66. Making It Happen - Content
From the ground up
(mobile first):
• Custom approaches
• Considered context
• Specific content
From pre-existing
(elegant degradation):
• Desktop applied to mobile
• Stress / break points
• Reworked content

67. Making It Happen – Content: Mobile First

68. Making It Happen – Content: Adapting content

69. ”
“What about performance?
Won’t a lot of images slow down the mobile
experience?

70. ”
“Users are sympathetic to poor network
coverage and adjust their expectations when
WIFI isn’t available.

71. ”
“Users are not sympathetic to poor network
coverage and adjust their expectations when
WIFI isn’t available.

72. Making It Happen – Data Integration – 4 Key points
1. Ensure your existing web API does not bundle unnecessary data
with requests for data
2. Expand your API to deal with short, quick requests and hook it
into your CMS solution as soon as possible
3. Front End Optimisation (FEO) is vital. Use mobile optimisation
and analytics tools to see where your delivery speeds can be
improved
4. Track user interaction in your app using an analytics tool

73. mobitest.akamai.com

75. ”
“The more channels I run,
the more resource I’ll need, right?
Making It Happen – Resource and Process

76. Making It Happen – Resource and Process

78. Optimising Mobile
• A Changing World
• Where is the Opportunity?
• Design Considerations
• The Optimum Approach
• Making It Happen
• Considering The Future

79. ”
“If you want the Internet to be everywhere it
has to be visible nowhere. It has to be unseen,
unnoticed, undiscussed.
David St. Charles - Integrated Systems Inc. (Wired 1996)

80. Considering the future – Password fatigue
• “The FIDO Alliance, a consortium that includes PayPal, is pushing
an open-source system in which, for instance, websites would ask
smartphone users to identify themselves by placing their
fingertips on their touchscreens.”
• “In Washington, the US Patent and Trademark Office has recently
published several patent applications from Apple that envision
facial recognition and fingerprint scanning.”

82. Considering the future - Wearable tech