mobile strategy 2013

November 27, 2013

Putting Mobile First

@precedent#@lindzeiy

Lindsay HerbertHead of Digital

@precedent#@lindzeiy

@precedent#@lindzeiy

LONDON

EDINBURGH

CARDIFF

PERTH

MELBOURNE

HONG KONG

@precedent#@lindzeiy

135expertsStrategy & researchBranding & communicationsUser-centred designDevelopment & hostingDigital marketing

@precedent#@lindzeiy

Years24Experience

Quality

Stability

Loyalty

Results

@precedent#@lindzeiy

Who we work with

@precedent#@lindzeiy

@precedent#@lindzeiy

Mobile whitepaper series

1. Optimising Mobile

2. Targeting Mobile

3.

@precedent#@lindzeiy

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

Putting Mobile First

@precedent#@lindzeiy

A Changing World – What do your customers use?

Smart TV

Blackberry Windows

iOSAndroid

@precedent#@lindzeiy

A Changing World – Mobile operating system by region

EuropeAustralia

June 2012 to May 2013

Asia

iOS Android SymbianOS

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

Glo

bal U

nit

s Ship

ped

(M

Ms)

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. Note: Notebook PCs include Net books

@precedent#@lindzeiy

A Changing World – Affordable tablets

@precedent#@lindzeiy

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

Putting Mobile First

@precedent#@lindzeiy

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

What Are My Options?

@precedent#@lindzeiy

@precedent#@lindzeiy

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

What Are My Options? Remember a Mobile User…

@precedent#@lindzeiy

Take the opportunity to innovate in design and function.

What Are My Options?

@precedent#@lindzeiy

@precedent#@lindzeiy

What Are My Options?

Don’t just follow the web

What Are My Options? 4(ish) choices

Mobi

Responsive

Apps

Native Hybrid

Feeds

@precedent#@lindzeiy

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

@precedent#@lindzeiy

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

Putting Mobile First

@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

Right handLeft hand

Easy

Average

Hard

Easy

Average

Hard

@precedent#@lindzeiy

Design Considerations - Reach

Right hand

Easy

Average

Hard

Left hand

Easy

Average

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

Easy: Things that require the most scrolling

Average: Where the thumb naturally hovers

@precedent#@lindzeiy

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

Putting Mobile First

@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

@precedent#@lindzeiy

What it’s good for:

– Fastest speeds

– Richest possible user interface

– Can access every feature of the device

– Best offline usage

Choosing the Optimum Approach – Native Apps

@precedent#@lindzeiy

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

Choosing the Optimum Approach – Feeds

@precedent#@lindzeiy

Choosing the Optimum Approach – Feeds

@precedent#@lindzeiy

Device features

Offline functioning

Speed

User interface

Maintenance

Platform independence

Development cost

Discoverability

InstallationContent restrictions, approval process and fees

Native first, then Hybrid

Native first, then Hybrid

Native (learn from Facebook)

Native

Web or Hybrid

Web or Hybrid

Web or Hybrid

Web

Web

Web (learn from Playboy)

Choosing the Optimum Approach – Your priorities?

@precedent#@lindzeiy

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

Putting Mobile First

@precedent#@lindzeiy

Making It Happen – Mobile First approach

@precedent#@lindzeiy

Making It Happen – Adapting content

@precedent#@lindzeiy

@precedent#@lindzeiy

Making It Happen – Adapting content

Don’t just follow the web

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

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

Putting Mobile First

@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

– 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

Considering The Future – Trends for 2014

@precedent#@lindzeiy

Don’t disappoint

Don’t be afraid to innovate

Don’t delay in providing a solution

(think-apply-review-refine)

Considering The Future – Finally…

@precedent#@lindzeiy

Think big.

Start small.

Act Quickly.

Smart thinking wins…

Considering The Future – Finally…

@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