making your website convert better for mobile users

Buyers on the Move:Making your Website Convert Better for Mobile Users

Tom BowenWeb Site Optimizers September 9, 2016

Tom Bowen

Tom Bowen | @WSOMarketing | #bigd16

• Founder/CEO of Web Site Optimizers• Formerly Online Product Manager at GTE/Verizon,

Sprint, MobileStar• Helping Organizations Convert More Online Since 1998

@WSOMarketing

https://www.linkedin.com/in/tombowenwso

[email protected]

Since 2002, Web Site Optimizers has helped businesses big and small improve their bottom line via Conversion Rate Optimization, Usability Testing, and Analytics Optimization.


Still Putting Off Optimizing Your Site’s Mobile Performance?


You’ve Missed The Boat!


Mobile Usage Has Already Passed Desktop


We Looked At Our Own Clients’ Data


What Your Analytics Are NOT Telling You


First Touch Is Often Mobile

Source: http://services.google.com/fh/files/misc/multiscreenworld_final.pdf

Even if transaction is completed on desktop (if MX is positive)


Your Mobile Traffic May Look Smaller SimplyBecause You Have A Poor Mobile Experience


The Conversion Divide Between Device Types

Source: http://www.monetate.com/resources/research#ufh-i-95458575-ecommerce-quarterly-q1-2015


So What Do We Do About This?


Evolution of Mobile Conversion Optimization

Usability Adaptivity Continuity


Phase One: Usability


Phase Two: Adaptability


Phase Three: Continuity


Phase One: Usability


Sadly, most simply adopt Responsive Design as a fix-all solution.


RWD Is Better Than Nothing…

BUT WAIT! THERE’S MORE!


Navigation is a Key Usability Factor for Mobile


Minimal number of Clicks (Taps) to reach destination is even more critical


Don’t Rely Solely on the Hamburger Icon


Add “Menu” to Help Unfamiliar Users


Nav Links Must Be Large Enough to Tap Easily

• At least 48px wide by 48px high• At least 8px white space around

perimeter


Search Is A User’s Alternative to Poor Navigation

Make your Site Search area stand out to allow users to find things easily.


Make Your Forms Easier to Fill Out


Use HTML5 Input Types for Proper Keyboard

<input type="email" /> <input type="url" />


Use HTML5 Input Types for Proper Keyboard

<input type="tel" /><input type="number" />


Look for Alternatives to Dropdown Inputs

For smaller sets of options, use

graphical radio inputs. Only 3 or 4 clicks here despite

one more field.

Dropdowns on Mobile take several clicks per input. 9 clicks total here.


Minimizing Unnecessary Fields Can’t Be Overemphasized


Make Checkout As Easy As Possible


Use GeoIP or ZIP Code for City/State Defaults


Incorporate 3rd Party One-Click Checkout Solutions


Coming Technology: Scan Your Card To Pay

Currently available only for mobile apps. Web sites are on the horizon.

Scanpay.it

Jumio.com

Card.io


Obsess Over Page Weights & Load Times


Why Is Load Time on Mobile So Important?

Per Simon Bolger, of Google, at 2016 PubCon Austin:

• 33% say that speed is the most important factor when using a mobile site.

• 88% of mobile users are less likely to come back to a site with a poor mobile experience.

• 74% will abandon a mobile site that takes over 5 seconds to load.

Photo: Paul Fach


Images File Sizes: Daan Jobsis Method

Original: Pixels: 421 x 250Quality: 70File Size: 34.6 KB

Make an image twice as big and then save with a Quality of 0. Generally results in better quality image of half the file size.

Revised Version:Pixels: 842 x 500Quality: 0File Size: 16.4 KB

Details: http://bit.ly/OpLhK5


Use CDNs (even if just for your mobile content)


Winners are the ones constantly adapting to changing circumstances- Ranal Currie -

Phase Two: Adaptability


There’s more different about mobile users than just screen size.


