SlideShare uma empresa Scribd logo
1 de 71
Putting Mobile First
November 27, 2013

Lindsay Herbert
Head of Digital
@precedent#@lindzeiy
@precedent#@lindzeiy
@precedent#@lindzeiy
EDINBURGH

PERTH

LONDON

MELBOURNE

CARDIFF

HONG KONG

@precedent#@lindzeiy
135

experts
Strategy & research
Branding & communications
User-centred design
Development & hosting
Digital marketing

@precedent#@lindzeiy
24 Years
Experience
Quality
Stability
Loyalty
Results

@precedent#@lindzeiy
Who we work with

@precedent#@lindzeiy
@precedent#@lindzeiy
Mobile whitepaper series

1. Optimising Mobile
2. Targeting Mobile

@precedent#@lindzeiy

3.
Putting Mobile First
1. A Changing World
2. What Are My Options?
3. Design Considerations
4. Choosing the Optimum Approach

5. Making It Happen
6. Considering The Future

@precedent#@lindzeiy
A Changing World – What do your customers use?

Windows

Blackberry

Android
iOS
Smart TV

@precedent#@lindzeiy
A Changing World – Mobile operating system by region
June 2012 to May 2013

Australia

Asia

iOS

Europe

Android

SymbianOS

Other

Source: Stat Counter – Global Stat Counter - http://gs.statcounter.com/

@precedent#@lindzeiy
A Changing World – Constantly evolving landscape

@precedent#@lindzeiy
A Changing World – Google I/O

@precedent @lindzeiy
A Changing World – Tablets

@precedent#@lindzeiy
A Changing World – The surge towards tablets

Global Units Shipped (MMs)

Global PC (Desktop / Notebook) and Tablet Shipments by Quarter (Q1: 1995 - Q1: 2013)

Source: Katy Huberty, Ehud Gelblum, Morgan Stanley Research. Gartner. Data as of 4/13.

@precedent#@lindzeiy

Note: Notebook PCs include Net books
A Changing World – Affordable tablets

@precedent#@lindzeiy
Putting Mobile First
1. A Changing World
2. What Are My Options?
3. Design Considerations
4. Choosing the Optimum Approach

5. Making It Happen
6. Considering The Future

@precedent#@lindzeiy
What Are My Options?

Take the time to understand
your user’s behaviour and context.

@precedent#@lindzeiy
@precedent#@lindzeiy
What Are My Options? Remember a Mobile User…
1. Typically has short bursts of activity
2.

Can be time poor or network restricted

3.

Is usually goal driven

4.

Loves using her phone - joy of use, personal item

5.

Tells others of a good experience

6.

Needs a simple uncomplicated experience

@precedent#@lindzeiy
What Are My Options?

Take the opportunity to innovate
in design and function.

@precedent#@lindzeiy
What Are My Options?

Don’t just follow the web

@precedent#@lindzeiy
What Are My Options? 4(ish) choices

Mobi

Responsive
Feeds
Apps

Native

@precedent#@lindzeiy

Hybrid
What Are My Options? – Roll It: App or Web?

@precedent#@lindzeiy
Putting Mobile First
1. A Changing World
2. What Are My Options?
3. Design Considerations
4. Choosing the Optimum Approach

5. Making It Happen
6. Considering The Future

@precedent#@lindzeiy
Design Considerations

‘ 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

@precedent#@lindzeiy
Design Considerations – Hit Areas

@precedent @lindzeiy
Design Considerations – Hit Areas
User interface control sizes:
Apple = 44px
Windows = 9mm
Nokia = between 7 and 8mm

The average finger pad is 10-14mm with the
fingertip being 8-10mm

@precedent @lindzeiy
Design Considerations – Common Language

Use existing visual shortcuts for
essential operations:
Hamburger icon = menu

Circular arrow = refresh
Magnifying glass = search
Cog = settings

Thumb = like

@precedent#@lindzeiy
Design Considerations - Reach

Hard
Easy

Average

Left hand

@precedent#@lindzeiy

Hard
Easy

Average

Right hand
Design Considerations - Reach

Hard: Things you don’t
want to hit by mistake

Hard
Easy

Hard
Easy

Easy: Things that require
the most scrolling
Average: Where the
thumb naturally hovers

Average

Left hand

@precedent#@lindzeiy

Average

Right hand
Putting Mobile First
1. A Changing World
2. What Are My Options?
3. Design Considerations
4. Choosing the Optimum Approach

5. Making It Happen
6. Considering The Future

@precedent#@lindzeiy
Choosing the Optimum Approach - mobi

@precedent#@lindzeiy
Choosing 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 respond to screen
size or orientation

@precedent#@lindzeiy
Choosing the Optimum Approach - mobi

Drawbacks:
– Can’t access device functions (e.g.
internal storage)
– Offline functions limited to HTML5
caching
– User interface needs to be more
simplistic
– Slower than a native or hybrid app

@precedent#@lindzeiy
Choosing the Optimum Approach - Responsive

@precedent#@lindzeiy
Choosing the Optimum Approach - Responsive

