31 July 2013
Putting Mobile First
Putting Mobile First
•  A Changing World
•  Where is the Opportunity?
•  Design Considerations
•  The Optimum Approach
•  ...
”
“The average smartphone user reaches to their
phone 150 times per DAY!
-Mary Meeker at #D11
A Changing World – The Mobil...
2013
Asia Pacific Europe North America Middle East and Africa Latin America
A Changing World – Users of Mobile by Region 2...
A Changing World – Operating System by Region
EuropeAustralia
June 2012 to May 2013
Asia
iOS Android SymbianOS Other
Sourc...
Mobile Marketing Strategy for Australia
A Changing World – Smartphone Operating System in Australia
2011 - 2012
Australia
iOS Android Windows OS SymbianOS Other
S...
A Changing World – The Surge Towards Tablet
GlobalUnitsShipped(MMs)
Global PC (Desktop / Notebook) and Tablet Shipments by...
”
“Australians are ahead in the mobile space.
What we’re seeing is retailers who haven’t
been part of the e-commerce space...
So What?
•  Loads of mobile devices
•  Mostly using iOS
•  However smartphone market is predominantly Android (not iOS)
• ...
Optimising Mobile
•  A Changing World
•  Where is the Opportunity?
•  Design Considerations
•  The Optimum Approach
•  Mak...
Where is the Opportunity?
Take the time to
understand your user’s
needs, behaviour and
context.
Opportunity Section
Where is the Opportunity? – Mobile User Scenarios
Areyoudoingenough?Whatcouldbedonebetter?
Visualize
goalsandtasks:
•  Per...
Allanah’s Story
Alannah  views  video  content  from  
students  and  alumni  who  studied  some  
of  the  units  she  is...
Where is the Opportunity? - Mathew Algie - Ethical Coffee Campaign
Where is the Opportunity?
“How do we know that
people are going to
actually use it?”
Where is the Opportunity? – The art of persuasion
Threemainfactorstoencouragebehaviour
2.Ability
“Whatresourcesare
require...
Where is the Opportunity? – The Fogg Behaviour Model
Ability
Motivation
Triggers
Succeed Here
Triggers
Fail Here
High
Moti...
Putting Mobile First
•  A Changing World
•  Where is the Opportunity?
•  Design Considerations
•  The Optimum Approach
•  ...
Design Considerations – Multi Screen Patterns
•  Coherence
•  Synchronisation
•  Deviceshifting
•  Complementarity
•  Simu...
Coherence
Coherence-Example
Synchronisation
Synchronisation-Example
DeviceShifting
DeviceShifting-Example
Complementarity
Complementarity-Example
Simultaneity
Complementarity-Example
”
“Effective mobile designs not only account for
these one thumb/one eyeball experiences but
aim to optimize for them as w...
Design Considerations – Common Language
Design Considerations – Hit Areas
Design Considerations - Images
Recognition
Putting a picture to either a person or a
place:
‘Meet Bob the new council memb...
Design Considerations - Reach
Right hand
Easy
Average
Hard
Left hand
Easy
Average
Hard
Putting Mobile First
•  A Changing World
•  Where is the Opportunity?
•  Design Considerations
•  The Optimum Approach
•  ...
What Are My Options?
Mobi	
  
Responsive	
  
Hybrid	
  Apps	
  
Native	
   Framework	
   Web	
  App	
  
Feed	
  Aggregator...
The Optimum Approach - mobi
The Optimum Approach - mobi
The Optimum Approach - mobi
What it’s good for:
•  Providing focus and clear
structure
•  Deploying without impact on
main...
The Optimum Approach - Responsive
The Optimum Approach - Responsive
What it’s good for:
•  Reflows the same content
from the website
•  Content is presented...
”
“It's cheap but degrading to reuse content and
design across diverging media forms like
print vs. online or desktop vs. ...
The Optimum Approach – Hybrid Apps
The Optimum Approach – Example
The Optimum Approach - Frameworks
The Optimum Approach - Frameworks
What it’s good for:
•  Lets you develop once and
deploy many
•  Cross device support wid...
The Optimum Approach – Native Apps
•  The Optimum Approach – Native Apps
•  The Optimum Approach – iButterfly
The Optimum Approach - Native
What it’s good for:
•  Provides a rich interface
•  Uses the full phone feature set
•  Desig...
The Optimum Approach - Feeds
Optimising Mobile
•  A Changing World
•  Where is the Opportunity?
•  Design Considerations
•  The Optimum Approach
•  Mak...
Making It Happen - Content
From the ground up
(mobile first):
•  Custom approaches
•  Considered context
•  Specific conte...
Making It Happen – Content: Mobile First
Making It Happen – Content: Adapting content
”
“What about performance?
Won’t a lot of images slow down the mobile
experience?
”
“Users are sympathetic to poor network
coverage and adjust their expectations when
WIFI isn’t available.
”
“Users are not sympathetic to poor network
coverage and adjust their expectations when
WIFI isn’t available.
Making It Happen – Data Integration – 4 Key points
1.  Ensure your existing web API does not bundle unnecessary data
with ...
mobitest.akamai.com
”
“The more channels I run,
the more resource I’ll need, right?
Making It Happen – Resource and Process
Making It Happen – Resource and Process
Optimising Mobile
•  A Changing World
•  Where is the Opportunity?
•  Design Considerations
•  The Optimum Approach
•  Mak...
”
“If you want the Internet to be everywhere it
has to be visible nowhere. It has to be unseen,
unnoticed, undiscussed.
Da...
Considering the future – Password fatigue
•  “The FIDO Alliance, a consortium that includes PayPal, is pushing
an open-sou...
 
	
  
	
  
