Toolkit for Implementing Sites & Apps

(1)

Toolkit for Implementing Sites & Apps

Choosing the right product, design and

development paths

Stephen Griffiths,

Mobile Transformation Expert,

Google EMEA

(2)

Choosing the right paths for

your business...

PRODUCT

DEVELOPMENT

DESIGN

Path 1: Web

- Web Site

- Web App

- Notifications

Path 1: Web

Technology

- Web Site

- Web App

- Hybrid App

UX

- Dedicated

- Responsive

- Adaptive

Path 2: App Store

- Hybrid App

- Native App

- Widgets + Notifications

Path 2: Native Code

- Native App

UI

- Material Design

Mobile First

Executive Summary

PRODUCT PATHS DESIGN PATHS DEVELOPMENT PATHS

Re-think your proposition to exploit each product’s unique capabilities, and role in customer lifecycle

Achieve your goal of maximum sales (via Web reach) or repeat sales / engagement (via App features) Consider Web Apps to leverage the optimum blend of reach plus features (and drive more conversions)

Use responsive design to resolve device and behaviour fragmentation in a flexible, sustainable way

Consider Material Design as a solution to unify UI experiences across devices, web and apps Be Mobile First to create a - content, UI and code - baseline Smartphone experience, then scale-up

Continue to use the huge Web developer population and tools to optimise site performance Build Native Apps that leverage rich sensors, services and UI, and a mature developer / tool ecosystem Consider building a Progressive Web App or using Polymer’s cross-browser modular elements

(3)

DESIGN

CHOOSING THE RIGHT

DESIGN

PATH...

UX

– Dedicated

– Responsive

– Adaptive

UI

– Material Design

Mobile First

(4)

The problem is increasing device and

user behaviour fragmentation and

complexity

Users multi-device / screen and expect

a consistent and seamless experience

Increasing complexity is the painful

new reality that site and app design

needs to embrace

The UX solution is responsive or

adaptive design for flexibility and

sustainability

Responsive detects / adapts to each

device, and provides relatively

future-proofed UX system

Adaptive extends responsive, to

serve different content per device /

use case for optimum UX

The UI solution is Material Design to

unify UI experiences across devices,

web, app

A single underlying design system

that defines how UIs should feel,

move, adapt

Be Mobile First, to ensure

Smartphones provide baseline

experience, then scale-up

Prioritise the primary UX and content,

and code for the smallest device first

Take difficult business decisions before

you scale-up to larger platforms

(5)

We face an increasing level of

fragmentation and complexity

in designing websites today!

CONTEXT

PLATFORMS

DEVICES + OS

_RESOLUTIONS

SCREENS +

INPUTS

POSTURES

Which requires a

systematic –

cross-platform,

device, screen –

design approach

Fragmentation

of platforms

From Computers to …

• Tablets

• Smartphones

• Wear

• TV

• Auto

New platforms keep emerging that

necessitate new design considerations

(6)

Fragmentation of devices and OSs

Android

OS Versions

Android

5,600

Devices

24 Devices

Apple

iOS

OS Versions

(7)

Fragmentation of screens

Smartphone Dimension and Orientation Popularity

Tablet Dimension and Orientation Popularity

Vast screen combinations across dimensions and orientations

Source: ScientiaMobile, MOVR 2015 Q1

(8)

We view / touch screens at various

distances and postures

Fragmentation of user actions (and touch actions)

Consider the

natural thumb

zone for repetitive

/ engaging user

actions

Source: scotthurff.com

• iPhone 6 Plus is

very different

• Requires different

type of grip due to

its size

• Using little finger

as a stabiliser

49%

People

36%

People

15%

People

Long Press

Pinch open

Long Press Drag

Pinch closed Double-touch Drag Two-finger touch

➞

Given all contexts of use and fragmentation, you need to support as many as you can

(9)

Designing cross-screen experiences

is the painfully new reality...

necessitating a systematically

flexible and sustainable approach...

and there are 3 paths to consider!