What it’s good for:
– You only have to write the
content once
– Easy updates and
maintenance
– Experience stays consistent
for users across all devices
and platforms

@precedent#@lindzeiy
Choosing the Optimum Approach - Responsive

Drawbacks:
– One-size fits all means
you can’t cater as well
for different user
behaviours and contexts
– The same drawbacks for
mobi also apply here

@precedent#@lindzeiy
Choosing the Optimum Approach - Responsive

‘ 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

@precedent#@lindzeiy
Choosing the Optimum Approach - Responsive

@precedent#@lindzeiy
Choosing the Optimum Approach – Hybrid Apps

@precedent#@lindzeiy
Choosing the Optimum Approach – Hybrid Apps

What it’s good for:
– Lets you develop once to
many devices
– Can access some device
features like internal storage
– Better offline use (thanks to
internal storage access)

@precedent#@lindzeiy
Choosing the Optimum Approach – Hybrid Apps

Drawbacks:
– Not as a fast as a native app

– Can’t access all device
functions
– Has to be downloaded from
app stores

– Will not be a rich interface

@precedent#@lindzeiy
Choosing the Optimum Approach – Hybrid Apps

@precedent#@lindzeiy
Choosing the Optimum Approach – Native Apps

@precedent#@lindzeiy
Choosing the Optimum Approach – Native Apps

What it’s good for:
– Fastest speeds

– Richest possible user interface
– Can access every feature of the
device
– Best offline usage

@precedent#@lindzeiy
Choosing the Optimum Approach – Native Apps

Drawbacks:
– Needs to be developed for each
device type
– Data is a key consideration for
unconnected use
– Updates need to be rolled out for
each type
– Developing for each device type
quickly adds to costs

@precedent#@lindzeiy
Choosing the Optimum Approach – Feeds

@precedent#@lindzeiy
Choosing the Optimum Approach – Feeds

@precedent#@lindzeiy
Choosing the Optimum Approach – Your priorities?
Device features

Native first, then Hybrid

Offline functioning

Native first, then Hybrid

Speed

Native (learn from Facebook)

User interface

Native

Maintenance

Web or Hybrid

Platform independence

Web or Hybrid

Development cost

Web or Hybrid

Discoverability

Web

Installation

Web

Content restrictions, approval
process and fees

Web (learn from Playboy)

@precedent#@lindzeiy
Putting Mobile First
1. A Changing World
2. What Are My Options?
3. Design Considerations
4. Choosing the Optimum Approach

5. Making It Happen
6. Considering The Future

@precedent#@lindzeiy
Making It Happen – Mobile First approach

@precedent#@lindzeiy
Making It Happen – Adapting content

@precedent#@lindzeiy
Making It Happen – Adapting content

Don’t just follow the web

@precedent#@lindzeiy
Making It Happen – UI Flow

@precedent#@lindzeiy
@precedent#@lindzeiy
Making It Happen – Resource and Process

‘ The more channels I run, the more
resource I’ll need, right?

’
@precedent#@lindzeiy
Making It Happen – Resource and Process

@precedent @lindzeiy
Putting Mobile First
1. A Changing World
2. What Are My Options?
3. Design Considerations
4. Choosing the Optimum Approach

5. Making It Happen
6. Considering The Future

@precedent#@lindzeiy
Considering The Future – Remember it’s a Phone!

@precedent#@lindzeiy
@precedent#@lindzeiy
Considering The Future – PrecEvents Out of the Box!

@precedent#@lindzeiy
Considering The Future – PrecEvents Out of the Box!

@precedent#@lindzeiy
Considering The Future – Customer journeys with Sitecore

www.sitecore.net
Considering The Future – Sitecore engagement platform

www.sitecore.net
Considering The Future – Trends for 2014
–

Connected devices

–

Mobile payments and e-wallet

–

Mobile advancement - wearable devices (NFC)

–

Lounge computing - socially integrated TV

–

Move towards social business

–

Smart content with personalisation & aggregation

–

Self service applications

@precedent#@lindzeiy
Considering The Future – Finally…

Don’t disappoint

Don’t be afraid to innovate
Don’t delay in providing a solution

(think-apply-review-refine)

@precedent#@lindzeiy
Considering The Future – Finally…

Think big.

Start small.
Act Quickly.

Smart thinking wins…

@precedent#@lindzeiy
@precedent#@lindzeiy
Follow Precedent on LinkedIn
to find out more about our
seminars and ideas, and add
me to keep in touch.

Follow @Precedentcomms on
Twitter to see what we think is
interesting in digital, and follow
me for updates from my blog.
@lindzeiy on Twitter

Mais conteúdo relacionado

Mais procurados

Tablet p4
Tablet p4Tablet p4
Tablet p4
trav73
 
How to build an awesome mobile APP
How to build an awesome mobile APPHow to build an awesome mobile APP
How to build an awesome mobile APP
BSP Media Group
 