How Do Mobile Users & Desktop Users Differ?


Where Are Mobile Users?


Mobile Users Are…

• In more of a hurry, less patient• More easily distracted• Giving only a portion of their attention, in

short, intermittent bursts• Usually multi-tasking


“Mobile First”

“Mobile First” should not just be about screen size. It’s about planning for the mobile user first.


Companies Thought “Mobile First” and Built Responsive Sites…

But they realized that’s not the final answer.


Unnecessary Desktop Elements Clutter MX

12 different elements of the page for the user to review (or not).

Plus 9 more farther below the fold.


All 21 Elements Are Shown to Mobile Users


RWD Adds Page Weight – Slows Load Times


RWD Downloads Elements for Desktop AND Mobile

This appealing minimal design still downloads 16 graphics weighing over 1.2Mb that are used only for larger screens.


Don’t Just Try to Cram Your Entire Desktop Into a Mobile Screen Size.


What Do Mobile Users Need from Your Site?


Adapting Content & Options to a User’s Situation is Something We’ve Been Doing for Years


JustBrakes.com


AA.com


Personalization Is All The Rage Right Now

Source: Marketo

Adapting content & functionality based on mobile vs. desktop is foundational personalization.


It’s Not Just About Simplifying Options


Repeat: Obsess Over Load Time


Minimize Not Just Size, but Number of Images

7 photos, 12 small images – only 168KbFull page weight is just 333Kb


Leverage the Fact That There’s aPhone in a SmartPhone.


The Phone Can Be Your Top Sales Agent

“On average, a phone call is worth 700% more than a lead

form fill.”Joel Harvey

Conversion Sciences


Utilize Click-to-Call Buttons as CTAs

<a href="tel:+18003313307" class="clicktocall">Call Us Now! 800-331-3307</a>

• You can style this to be a button for mobile & text for desktop

• Include an effective Call To Action

• Show the phone number on the button

• Use an icon to catch the eye


Offer Specials & Incentives to Mobile-only Users


Phase Three: Continuity


While most of your conversions happen on desktop, the initial visit is usually on mobile.


Desktop Device Often Nearby During Mobile Use

Source: Google/Nielsen Life 360 Mobile Search Moments Q4 2012


How Do We Encourage Mobile Users to Complete the Order on a Desktop (or Mobile)?


Give Option to Save & Email Cart for Use on Another Device


Cart Recovery Extensions Can Help


Tip: Show the Cart Item(s) in the Email


Remind Them of Specials & Offer Incentives


Coming Technology: Cloud-Based Cookies


Wherever Your Site Is in the Evolution, There Are Gains to Be Made.


Resources

Site Search Analysis: http://goo.gl/VLaIbi

HTML5 Form Input Types: http://goo.gl/nP6803

ZIP Code Database: http://www.zip-codes.com

GeoIP Databases: http://dev.maxmind.com/geoip/legacy/geolite/

Amazon Payments: https://payments.amazon.com/

PayPal Express Checkout: https://www.paypal.com/webapps/mpp/express-checkout

CDN Options & Pricing: http://www.cdncalc.com/

http://goo.gl/VLaIbi

http://goo.gl/VLaIbi

http://goo.gl/nP6803

http://goo.gl/nP6803

http://www.zip-codes.com/

http://dev.maxmind.com/geoip/legacy/geolite/

http://dev.maxmind.com/geoip/legacy/geolite/

https://payments.amazon.com/

https://payments.amazon.com/

https://www.paypal.com/webapps/mpp/express-checkout

https://www.paypal.com/webapps/mpp/express-checkout

http://www.cdncalc.com/

http://www.cdncalc.com/


Discussion


Thank You!

Tom Bowen, PresidentWeb Site [email protected] @WSOMarketing www.websiteoptimizers.com

http://www.websiteoptimizers.com/

http://www.websiteoptimizers.com/

making your website convert better for mobile users

Internet