UX PATH

Two main UX

design paths to consider

1. DEDICATED

2. RESPONSIVE

Multiple dedicated sites, e.g. main site for desktop and mSite for Smartphones

✓ Device-specific site ✓ Few dependencies

✓ Initial design cost / effort per site

✕ Cross-device UX across sites / devices ✕ Device detect / direct (multiple URLs) ✕ Cost / effort to maintain multiple sites

✓ Browser detect device and adapts layout ✓ Flexibility of fluid grids and fluid images ✓ One codebase, deployment and URL

Single site served to all devices, e.g. device detects / adapts layout per device

✕ Image bloat_{(NB: use responsive images!)} ✕ Testing complexity across devices ✕ Need greater design capabilities /

maturity

Ideal but unsustainable

eBay

Sustainable

Apple

|

SITE 1 SITE 2 SITE 3 1 SITE

BBC News

Google Photos

|

(10)

De-risk responsive by starting with

a responsive mSite

1. DEDICATED

2. RESPONSIVE

Multiple dedicated sites, e.g. main site

for desktop and mSite for Smartphones device detects / adapts layout per deviceSingle site served to all devices, e.g.

SITE 1

SITE

2 SITE3 1 SI

TE

• What: responsively design your dedicated mSite

• Why: flexibly adapt to different Smartphone device / screen types

• Benefit: adopt responsive design in stages and de-risk CvR impact on launch STEP 1 Responsive mSite for Smartphones

➞➞

STEP 2 ...scale-up to Tablet

➞

STEP 3 ...scale-up to Desktop

➞

Examples / Case Studies: Google + (now scaled to all devices) m.huffpost.com (and Case Study)

And, responsively scale-up to tablet and computer once the mSite conversion rate stabilises

Google+

evolution from responsive mSite to all devices

Challenge: maintaining two

sites meant duplicate code, implementations, optimisations. Homepage weighed

~5MB and produced ~250 HTTP requests. It wasn’t performing well

Solution: one responsive design to

work across mobile, tablet, desktop, and beyond. Established 6^5 rule so initial page load didn’t download more than 60K HTML, 60K JavaScript, 60K CSS, animations were 60fps, average latency of 0.6s

Desktop site

Mobile site Responsive site

Responsive site

(11)

A third path is Adaptive, which

extends

responsive design

2. RESPONSIVE

✓ Browser detect device and adapts layout ✓ Flexibility of fluid grids and fluid images ✓ One codebase, deployment and URL

✕ Image bloat_{(NB: use responsive images!)} ✕ Testing complexity across devices ✕ Higher design capabilities / maturity

needed

3. ADAPTIVE

✓ Server detects device, screen, resolution to adapt site for optimum user experience ✓ Provide content for each use case / intent ✓ Best load-time and performance

Different sites served to each device where a different use case exists

✕ Most cost / effort (initial and ongoing) ✕ Most testing complexity across devices ✕ Most design capabilities / maturity

needed

Sustainable and ideal

AVIS.CO.UK

➞➞ ➞

➞

➞➞

Single site served to all devices, e.g. device detects / adapts layout per device

(12)

Key benefit of a dedicated site

design path is the ability to design

an ideal single device experience,

e.g. mSite for Smartphones

DEDICATED

DESIGN

DEDICATED DESIGN

EXAMPLE -

eBay

DESKTOP

SITE

SMARTPHONE

SITE

Multiple dedicated sites, e.g. main site for desktop and mSite for Smartphones

✓ Device-specific site ✓ Few dependencies

✓ Initial design cost / effort per site

✕ Cross-device UX across sites / devices ✕ Device detect / direct (multiple URLs) ✕ Cost / effort to maintain multiple sites

Conclusion:

Ideal but unsustainable

SITE 1

SITE

2 SITE3

(13)

Key benefit of Responsive design

is the ability to apply a flexible and

sustainable UX system to deal

with increasing complexity

RESPONSIVE

DESIGN