Beyond Branding SharePoint - SharePoint and Today's Web
Beyond Branding SharePoint - SharePoint and Today's WebBeyond Branding SharePoint - SharePoint and Today's Web
Beyond Branding SharePoint - SharePoint and Today's Web
Eric Overfield
 

Mais procurados (18)

Mobile first - one key important aspect in digitalisation
Mobile first - one key important aspect in digitalisationMobile first - one key important aspect in digitalisation
Mobile first - one key important aspect in digitalisation
 
Sugsa mobile ux_april 2013
Sugsa mobile ux_april 2013Sugsa mobile ux_april 2013
Sugsa mobile ux_april 2013
 
Mobile Apps for Businesses
Mobile Apps for BusinessesMobile Apps for Businesses
Mobile Apps for Businesses
 
Tablet p4
Tablet p4Tablet p4
Tablet p4
 
Your Guide to a Modern Mobile-First Web Strategy
Your Guide to a Modern Mobile-First Web StrategyYour Guide to a Modern Mobile-First Web Strategy
Your Guide to a Modern Mobile-First Web Strategy
 
How to build an awesome mobile APP
How to build an awesome mobile APPHow to build an awesome mobile APP
How to build an awesome mobile APP
 
#MobileInAction - iRecruitExpo June 2013, Amsterdam
#MobileInAction - iRecruitExpo June 2013, Amsterdam#MobileInAction - iRecruitExpo June 2013, Amsterdam
#MobileInAction - iRecruitExpo June 2013, Amsterdam
 
Michael Kowalski, Padify
Michael Kowalski, PadifyMichael Kowalski, Padify
Michael Kowalski, Padify
 
Responsive Email Design
Responsive Email DesignResponsive Email Design
Responsive Email Design
 
TorCHI - Designing iPad Mobile Banking: the Inside Stories
TorCHI - Designing iPad Mobile Banking: the Inside StoriesTorCHI - Designing iPad Mobile Banking: the Inside Stories
TorCHI - Designing iPad Mobile Banking: the Inside Stories
 
Howie Schwartz at TA Tech 2016: Mobile Is Ruining Your Candidate's First Impr...
Howie Schwartz at TA Tech 2016: Mobile Is Ruining Your Candidate's First Impr...Howie Schwartz at TA Tech 2016: Mobile Is Ruining Your Candidate's First Impr...
Howie Schwartz at TA Tech 2016: Mobile Is Ruining Your Candidate's First Impr...
 
I phone, I am case study
I phone, I am case studyI phone, I am case study
I phone, I am case study
 
Jobsite Mobile Recruitment Conference, July 2013
Jobsite Mobile Recruitment Conference, July 2013Jobsite Mobile Recruitment Conference, July 2013
Jobsite Mobile Recruitment Conference, July 2013
 
Mobile email - chasing context
Mobile email -  chasing contextMobile email -  chasing context
Mobile email - chasing context
 
Modular email templates
Modular email templatesModular email templates
Modular email templates
 
Insights from Glass Entrepreneur: Developing, Hacking, and Monetizing Apps
Insights from Glass Entrepreneur: Developing, Hacking, and Monetizing AppsInsights from Glass Entrepreneur: Developing, Hacking, and Monetizing Apps
Insights from Glass Entrepreneur: Developing, Hacking, and Monetizing Apps
 
Smarter Phones: Products After The App
Smarter Phones: Products After The AppSmarter Phones: Products After The App
Smarter Phones: Products After The App
 
Beyond Branding SharePoint - SharePoint and Today's Web
Beyond Branding SharePoint - SharePoint and Today's WebBeyond Branding SharePoint - SharePoint and Today's Web
Beyond Branding SharePoint - SharePoint and Today's Web
 

Semelhante a Mobile Strategy 2013

Putting Mobile First - July 2013
Putting Mobile First - July 2013Putting Mobile First - July 2013
Putting Mobile First - July 2013
Precedent
 
Native Vs HTML5 Apps
Native Vs HTML5 AppsNative Vs HTML5 Apps
Native Vs HTML5 Apps
AppAcademy
 

Semelhante a Mobile Strategy 2013 (20)

Mobile First London 13 August
Mobile First London 13 August Mobile First London 13 August
Mobile First London 13 August
 
Putting Mobile First - July 2013
Putting Mobile First - July 2013Putting Mobile First - July 2013
Putting Mobile First - July 2013
 
Pragmatic Principles for Mobile Design
Pragmatic Principles for Mobile DesignPragmatic Principles for Mobile Design
Pragmatic Principles for Mobile Design
 
Harnessing the content beast – Content marketing in the multiscreen world
Harnessing the content beast – Content marketing in the multiscreen worldHarnessing the content beast – Content marketing in the multiscreen world
Harnessing the content beast – Content marketing in the multiscreen world
 
10 Digital Marketing Trends for 2017
10 Digital Marketing Trends for 201710 Digital Marketing Trends for 2017
10 Digital Marketing Trends for 2017
 
