Mobile Site For Mobile World

Download Mobile Site For Mobile World

Post on 14-Jul-2015

4.681 views

Category:

Mobile

0 download

Embed Size (px)

TRANSCRIPT

  • #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)

    Its 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

  • Weve 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 menus 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 web94% 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#avoidfullsitelabeling#findnearme#singlebrowserwindow#controlpromotions

  • Dont make users pinch-to-zoom

    bit.ly/responsive-basics for responsive web

    fundamentals

  • Tappable / expandable images

  • Be clear why you need a users location

  • Keep your user in a single browser window

  • Dont let promotions steal the show

  • Optimize your entire site for mobile

  • Dont make users pinch and zoomSite-wide Take-aways

    Provide expandable / tappable imagesBe clear why you need a users location

    Keep your user in a single browser window

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