RESPONSIVE DESIGN

EXAMPLE -

Google+

DESKTOP

VIEW

SMARTPHONE

VIEW

Conclusion: Sustainable

Single site served to all devices, e.g.

device detects / adapts layout per device

1 SITE

✓ Browser detects device and adapts layout ✓ Flexibility of fluid grids and fluid images ✓ One codebase, deployment and URL

✕ Image bloat (NB: use responsive images!)

✕ Testing complexity across devices ✕ Higher design capabilities / maturity

needed

Responsive Examples: Google +

|

Apple

|

BBC NEWS

|

PC WORLD

|

Bathstore

|

Tesco Bank

|

Currys

|

National Lottery

(14)

74% of mobile-friendly sites use

responsive design

26%

Not Responsive

Responsive

74%

Of the Responsive Sites,

49% Combine RWD with

Server-Side Detection

to provide an optimised

experience

49% of top sites combine

approaches - driven

by practical, real-world

solutions

74% responsive design...

49% combine design...

mDot 31% Pure RWD 51% Adaptive 18%

(15)

Key benefit of Adaptive design is

that it extends responsive to show

different content for each device

where a different use case exists

…for optimum user experiences!

ADAPTIVE

DESIGN

ADAPTIVE DESIGN

EXAMPLE -

AVIS.CO.UK

DESKTOP

VIEW

SMARTPHONE

VIEW

Different sites served to each device where a different use case exists

➞➞ ➞

➞

➞➞

✓ Server detects device, screen, resolution to adapt site for optimum user experience ✓ Provide content for each use case / intent ✓ Best load-time and performance

✕ Most cost / effort (initial and ongoing) ✕ Most testing complexity across devices ✕ Most design capabilities / maturity

needed

Conclusion: Sustainable and ideal

(16)

Grids + breakpoints can adapt to

devices, screens, resolutions

Adaptive UI Grid / Breakpoints (VIDEO)

And, hide / show different content for each device where a different use case exists

Material device metrics is a resource for sizing, resolution, etc. across devices

http://www.google.com/design/spec/resources/devices.html

(17)

What considerations are there

in deciding on a design path?

UX PATH

CROSS DEVICE UX:

SCALE TO NEW

SCREENS:

SCALE TO NEW

PLATFORMS:

1.DEDICATED

2.RESPONSIVE

3.ADAPTIVE

First consideration: cross device UX and scalability / flexibility

No (standalone site)

Partially with

Responsive Always scales up / down per platformOnly scales Only scales per platform Always scales up / down Locked to single site design

Medium > High Optimum per platform

NB: you can also responsively design a dedicated mSite in order to flexibly

manage the ongoing fragmentation / complexity, then scale-up to larger devices when the conversion rate stabilises.

Responsive is the most scalable / flexible path, and combined with Adaptive the optimum UX

PERFORMANCE:

SCALE TO NEW

SCREENS:

SCALE TO NEW

PLATFORMS:

1.DEDICATED

2.RESPONSIVE

3.ADAPTIVE

Second consideration: performance derived from that design

Partially with

May get re-direct

latency bloat Slow load from image (use responsive images)

Optimum per platform

Medium > High Optimum per platform

(18)

CROSS DEVICE UX: PERFORMANCE: SCALE TO NEW SCREENS: INITIAL EFFORT + COST: ONGOING EFFORT + COST: SCALE TO NEW PLATFORMS:

1.DEDICATED

2.RESPONSIVE

3.ADAPTIVE

Partially with

May get re-direct latency

Few dependencies Update each site

separately

Slow load from image bloat (use responsive images)

Optimum per platform Adapted per use case and device

Update each adaptation and testing more complex Medium > High

Has to work across devices Update only one design but testing

more complex

Optimum per platform

PERFORMANCE: SCALE TO NEW SCREENS: INITIAL EFFORT + COST: ONGOING EFFORT + COST: DESIGN CAPABILITIES / MATURITY REQUIRED: SCALE TO NEW PLATFORMS:

