Putting Mobile First - July 2013

31 July 2013

Putting Mobile First


•  A Changing World

•  Where is the Opportunity?

•  Design Considerations

•  The Optimum Approach

•  Making It Happen

•  Considering The Future

” “ The average smartphone user reaches to their phone 150 times per DAY!

-Mary Meeker at #D11

A Changing World – The Mobile Take-Over

2013

Asia Pacific Europe North America Middle East and Africa Latin America

A Changing World – Users of Mobile by Region 2012 - 2017

2012

Source: Portio Research

2017

A Changing World – Operating System by Region

Europe Australia

June 2012 to May 2013

Asia

iOS Android SymbianOS Other

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

Mobile Marketing Strategy for Australia

A Changing World – Smartphone Operating System in Australia

2011 - 2012 Australia

iOS Android Windows OS SymbianOS Other

Source: ACMA Communications report 2011–12

A Changing World – The Surge Towards Tablet G

loba

l Uni

ts S

hipp

ed (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

” “ 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?

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…

Optimising Mobile







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

Are you doing enough? What could be done better?

Visualize goals and tasks: •  Personas •  Scenarios

Test assumptions: •  Contextual inquiry •  Focus groups and

interviews

Identify assumptions: •  What do your users

need? •  What do your users do?

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

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

Three main factors to encourage behaviour

2. Ability “What resources are required?” “Do I have those resources?” “Is it worth it?”

3. Triggers “Should I act now?” “Can I act later?"

1. Motivation “How important is this outcome to me?” “Will this help me get to where I want to go next?”

Where is the Opportunity? – The Fogg Behaviour Model

Ability

Mot

ivat

ion Triggers

Succeed Here

Triggers Fail Here

High Motivation

Low Motivation

Hard To Do Easy To Do








Design Considerations – Multi Screen Patterns

•  Coherence

•  Synchronisation

•  Device shifting

•  Complementarity

•  Simultaneity

Coherence

Coherence - Example

Synchronisation

Synchronisation - Example

Device Shifting

Device Shifting - 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 well.

Luke Wroblewski – Mobile First

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 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!’

Design Considerations - Reach

Right hand

Easy

Average

Hard

Left hand

Easy

Average

Hard








What Are My Options?

Mobi

Responsive

Hybrid Apps

Native Framework Web App

Feed Aggregators

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

The Optimum Approach - Responsive

The Optimum Approach - Responsive


•  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

” “ 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

The Optimum Approach – Hybrid Apps

The Optimum Approach – Example

The Optimum Approach - Frameworks

The Optimum Approach - Frameworks


•  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.

The Optimum Approach – Native Apps

•  The Optimum Approach – Native Apps

•  The Optimum Approach – iButterfly

The Optimum Approach - Native


•  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

The Optimum Approach - Feeds

Optimising Mobile







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

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 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

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







” “ 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)

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.”

Considering the future - Wearable tech

Putting Mobile First - July 2013

Technology

changing world users

mobile space

mobile devices

mobile store

optimum approach mobi

changing world smartphone

optimum approach responsive

design simple