#mobileweb

Design For Mobile World

Ido Green

@greenido

+GreenIdo

devheb.com

Source: Data from BI Intelligence (http://www.businessinsider.com/state-of-internet-slides-2012-10?op=1)

It’s a mobile world, right?!

Global phone shipments - over 300 million last quarter

Android: over 1 billion 30 day active users

Android : people check 100 billion times each day.

Google Confidential and Proprietary

86%

14%

Sources: Time spent stats: http://www.flurry.com/bid/109749/Apps-Solidify-Leadership-Six-Years-into-the-Mobile-Revolution#.U44l461dVX4;Commercial task stats: Google/Ipsos Multiscreen Industry Study of 29k smartphone users across 9 industries.

ON MOBILE, ENTERTAINING APPS DOMINATE TIME, BUT SITES CAPTURE THE BULK OF TRANSACTIONS.

TIMESPENTON SITES

TIMESPENTON APPS

14%

40%GAMIN

G & ENT.

28%SOCIAL

20%OTHER 66%

SITES

6%APPS

28%SITES &

APPS

PRIMARY CHANNEL FOR COMMERCIAL TASKS

INDUSTRY SNAPSHOT

75% OF AUTOS USERS

60% OF FINANCE USERS

70% OF TRAVEL USERS

71% OF RETAIL & TECH USERS

64% OF LOCAL SERVICES USERS

... USE SITES MORE OFTEN FOR

COMMERCIAL TASKS

USER TIME SPENTON MOBILE DEVICES

We’ve heard them...

harder to navigate

sparse in features

poor on design

cut down

unfamiliar

smaller

sparse in features

(Bold) Examples

• 250% increase in mobile visits

Cancer.orgInformational

• 3x increase in mobile revenue (donations)

• Higher rates of mobile access to key areas

The case for the mobile web

We wanted to distribute the cancer.org experience as widely as possible, to as broad an audience as possible...

....It was a ‘mission imperative’ to mobilize all of our cancer.org content.

— Elizabeth Hammer, principal, digital platforms, The American Cancer Society

• 50% more time spent on mobile site

Huffington Post Media

• 37% more mobile unique visitors

• Reaching 29% of all US mobile users

• Tenfold increase of mobile conversions

PlusnetTelco

• Time to convert decreased 40%

25 principles

SiteSearch

Commerceand

Conversions

OptimizingFormEntry

Site-wideDesign

Considerations

Homepage and

Navigation

Mobile homepage and site navigation

#primarypurpose#identifyneeds

Keep calls-to-action front and center

Keep menus short and sweet

Make it easy to get back to the homepage

Homepage Take-aways

Keep calls to action front and center

Keep menu’s short and sweet

Make it easy to get back to the home page

Mobile site search#visible #smart#relevant

Make site search visible

Search availableunder menu

Ensure site search results are relevant

Implement filters to narrow results

Guide users to better site search results

Site Search Take-aways

Make site search visible

Ensure that site results are relevant

Implement filters to narrow results

Guide users to better site search results

Mobile Commerce and Conversions

#explore#purchaseasguest#crossdevice

Commercial is BIG on the mobile web

94% OF USERS RELY ON SITES FOR COMMERCIAL TASKS

66% USE SITES MORE OFTEN28% USE SITES & APPS EQUALLY6% USE APPS MORE OFTEN

ALMOST ALL ADVERTISERS SHOULD HAVE AN EFFECTIVE MOBILE SITE TO REACH THESE USERS.

Let users explore before they commit

Let users purchase as a guest

Pick up where you left off

Let users explore before they commit

Commerce & Conversions Take-aways

Let users purchase as a guest

Enable users to pick up where they left off

Optimizing form entry

#efficientforms#pre-exisiting info#real-timevalidation

Design efficient forms

Using pre-existing information

bit.ly/amazingforms for info. on creating forms

Streamline information entry

bit.ly/inputtypes for info. on choosing the

best input type

Contextual keyboard

Minimize form errors with labeling

bit.ly/labelinputs for info. on labeling form

fields

Provide visual calendars for dates

Real-time validation of forms

bit.ly/form-validation for info. on real time validation

Form Entry Take-aways

Design efficient formsUse pre-existing informationStreamline information entryMinimize form errors with labelingProvide visual calendars for datesReal time validation of forms

Site-wide design considerations

#expandableimages#avoid“fullsite”labeling#findnearme#singlebrowserwindow#controlpromotions

Don’t make users pinch-to-zoom

bit.ly/responsive-basics for responsive web

fundamentals

Tappable / expandable images

Be clear why you need a user’s location

Keep your user in a single browser window

Don’t let promotions steal the show

Optimize your entire site for mobile

Don’t make users pinch and zoom

Site-wide Take-aways

Provide expandable / tappable images

Be clear why you need a users’ location

Keep your user in a single browser window

Don’t let promotions steal the show

Optimize your entire site for mobile

The principles are published!google.com/think/multiscreen

Technical guidance bit.ly/web-fun

PageSpeed Insightsbit.ly/page-speed-insights

Not just shrinking design ...

Delight the mobile consumer

Google Confidential and Proprietary

How To?● Web Fundamentals

● Web Starter Kit

● Page speed insights

● webpagetest.org

Google Confidential and Proprietary

+Ido Green@greenido

Thank you!