Considering the future - Wearable tech
Putting Mobile First - July 2013
Putting Mobile First - July 2013
Putting Mobile First - July 2013
Putting Mobile First - July 2013
Putting Mobile First - July 2013
Putting Mobile First - July 2013
Putting Mobile First - July 2013
Putting Mobile First - July 2013
Putting Mobile First - July 2013
Putting Mobile First - July 2013
Putting Mobile First - July 2013
Putting Mobile First - July 2013
Putting Mobile First - July 2013
Putting Mobile First - July 2013
Upcoming SlideShare
Loading in …5
×

Putting Mobile First - July 2013

252 views
160 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
252
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Putting Mobile First - July 2013

  1. 1. 31 July 2013 Putting Mobile First
  2. 2. Putting Mobile First •  A Changing World •  Where is the Opportunity? •  Design Considerations •  The Optimum Approach •  Making It Happen •  Considering The Future
  3. 3. ” “The average smartphone user reaches to their phone 150 times per DAY! -Mary Meeker at #D11 A Changing World – The Mobile Take-Over
  4. 4. 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
  5. 5. 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/
  6. 6. Mobile Marketing Strategy for Australia
  7. 7. A Changing World – Smartphone Operating System in Australia 2011 - 2012 Australia iOS Android Windows OS SymbianOS Other Source:ACMA Communicationsreport2011–12
  8. 8. 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
  9. 9. ” “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?
  10. 10. 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…
  11. 11. Optimising Mobile •  A Changing World •  Where is the Opportunity? •  Design Considerations •  The Optimum Approach •  Making It Happen •  Considering The Future
  12. 12. Where is the Opportunity? Take the time to understand your user’s needs, behaviour and context.
  13. 13. Opportunity Section
  14. 14. Where is the Opportunity? – Mobile User Scenarios Areyoudoingenough?Whatcouldbedonebetter? Visualize goalsandtasks: •  Personas •  Scenarios Test assumptions: •  Contextualinquiry •  Focusgroupsand interviews Identify assumptions: •  Whatdoyourusers need? •  Whatdoyourusersdo?
  15. 15. 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    
  16. 16. Where is the Opportunity? - Mathew Algie - Ethical Coffee Campaign
  17. 17. Where is the Opportunity? “How do we know that people are going to actually use it?”
  18. 18. 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?”
  19. 19. 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
  20. 20. Putting Mobile First •  A Changing World •  Where is the Opportunity? •  Design Considerations •  The Optimum Approach •  Making It Happen •  Considering The Future
  21. 21. Design Considerations – Multi Screen Patterns •  Coherence •  Synchronisation •  Deviceshifting •  Complementarity •  Simultaneity
  22. 22. Coherence
  23. 23. Coherence-Example
  24. 24. Synchronisation
  25. 25. Synchronisation-Example
  26. 26. DeviceShifting
  27. 27. DeviceShifting-Example
  28. 28. Complementarity
  29. 29. Complementarity-Example
  30. 30. Simultaneity
  31. 31. Complementarity-Example
  32. 32. ” “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
  33. 33. Design Considerations – Common Language
  34. 34. Design Considerations – Hit Areas
  35. 35. 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!’
  36. 36. Design Considerations - Reach Right hand Easy Average Hard Left hand Easy Average Hard
  37. 37. Putting Mobile First •  A Changing World •  Where is the Opportunity? •  Design Considerations •  The Optimum Approach •  Making It Happen •  Considering The Future
  38. 38. What Are My Options? Mobi   Responsive   Hybrid  Apps   Native   Framework   Web  App   Feed  Aggregators  
  39. 39. The Optimum Approach - mobi
  40. 40. The Optimum Approach - mobi
  41. 41. 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
  42. 42. The Optimum Approach - Responsive
  43. 43. 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
  44. 44. ” “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
  45. 45. The Optimum Approach – Hybrid Apps
  46. 46. The Optimum Approach – Example
  47. 47. The Optimum Approach - Frameworks
  48. 48. 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.
  49. 49. The Optimum Approach – Native Apps
  50. 50. •  The Optimum Approach – Native Apps
  51. 51. •  The Optimum Approach – iButterfly
  52. 52. 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
  53. 53. The Optimum Approach - Feeds
  54. 54. Optimising Mobile •  A Changing World •  Where is the Opportunity? •  Design Considerations •  The Optimum Approach •  Making It Happen •  Considering The Future
  55. 55. 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
  56. 56. Making It Happen – Content: Mobile First
  57. 57. Making It Happen – Content: Adapting content
  58. 58. ” “What about performance? Won’t a lot of images slow down the mobile experience?
  59. 59. ” “Users are sympathetic to poor network coverage and adjust their expectations when WIFI isn’t available.
  60. 60. ” “Users are not sympathetic to poor network coverage and adjust their expectations when WIFI isn’t available.
  61. 61. 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
  62. 62. mobitest.akamai.com
  63. 63. ” “The more channels I run, the more resource I’ll need, right? Making It Happen – Resource and Process
  64. 64. Making It Happen – Resource and Process
  65. 65. Optimising Mobile •  A Changing World •  Where is the Opportunity? •  Design Considerations •  The Optimum Approach •  Making It Happen •  Considering The Future
  66. 66. ” “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)
  67. 67. 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.”
  68. 68.      
  69. 69. Considering the future - Wearable tech

×