Redesign for Mobile by Liad Goldsmith (Was presented at Conversion conference...
Redesign for Mobile by Liad Goldsmith (Was presented at Conversion conference...Redesign for Mobile by Liad Goldsmith (Was presented at Conversion conference...
Redesign for Mobile by Liad Goldsmith (Was presented at Conversion conference...
 
Native Vs HTML5 Apps
Native Vs HTML5 AppsNative Vs HTML5 Apps
Native Vs HTML5 Apps
 
Going Mobile First: a future-friendly approach to digital product design
Going Mobile First: a future-friendly approach to digital product designGoing Mobile First: a future-friendly approach to digital product design
Going Mobile First: a future-friendly approach to digital product design
 
Is Responsive the best solution to all our Mobile SEO problems>
Is Responsive the best solution to all our Mobile SEO problems>Is Responsive the best solution to all our Mobile SEO problems>
Is Responsive the best solution to all our Mobile SEO problems>
 
Different dimensions of android development baabtra.com
Different dimensions of android development baabtra.comDifferent dimensions of android development baabtra.com
Different dimensions of android development baabtra.com
 
Different dimensions of android development baabtra.com
Different dimensions of android development baabtra.comDifferent dimensions of android development baabtra.com
Different dimensions of android development baabtra.com
 
Designing for mobile. A UX perspective for developers
Designing for mobile. A UX perspective for developersDesigning for mobile. A UX perspective for developers
Designing for mobile. A UX perspective for developers
 
Implementing Modernization by Trevor Perry
Implementing Modernization by Trevor PerryImplementing Modernization by Trevor Perry
Implementing Modernization by Trevor Perry
 
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, a...
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, a...Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, a...
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, a...
 
Mobile product strategy & tactical pov 2014
Mobile product strategy & tactical pov   2014Mobile product strategy & tactical pov   2014
Mobile product strategy & tactical pov 2014
 
Putting Mobile First
Putting Mobile FirstPutting Mobile First
Putting Mobile First
 
Seminar: Putting Mobile First
Seminar: Putting Mobile FirstSeminar: Putting Mobile First
Seminar: Putting Mobile First
 
HTML5 vs. Native Apps: Demystifying the Decision Making Process
HTML5 vs. Native Apps: Demystifying the Decision Making ProcessHTML5 vs. Native Apps: Demystifying the Decision Making Process
HTML5 vs. Native Apps: Demystifying the Decision Making Process
 
NUS-ISS Learning Day 2017 - Future Skills for Project Managers
NUS-ISS Learning Day 2017 - Future Skills for Project ManagersNUS-ISS Learning Day 2017 - Future Skills for Project Managers
NUS-ISS Learning Day 2017 - Future Skills for Project Managers
 
The mobile ecosystem & technological strategies
The mobile ecosystem & technological strategiesThe mobile ecosystem & technological strategies
The mobile ecosystem & technological strategies
 

Mais de Precedent

Anatomy of a digital project seminar - 20th September, London
Anatomy of a digital project seminar - 20th September, London Anatomy of a digital project seminar - 20th September, London
Anatomy of a digital project seminar - 20th September, London
Precedent
 
Anatomy of a digital project seminar - 22nd June, London
Anatomy of a digital project seminar - 22nd June, LondonAnatomy of a digital project seminar - 22nd June, London
Anatomy of a digital project seminar - 22nd June, London
Precedent
 

Mais de Precedent (20)

Anatomy of a digital project seminar - 8th November, London
Anatomy of a digital project seminar - 8th November, LondonAnatomy of a digital project seminar - 8th November, London
Anatomy of a digital project seminar - 8th November, London
 
Anatomy of a digital project seminar - 20th September, London
Anatomy of a digital project seminar - 20th September, London Anatomy of a digital project seminar - 20th September, London
Anatomy of a digital project seminar - 20th September, London
 
IWMW16, Precedent plenary talk from Rob van Tol: 'Managing Change - Leading h...
IWMW16, Precedent plenary talk from Rob van Tol: 'Managing Change - Leading h...IWMW16, Precedent plenary talk from Rob van Tol: 'Managing Change - Leading h...
IWMW16, Precedent plenary talk from Rob van Tol: 'Managing Change - Leading h...
 
Anatomy of a digital project seminar - 22nd June, London
Anatomy of a digital project seminar - 22nd June, LondonAnatomy of a digital project seminar - 22nd June, London
Anatomy of a digital project seminar - 22nd June, London
 
Digital Transformation 'Before and After' seminar 13th April, London
Digital Transformation 'Before and After' seminar 13th April, LondonDigital Transformation 'Before and After' seminar 13th April, London
Digital Transformation 'Before and After' seminar 13th April, London
 
CX: Survival of the Fittest seminar 24th February, London
CX: Survival of the Fittest seminar 24th February, LondonCX: Survival of the Fittest seminar 24th February, London
CX: Survival of the Fittest seminar 24th February, London
 
Digital Transformation 'Before and After' seminar 10th February, Edinburgh
Digital Transformation 'Before and After' seminar 10th February, EdinburghDigital Transformation 'Before and After' seminar 10th February, Edinburgh
Digital Transformation 'Before and After' seminar 10th February, Edinburgh
 
Digital Transformation 'Before and After' seminar - 3rd February, London
Digital Transformation 'Before and After' seminar - 3rd February, LondonDigital Transformation 'Before and After' seminar - 3rd February, London
Digital Transformation 'Before and After' seminar - 3rd February, London
 
Webinar: Digital transformation 'cure and necessity' - 11th November
Webinar: Digital transformation 'cure and necessity' - 11th November Webinar: Digital transformation 'cure and necessity' - 11th November
Webinar: Digital transformation 'cure and necessity' - 11th November
 
Digital Transformation 'Before and After' seminar - 3rd November, London
Digital Transformation 'Before and After' seminar - 3rd November, LondonDigital Transformation 'Before and After' seminar - 3rd November, London
Digital Transformation 'Before and After' seminar - 3rd November, London
 
Digital Transformation 'Before and After' - 27th October, London
Digital Transformation 'Before and After'  - 27th October, LondonDigital Transformation 'Before and After'  - 27th October, London
Digital Transformation 'Before and After' - 27th October, London
 
Digital Transformation 'Before and After' -14th October, Edinburgh
Digital Transformation 'Before and After' -14th October, EdinburghDigital Transformation 'Before and After' -14th October, Edinburgh
Digital Transformation 'Before and After' -14th October, Edinburgh
 
CX: Survival of the Fittest seminar - 29th September, London
CX: Survival of the Fittest seminar - 29th September, LondonCX: Survival of the Fittest seminar - 29th September, London
CX: Survival of the Fittest seminar - 29th September, London
 
Digital Transformation 'Before and After' - 24th September, London
Digital Transformation 'Before and After' - 24th September, LondonDigital Transformation 'Before and After' - 24th September, London
Digital Transformation 'Before and After' - 24th September, London
 
IWMW 2015 - Marrying Creativity with Management Complexity
IWMW 2015 - Marrying Creativity with Management ComplexityIWMW 2015 - Marrying Creativity with Management Complexity
IWMW 2015 - Marrying Creativity with Management Complexity
 
Webinar: How to build a digital culture in higher education
Webinar: How to build a digital culture in higher educationWebinar: How to build a digital culture in higher education
Webinar: How to build a digital culture in higher education
 
CX: Survival of the Fittest seminar - 22nd July, Edin
CX: Survival of the Fittest seminar - 22nd July, EdinCX: Survival of the Fittest seminar - 22nd July, Edin
CX: Survival of the Fittest seminar - 22nd July, Edin
 
CX: Surival of the Fittest seminar - 15th July London
CX: Surival of the Fittest seminar - 15th July London CX: Surival of the Fittest seminar - 15th July London
CX: Surival of the Fittest seminar - 15th July London
 
Asset Management Breakfast - 4th June 2015
Asset Management Breakfast - 4th June 2015Asset Management Breakfast - 4th June 2015
Asset Management Breakfast - 4th June 2015
 
BHF Digital Transformation webinar 28th May 2015
BHF Digital Transformation webinar 28th May 2015 BHF Digital Transformation webinar 28th May 2015
BHF Digital Transformation webinar 28th May 2015
 

Último

Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Último (20)

Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Top 10 Most Downloaded Games on Play Store in 2024
Top 10 Most Downloaded Games on Play Store in 2024Top 10 Most Downloaded Games on Play Store in 2024
Top 10 Most Downloaded Games on Play Store in 2024
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsTop 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 

Mobile Strategy 2013

  • 1. Putting Mobile First November 27, 2013 Lindsay Herbert Head of Digital @precedent#@lindzeiy
  • 5. 135 experts Strategy & research Branding & communications User-centred design Development & hosting Digital marketing @precedent#@lindzeiy
  • 7. Who we work with @precedent#@lindzeiy
  • 9. Mobile whitepaper series 1. Optimising Mobile 2. Targeting Mobile @precedent#@lindzeiy 3.
  • 10. Putting Mobile First 1. A Changing World 2. What Are My Options? 3. Design Considerations 4. Choosing the Optimum Approach 5. Making It Happen 6. Considering The Future @precedent#@lindzeiy
  • 11. A Changing World – What do your customers use? Windows Blackberry Android iOS Smart TV @precedent#@lindzeiy
  • 12. A Changing World – Mobile operating system by region June 2012 to May 2013 Australia Asia iOS Europe Android SymbianOS Other Source: Stat Counter – Global Stat Counter - http://gs.statcounter.com/ @precedent#@lindzeiy
  • 13. A Changing World – Constantly evolving landscape @precedent#@lindzeiy
  • 14. A Changing World – Google I/O @precedent @lindzeiy
  • 15. A Changing World – Tablets @precedent#@lindzeiy
  • 16. A Changing World – The surge towards tablets Global Units Shipped (MMs) Global PC (Desktop / Notebook) and Tablet Shipments by Quarter (Q1: 1995 - Q1: 2013) Source: Katy Huberty, Ehud Gelblum, Morgan Stanley Research. Gartner. Data as of 4/13. @precedent#@lindzeiy Note: Notebook PCs include Net books
  • 17. A Changing World – Affordable tablets @precedent#@lindzeiy
  • 18. Putting Mobile First 1. A Changing World 2. What Are My Options? 3. Design Considerations 4. Choosing the Optimum Approach 5. Making It Happen 6. Considering The Future @precedent#@lindzeiy
  • 19. What Are My Options? Take the time to understand your user’s behaviour and context. @precedent#@lindzeiy
  • 21. What Are My Options? Remember a Mobile User… 1. Typically has short bursts of activity 2. Can be time poor or network restricted 3. Is usually goal driven 4. Loves using her phone - joy of use, personal item 5. Tells others of a good experience 6. Needs a simple uncomplicated experience @precedent#@lindzeiy
  • 22. What Are My Options? Take the opportunity to innovate in design and function. @precedent#@lindzeiy
  • 23. What Are My Options? Don’t just follow the web @precedent#@lindzeiy
  • 24. What Are My Options? 4(ish) choices Mobi Responsive Feeds Apps Native @precedent#@lindzeiy Hybrid
  • 25. What Are My Options? – Roll It: App or Web? @precedent#@lindzeiy
  • 26. Putting Mobile First 1. A Changing World 2. What Are My Options? 3. Design Considerations 4. Choosing the Optimum Approach 5. Making It Happen 6. Considering The Future @precedent#@lindzeiy
  • 27. Design Considerations ‘ 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 @precedent#@lindzeiy
  • 28. Design Considerations – Hit Areas @precedent @lindzeiy
  • 29. Design Considerations – Hit Areas User interface control sizes: Apple = 44px Windows = 9mm Nokia = between 7 and 8mm The average finger pad is 10-14mm with the fingertip being 8-10mm @precedent @lindzeiy
  • 30. Design Considerations – Common Language Use existing visual shortcuts for essential operations: Hamburger icon = menu Circular arrow = refresh Magnifying glass = search Cog = settings Thumb = like @precedent#@lindzeiy
  • 31. Design Considerations - Reach Hard Easy Average Left hand @precedent#@lindzeiy Hard Easy Average Right hand
  • 32. Design Considerations - Reach Hard: Things you don’t want to hit by mistake Hard Easy Hard Easy Easy: Things that require the most scrolling Average: Where the thumb naturally hovers Average Left hand @precedent#@lindzeiy Average Right hand
  • 33. Putting Mobile First 1. A Changing World 2. What Are My Options? 3. Design Considerations 4. Choosing the Optimum Approach 5. Making It Happen 6. Considering The Future @precedent#@lindzeiy
  • 34. Choosing the Optimum Approach - mobi @precedent#@lindzeiy
  • 35. Choosing 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 respond to screen size or orientation @precedent#@lindzeiy
  • 36. Choosing the Optimum Approach - mobi Drawbacks: – Can’t access device functions (e.g. internal storage) – Offline functions limited to HTML5 caching – User interface needs to be more simplistic – Slower than a native or hybrid app @precedent#@lindzeiy
  • 37. Choosing the Optimum Approach - Responsive @precedent#@lindzeiy
  • 38. Choosing the Optimum Approach - Responsive What it’s good for: – You only have to write the content once – Easy updates and maintenance – Experience stays consistent for users across all devices and platforms @precedent#@lindzeiy
  • 39. Choosing the Optimum Approach - Responsive Drawbacks: – One-size fits all means you can’t cater as well for different user behaviours and contexts – The same drawbacks for mobi also apply here @precedent#@lindzeiy
  • 40. Choosing the Optimum Approach - Responsive ‘ 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 @precedent#@lindzeiy
  • 41. Choosing the Optimum Approach - Responsive @precedent#@lindzeiy
  • 42. Choosing the Optimum Approach – Hybrid Apps @precedent#@lindzeiy
  • 43. Choosing the Optimum Approach – Hybrid Apps What it’s good for: – Lets you develop once to many devices – Can access some device features like internal storage – Better offline use (thanks to internal storage access) @precedent#@lindzeiy
  • 44. Choosing the Optimum Approach – Hybrid Apps Drawbacks: – Not as a fast as a native app – Can’t access all device functions – Has to be downloaded from app stores – Will not be a rich interface @precedent#@lindzeiy
  • 45. Choosing the Optimum Approach – Hybrid Apps @precedent#@lindzeiy
  • 46. Choosing the Optimum Approach – Native Apps @precedent#@lindzeiy
  • 47. Choosing the Optimum Approach – Native Apps What it’s good for: – Fastest speeds – Richest possible user interface – Can access every feature of the device – Best offline usage @precedent#@lindzeiy
  • 48. Choosing the Optimum Approach – Native Apps Drawbacks: – Needs to be developed for each device type – Data is a key consideration for unconnected use – Updates need to be rolled out for each type – Developing for each device type quickly adds to costs @precedent#@lindzeiy
  • 49. Choosing the Optimum Approach – Feeds @precedent#@lindzeiy
  • 50. Choosing the Optimum Approach – Feeds @precedent#@lindzeiy
  • 51. Choosing the Optimum Approach – Your priorities? Device features Native first, then Hybrid Offline functioning Native first, then Hybrid Speed Native (learn from Facebook) User interface Native Maintenance Web or Hybrid Platform independence Web or Hybrid Development cost Web or Hybrid Discoverability Web Installation Web Content restrictions, approval process and fees Web (learn from Playboy) @precedent#@lindzeiy
  • 52. Putting Mobile First 1. A Changing World 2. What Are My Options? 3. Design Considerations 4. Choosing the Optimum Approach 5. Making It Happen 6. Considering The Future @precedent#@lindzeiy
  • 53. Making It Happen – Mobile First approach @precedent#@lindzeiy
  • 54. Making It Happen – Adapting content @precedent#@lindzeiy
  • 55. Making It Happen – Adapting content Don’t just follow the web @precedent#@lindzeiy
  • 56. Making It Happen – UI Flow @precedent#@lindzeiy
  • 58. Making It Happen – Resource and Process ‘ The more channels I run, the more resource I’ll need, right? ’ @precedent#@lindzeiy
  • 59. Making It Happen – Resource and Process @precedent @lindzeiy
  • 60. Putting Mobile First 1. A Changing World 2. What Are My Options? 3. Design Considerations 4. Choosing the Optimum Approach 5. Making It Happen 6. Considering The Future @precedent#@lindzeiy
  • 61. Considering The Future – Remember it’s a Phone! @precedent#@lindzeiy
  • 63. Considering The Future – PrecEvents Out of the Box! @precedent#@lindzeiy
  • 64. Considering The Future – PrecEvents Out of the Box! @precedent#@lindzeiy
  • 65. Considering The Future – Customer journeys with Sitecore www.sitecore.net
  • 66. Considering The Future – Sitecore engagement platform www.sitecore.net
  • 67. Considering The Future – Trends for 2014 – Connected devices – Mobile payments and e-wallet – Mobile advancement - wearable devices (NFC) – Lounge computing - socially integrated TV – Move towards social business – Smart content with personalisation & aggregation – Self service applications @precedent#@lindzeiy
  • 68. Considering The Future – Finally… Don’t disappoint Don’t be afraid to innovate Don’t delay in providing a solution (think-apply-review-refine) @precedent#@lindzeiy
  • 69. Considering The Future – Finally… Think big. Start small. Act Quickly. Smart thinking wins… @precedent#@lindzeiy
  • 71. Follow Precedent on LinkedIn to find out more about our seminars and ideas, and add me to keep in touch. Follow @Precedentcomms on Twitter to see what we think is interesting in digital, and follow me for updates from my blog. @lindzeiy on Twitter

Notas do Editor

  1. Mobile OS by region statsProfile your audience – look at key parameters, for example operating systemsConsider global regions differently (iOSin Australia compared with Asia)
  2. What’s changed… chat through the key events in the past yearPick a trend … Siri & free messaging 9challenge to BBerry
  3. Google Glass. Seems daft now but…
  4. Diagram: Mary Meeker at the Wall Street Journal D11 Conference May 29 2013The uptake of tablets has been rocket like surpassing desktop and notebook PC’s less than 3 years after they were first introducedPredicted sales of tablets will surge from 72.7 million in 2011 to 383.3 million in 2017
  5. Average person looks at their phone 150 times a day most of these are very brief interactionsDesign needs to accommodate for these very brief interactions
  6. People interact with touch-based user interfaces with their fingers. So user interface controls have to be big enough to capture fingertip actions without frustrating users with erroneous actions and tiny targets. Apple - 44pxWindows – 9mmNokia – between 7 and 8mmThe average finger pad is 10-14mm with the fingertip being 8-10mmWhat does this mean? Don’t make tiny links and tiny spaces…
  7. Use existing visual shortcuts for essential operations. These are already emerging as standards so don’t reinvent the wheel.Hamburger icon = menuCircular arrow = refreshMagnifying glass = searchCog = settingsThumb = like
  8. Screen design needs to take into consideration the device it will inhabit.These diagrams illustrate the average user reachThings that you don’t want a user to hit by mistake need to sit up in the orange areaWith the longest reach area running top to bottom we can expect most scrolling will occur in these areas (and therefore the thumb will hover there)
  9. Screen design needs to take into consideration the device it will inhabit.These diagrams illustrate the average user reachThings that you don’t want a user to hit by mistake need to sit up in the orange areaWith the longest reach area running top to bottom we can expect most scrolling will occur in these areas (and therefore the thumb will hover there)
  10. Mobile browser basedStandard mobiWeb app mobiUsually have their own IACost effectiveLightweightWide reach
  11. Mobile browser basedStandard mobiWeb app mobiUsually have their own IACost effectiveLightweightWide reach
  12. Mobile browser basedStandard mobiWeb app mobiUsually have their own IACost effectiveLightweightWide reach
  13. One website, that flows across multiple devicesBrowser basedSame content delivered to all usersMonashTacticalDigital business transformation
  14. One website, that flows across multiple devicesBrowser basedSame content delivered to all usersMonashTacticalDigital business transformation
  15. One website, that flows across multiple devicesBrowser basedSame content delivered to all usersMonashTacticalDigital business transformation
  16. My issue with responsive design is when it becomes lowest common denominator design, 'working' on all screens but not excelling on any. – Roan Lavery (Free Agent)
  17. One website, that flows across multiple devicesBrowser basedSame content delivered to all users
  18. One website, that flows across multiple devicesBrowser basedSame content delivered to all users
  19. One website, that flows across multiple devicesBrowser basedSame content delivered to all users
  20. Examples of some framework providers
  21. Mobile browser basedStandard mobiWeb app mobi
  22. Mobile browser basedStandard mobiWeb app mobi
  23. Mobile browser basedStandard mobiWeb app mobi
  24. Use on the go
  25. Use on the go
  26. Device features. Although web apps can take advantage of some features, native apps (and the native components of the hybrid apps) have access to the full paraphernalia of device-specific features, including GPS, camera, gestures, and notifications.Offline functioning. A native app is best if your app must work when there is no connectivity. In-browser caching is available in HTML5, but it’s still more limited than what you can get when you go native.Discoverability. Web apps win the prize on discoverability. Content is a lot more discoverable on the web than in an app: When people have a question or an information need, they go to a search engine, type in their query, and choose a page from the search results. They do not go to the app store, search for an app, download it, and then try to find their answer within the app. Although there are app aficionados who may fish for apps in app stores, most users don’t like installing and maintaining apps (and also wasting space on their device), and will install an app only if they expect to use it often.Speed. Native apps win the speed competition. In 2012 Mark Zuckerberg declared that Facebook’s biggest mistake had been betting on the mobile web and not going native. Up to that point, the Facebook app had been a hybrid app with an HTML core; in 2012 it was replaced with a truly native app.Installation. Installing a native or hybrid app is a hassle for users: They need to be really motivated to justify the effort. “Installing” a web app involves creating a bookmark on the home screen; this process, while arguably simpler than downloading a new app from an app store, is less familiar to users, as people don’t use bookmarks that much on mobile.Maintenance. Maintaining a native app can be complicated not only for users, but also for developers (especially if they have to deal with multiple versions of the same information on different platforms): Changes have to be packaged in a new version and placed in the app store. On the other hand, maintaining a web app or a hybrid app is as simple as maintaining a web page, and it can be done as often or as frequently as needed.Platform independence. While different browsers may support different versions of HTML5, if platform independence is important, you definitely have a better chance of achieving it with web apps and hybrid apps than with native apps. As discussed before, at least parts of the code can be reused when creating hybrid or web apps.Content restrictions, approval process, and fees. Dealing with a third party that imposes rules on your content and design can be taxing both in terms of time and money. Native and hybrid apps must pass approval processes and content restrictions imposed by app stores, whereas the web is free for all. Not surprisingly, the first web apps came from publications such as Playboy, who wanted to escape Apple’s prudish content censure. And buying a subscription within an iOS app means that 30% of that subscription cost goes to Apple, a big dent in the publishers’ budget.Development cost. It’s arguably cheaper to develop hybrid and web apps, as these require skills that build up on previous experience with the web. NN/g clients often find that going fully native is a lot more expensive, as it requires more specialized talent. But, on the other hand, HTML5 is fairly new, and good knowledge of it, as well as a good understanding of developing for the mobile web and hybrid apps are also fairly advanced skills.User Interface. Last but not least, if one of your priorities is providing a user experience that is consistent with the operating system and with the majority of the other apps available on that platform, then native apps are the way to go. That doesn’t mean that you cannot provide a good user experience with a web app or a hybrid app–it just means that the graphics and the visuals will not be exactly the same as those with which users may be already accustomed.
  27. There are two approachesEither is fine
  28. 2. Is probably the most comfortable fit given you already have Corporate website; Microsite ; Campaign site is fine
  29. TescoBank UI flow
  30. Digital bloat
  31. Digital bloatAvoid digital bloat by monitoring the effectiveness of your channels and adjust your resourcing accordingly
  32. Chinese taxi appsSay your current location and where you are going and a voice message is sent to all nearby available taxisView the taxi's location in realtime and then push to talk directly to the driver to co-ordinate pickup
  33. BlipparJawbonePebbleSmart TVVuzixPingit from BarclaysbankSquare (Credit card reader)
  34. ORGANISATIONS MUST SEEK OUT TECHNOLOGIES THAT PROVIDE A SINGLE CUSTOMER VIEW, AN INTEGRATED EXPERIENCE AND BUSINESS INTELLIGENCE
  35. ORGANISATIONS MUST SEEK OUT TECHNOLOGIES THAT PROVIDE A SINGLE CUSTOMER VIEW, AN INTEGRATED EXPERIENCE AND BUSINESS INTELLIGENCE