1.DEDICATED

2.RESPONSIVE

3.ADAPTIVE

Partially with

May get re-direct latency

Few dependencies Update each site

separately Simplest path to design with least

dependencies

Medium > High capabilities - more complex UX system

Most advanced path - needs mature UX and

UI capabilities

Slow load from image bloat (use responsive images)

Optimum per platform Adapted per use case and device

Update each adaptation and testing more complex Medium > High

Has to work across devices Update only one design but testing

more complex

Optimum per platform Dedicated design requires least initial effort / cost (but most ongoing), and Adaptive the most

Dedicated requires least capabilities, and Adaptive the most (both initially and ongoing)

Third consideration: design effort and cost (initial and ongoing)

(19)

Google’s Material Design unifies

cross-device user interfaces

UI PATH

For consistent user experiences across devices and Web and Apps

> MATERIAL DESIGN SPEC

“A single underlying design system organizes interactions and space.

Each device reflects a different view of the same underlying system”

(20)

It defines characteristics for how

UIs should feel, move, adapt

Think about each screen and what information is most relevant

Adaptive

Design

Bold & Beautiful

Aesthetic

Meaningful

Motion

Surfaces

Tangible

(21)

Material Design examples

Unify all digital touchpoints

and experiences

Website Google Trends Android App Nordstrom Android App The Hunt

(22)

Mobile First approach to design / development is healthy

Google + Website was a mobile first, responsive design

Take difficult business decisions before you scale-up to larger platforms

• Mobile first design is a cleansing process, since it forces you to ...

– Prioritise the primary user experience and content

– And, place secondary content off-canvas (or remove altogether)

○ – Embrace the inherent constraints of mobile

○ – Limited screen real-estate, device and input fragmentation, etc.

○ – Identify how you want users to act (Smartphones display ~75% less than desktops)

○ – Use mobile first responsive design to drive performance (speed, image size, etc.)

• Develop for the smallest device first

○ – Embrace Smartphone constraints so mobile becomes your baseline experience

○ – Use media queries to progressively enhance / adapt as screens get larger

CASE STUDY: GOOGLE +

It is important to be

Mobile First

(23)

In summary, your design team

should aim to support...

PLATFORMS

DEVICES + OS

SCREENS

INPUTS

POSTURES

– Main platforms (for cross-device use) – Consider new and

emerging platforms

– Maximum inputs (you never know which will be used!) – Optimise for touch

– UX for natural thumbzones – Image sizes per

viewing distance – Responsive design

(sustainable path) – Material Design (to

unify Web & App UIs)

– Adaptive grids and breakpoints

– Highest resolution screens and images

Design and develop for Mobile First

(24)

In Summary, choosing the right

paths for your business...

PRODUCT

DEVELOPMENT

DESIGN

Path 1: Web

- Web Site

- Web App

- Notifications

Path 1: Web

Technology

- Web Site

- Web App

- Hybrid App

UX

- Dedicated

- Responsive

- Adaptive

Path 2: App Store

- Hybrid App

- Native App

- Widgets + Notifications

Path 2: Native Code

- Native App

UI

- Material Design

Mobile First

PRODUCT PATHS DESIGN PATHS DEVELOPMENT PATHS

Re-think your proposition to exploit each product’s unique capabilities, and role in customer lifecycle

Achieve your goal of maximum sales (via Web reach) or repeat sales / engagement (via App features) Consider Web Apps to leverage the optimum blend of reach plus features (and drive more conversions)

Use responsive design to resolve device and behaviour fragmentation in a flexible, sustainable way

Consider Material Design as a solution to unify UI experiences across devices, web and apps Be Mobile First to create a - content, UI and code - baseline Smartphone experience, then scale-up

Continue to use the huge Web developer population and tools to optimise site performance Build Native Apps that leverage rich sensors, services and UI, and a mature developer / tool ecosystem Consider building a Progressive Web App or using Polymer’s cross-browser modular elements