Top 10 Must-dos for Optimizing Mobile Conversion Strategies

#Pubcon #CRO @tim_ash
INBOUND15
Mobile Conversion Strategies
Tim Ash
CEO, SiteTuners & Chair, Conversion Conference

Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash
About SiteTuners
• San Diego based conversion rate optimization agency
• Large and small company clients worldwide
Practice areas:
– Conversion-focused website blueprints (full redesigns & quick facelifts)
– Landing page test plans & testing strategy development
– Ongoing conversion management and knowledge transfer

M O R E T H A N
s i n c e 2 0 0 2
1200CLIENTS

#Pubcon #CRO @tim_ashCopyright © 2013, SiteTuners - All Rights Reserved. @tim_ash
Foundational Concepts

We Need A “Responsive” Website!

Yesterday - a handful of incompatible browsers

Today - an explosion of diverse devices

The answer is to draw pretty boxes…

…and code them into “responsive” one-page sites

“[Most responsive websites] are
infinitely scrolling pieces of crap.”
- Richard Banfield, CEO of Fresh Tilled Soil

We need to be responsive to the context

We live in a multi-screen world

Why “responsive-light” is a problem
• Breaks the hypertext paradigm – nothing to optimize except the order of
the linear presentation
• Ignores visitor context, intra-day usage patterns, and multi-screen use –
simply resizes within a column, and reflows multiple columns.
• Distorts spatial relationships & undermines usability (proximity, ordering,
containment, grouping, accessibility)
• Requires massively increased QA costs

#Pubcon #CRO @tim_ashCopyright © 2013, SiteTuners - All Rights Reserved. @tim_ash
What Makes
Mobile Experiences Unique

Context
• With exception of some tablet usage, assume that user is:
– Often in motion (which decreases coordination)
– Multi-tasking
– Using with one hand
– Using outside (‘glary’ screen)
– Impatient and interrupted (while waiting in short line)
• And that she expects:
– Context awareness - The device to know where she is, and show content accordingly
– Recovery from interruptions - To be able to seamlessly pause and resume tasks
– Hands-free usage - As much as possible (e.g. voice entry; fewer button touches)

Context - Examples
• Always there
– Average of 130 touches per day
– Using while driving, bathrooms
• Short burst interactions
– Look up NCAA tournament scores while walking
• Time sensitive
– I’m almost out of gas – need to find the nearest gas station ASAP
• Location specific
– Where can I find a good Indian restaurant around here?

Multiple Device Usage & Device Switching
• Remember that people often start their experience on one device,
complete on another (watch Netflix show on smartphone in waiting room;
resume on tablet in bedroom)
• Implication: Strive to create a more connected user experience across
devices and usage scenarios

Interaction Challenges
• Small touch targets for typical finger and thumb sizes
• Jiggling UI targets (while walking)
• Focus required for longer form entries
• Difficult keypad entries (mistyping; auto correct issues)
• Lower bandwidth (loading delays)
• Social interactions & interruptions
• Too many touches necessary

Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ashCopyright © 2013, SiteTuners - All Rights Reserved. @tim_ash
Top 10
Mistakes to Avoid

Mistake #1: Cramming All Features into Mobile Site
• In desktop usage scenario:
– User is typically seated, has larger screen
– User can easily click navigation, links
• Challenges in mobile usage scenario:
– Navigation occupies too much screen real estate
– Complex navigation (too many levels, options)
– Long, content-heavy pages
– Most-used features get pushed off the main screen
– Poor experience and engagement (especially if desktop site already has
usability and conversion issues)

Mistake #2: Making It Hard to Find Location
– User can find location more easily with visible
‘contact us’ link
– User can more easily find firm location via search,
Google Maps
– Visitor will waste time (before realizing company is out of service area)
– Visitor can’t easily find address, locations served (‘I’m looking for a coach to connect
with remotely [via Skype]… not sure if you guys offer that’)

Mistake #3: Using Non-Standard Buttons and Controls
– With wider view and longer linger time, user is better able to decipher
controls
– Mouse clicks are considerably easier than thumb touches
– More thought and time required to find and touch controls
– User is unsure which things are clickable and which aren’t
– Main Calls-to-Action buttons are too subtle, may be missed
– Secondary links are too subtle, may be missed

Mistake #4: Neglecting Visitor’s Limited Attention
– User is free from most distractions (with some exceptions)
– Busy screens require too much thought, too many touches
– Most-wanted answers do not bubble to the top
– Can’t find desired information within shorter time
– Interrupted experience

Mistake #5: Forcing Your Visitor to Remember Info
– User doesn’t need to hold as much info in working memory
– User can toggle between entry and ‘reference’ window
– Environment (working, relaxing) puts less demands on memory
– User can’t remember info from screen 1 to enter on screen 2
(4 pieces of information rule)
– User gets frustrated when has to copy/paste or write it down
– Fewer Call-to-Action clicks (especially for forms, phone #s)

Mistake #6: Using Too Much Screen for Navigation, Promos
– On larger screen user can see all main and sub navigation
– User can see more topics of interest lower on page
– Top sales proposition content not visible
– Extra navigation touches and scrolling required
– Main Calls-to-Action are promotions (vs. categories)
– Lower click-through for main (profitable) click paths

Mistake #7: Making It Difficult to Contact You
– User can easily see phone, chat, email options
– Most users know where to find them (header, footer)
– Users may not think to look behind navigation icons or menus
– If phone # touch does not directly launch phone app, visitor
may not remember the number to enter
– Takes too much effort to find phone #

Mistake #8: Using Too Many or Large Images
– User has a much wider view of your site
– User has higher bandwidth (cable speed or higher)
– Larger, not-fully-optimized graphics slow down
site’s load time
– Graphics occupy too much real estate, often don’t
add value (build trust, make selling point)
– Too much scrolling to see Calls-to-Action
– Lower engagement with content

Mistake #9: Using Tiny Text, Buttons & Links
– User can easily scale up the text size
– User may be a bit more willing to read
– User can’t read text on screen without squinting
– User has difficulty touching small Call-to-Action buttons
– User won’t have patience to endure poor mobile experience

Mistake #10: Using Long-Winded Content
– User has larger screen, can better see context
– User often seated, feeling more patient
– User doesn’t have time to read long paragraphs!
– User grows frustrated – ‘I don’t have time to read this…
I just want to click and move’
– High likely bounce rate

Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ashCopyright © 2013, SiteTuners - All Rights Reserved. @tim_ash
Top 10
Must-do’s

Must Do #1: Optimize Your Site’s Load Speed
• The Problem:
– Most users expect mobile sites to respond faster than desktop sites (but many don’t)
– People will bail out of slow sites (especially in a ‘I need info ASAP’ context)
– Lag is accentuated by data path (phone > cell tower > network > server queries, and back) and
slower speeds (3G, 4G)
• The Solution:
– Use image sparingly, and only ‘zoomed in’ ones
– Serve smaller images to smartphones (based on device detection)
– Ruthlessly optimize graphics (see LukeW technique)
– Hide latency – Start loading in background; ‘lazy load’ as user scrolls
– Give the user some feedback if response takes longer than 2-4 sec

Some Patience Level Data
• Patience levels keep getting shorter (especially for
Gen Y and younger)
• Page needs to load within a few seconds to reduce
chances of abandonment
• Some Statistics:
– 47% of consumers expect a web page to load in 2
seconds or less
– 40% abandon a website that takes longer than 3
seconds to load
Source: https://blog.kissmetrics.com/loading-time/

How to Communicate Delays to User
• 2-4 seconds:
– Show a general progress indicator/spinner
• 4-8 seconds
– Display indicator that shows progress in discrete terms
• Longer response times
– Show discrete progress indicator, along with a)
distracting
animation or b) later notification

Example – Alaska Airlines
• Focused on:
– Top tasks
– Loading speed
• Uses:
– Light, minimal graphics
– Blue color for links

Image Optimization Technique
Steps:
1. Double image dimensions
2. Set quality to zero (0)
3. Save as jpg or gif
Typical effect:
Reduces file size by 50%!

Must Do #2: Radically Reduce Features & Content
• The Problem:
– Smartphone users need info fast – especially if in a legal predicament
– Users don’t want to wade through a lot of copy
– Users often have small set of task intents
• The Solution:
– Serve content to mobile users that is tailored to their unique context and
intents
– Think of an ATM – how different that experience is from bank’s website
– Implement a content management system (CMS) that tailors content to each
type of mobile device

Example – Chase Desktop Site
• Visible and direct login
• Prominent mortgage rate banner
• ‘Open checking account’ and ‘find credit
card’ entry points
Desktop Site

Example – Chase Mobile Site
• Login is behind main navigation link
• Focused on top 3 tasks:
– Log on, Contact, Find ATM/Branch
• Credit card offers disclosed on
secondary page, with slider
Mobile Site

Must Do #3: Adapt Experience to Most-Used Devices
• The Problem:
– Desktop experiences on mini tablets and phablets are poor
– Desktop experience on an iPad does not support gestural interaction
• The Solution:
1. Review your analytics to see usage by device (mobile, tablet, desktop)
2. Decide which devices to support (require unique experience)
3. Decide which content to serve up per device (based on device detection)
4. Support most common gestural interactions for phones and tablets

Progressive Enhancement
At each ‘breakpoint’, offer
more content with adjusted
layout
Typical breakpoints:
• Phone
• Tablet (or mini tablet)
• Laptop / Desktop

Example – NPR Desktop Site
• Exposes all main navigation,
search field and ‘support’
Calls-to-Action
• Shows dual branding

Example – NPR Mobile Sites
• Tablet site eliminates for 3 navigation options
• Phone site collapses main navigation into hamburger
menu
• Tablet and phone:
– hides ‘From NPR News’ panel
– Suppresses ad display

Must Do #4: Make CTAs & Navigation Easy to Use
• The Problem:
Many Call-to-action buttons are missed, either because they are not visible or
they don’t stand out from the background
• The Solution:
– Make navigation options easily accessible (one touch away)
– Make Call-to-Action buttons large and easy to touch – see guidelines on next
slide
– Consider ‘floating’ main navigation and Calls-to-Action
– Support ‘next steps’ navigation (next step: ‘Engagement Pricing’ or ‘How You
Pay Us’)

Minimum Button & Link Size Guidelines
• The average width of human thumb is 1 inch, which equates to
72 pixels
• Many users use thumb pad instead of thumb tip
• Guidelines for minimum target (button, link) sizes
– Apple: 7mm (44 pts) min width; 2mm min gap (where 1 pt =
1/72th of an inch)
– Android: 9mm (48 dp) min width; 2mm min gap (where ‘dp’ is
density independent pixels)
– Windows Phone 7: 9mm (34px) min width; 2mm min gap

Example – USSoccer.com
• This site keeps a navigation layer
(main menu, search) visible at all
times, reducing need to scroll
• For articles, both title and image
are clickable (large target)

Must Do #5: Leverage the User’s Location
• The Problem:
Prospects don’t want to waste their time with companies that do not serve their area
• The Solution:
– Incorporate the smartphone’s location awareness into the experience.
• (If location detection turned off)
‘XYZ.com would like to use your location.’ OK / Cancel
• For example, if your company only serves local clients, notify and geo-screen visitors early:
[outside of service area] ‘We see you’re in Arkansas. Sorry, we only service clients in California. But
that’s OK! Follow this link to find one of your partners in your area.’ [link to Arkansas affiliates]
– Assert that since your company is local you are very in-tune with local tastes, offer value-adds
like prompt service, fresh deliveries (when applicable)

Example – Starbucks
• Starbucks offers two ways to find a store:
– Use current location
– Enter location (Street Address or Zip Code)
• 1 touch is easier than 7 (touch ‘find store’, enter 5
zip digits, touch ‘Go’ button)

Must Do #6: Simplify Contact Form Entries
• The Problem:
– Forms with excess fields have high drop-off rates
– Visitor will bail out if she doesn’t know what to input for required entry
• The Solution:
– Ensure Contact Us link and Phone # are always visible
– Minimize the number of required fields (remember, this is lead gen form)
– Place labels above or in field
– Default entry mode to field type (number, letter, special)
– Cookie previous entries for rapid resume (user is interrupted)

Example – JedStone.com
• JedStone mobile site contact form has
only one required field – email address.
• Suggested improvements:
– Make ‘Contact Us’ link more visible
– Remove State field – not necessary when
asking for Zip
– Increase vertical separation between fields
– Make ‘Send this Message’ button darker

Must Do #7: Maximize Content-to-Navigation Ratio
• The Problem:
– Most people scan the main site area first, only later consider header (main)
navigation
– Users are seeking answers and reassurances – not to learn your site’s
organization!
• The Solution:
– Maximize the percentage of each page devoted to useful content
– Embed links in content that address main visitor intents (not tangents)
– Minimum wasted space, unnecessary navigation
– Include ‘next step’ navigation that guides user closer to submitting a lead,
contacting you

Example – ESPN.com
• ESPN mobile site and ESPNfc
(soccer) section now have a more
compact ‘hamburger’ menu
(previously had 3 levels, consuming
nearly 1/3 of screen)
• Focus on home page is articles and
scores (one touch away)

Must Do #8: Avoid Pop-over Layers
• The Problem:
– Lightbox/similar layers are problematic for mobile – cause drop offs,
disorientation
– Smartphone users expect to interact in single screen ‘layer’
• The Solution:
– Avoid layers that pop up over the main screen (especially annoying survey
invites)
– Support additional entries:
• With separate screens
• Using ‘expand on touch’ entries (touch ‘Enter Zip’; Zip field appears with ‘Go’ button)

Must Do #9: Tailor Site Experience for Return Visitors
• The Problem:
– Most people use multiple devices in same day – out and about, home, work
– Recognizing return visitor and continuing their experience shows you care
• The Solution:
– Resume the experience with ‘Welcome back! Here’s where you left off’
– Do with cookies or latest technology (without requiring login)
– In the future support cross-device, cloud-based ‘cookies’

Must Do #10: Test Your Mobile Site On Many Devices
• The Problem:
– While it’s hard for your testing team to keep up with the new devices hitting
the market every month, it’s essential to do so because…
– People have lower trust in sites with bugs and awkward interactions
• The Solution:
– First test your site with a tool like crossbrowsertesting.com
– Then test your site on 20 most common devices (including some 1+ years old)
– Don’t forget Windows Phone devices (comparable to iOS)
– Verify that all your functionality (including videos) and content render
correctly

Get a Free Conversion Funnel Review
• Interactive review of your key conversion paths, including how well
your content, images and page flow match visitor expectations and
intent
• Conducted by SiteTuners conversion staff
• Video transcript recorded via GoToMeeting
• Offer good only for US or Canadian companies generating at least
$2 million annually in online revenue. New customers only please.
Only 10 Funnel Reviews Available – Book Yours Now!
Bit.ly/ReviewMyFunnel

SAVE OVER $400•increaseyourrevenueandprofit
•generatemoreleads
•landmorecustomers
•boostsalesandpaidmemberships
•maximizeyourmarketingROI
RioAll-suitesHotel &Casino
LasVegas-May18-19, 2016

Contact Info and Q&A
tim@sitetuners.com
(619) 990-9062 mobile
(619) 223-8020 work PST
twitter @tim_ash
www.linkedin.com/in/timash
facebook.com/tim.ash1
skype tim_ash1

Top 10 Must-dos for Optimizing Mobile Conversion Strategies

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Top 10 Must-dos for Optimizing Mobile Conversion Strategies

Ähnlich wie Top 10 Must-dos for Optimizing Mobile Conversion Strategies (20)

Mehr von INBOUND

Mehr von INBOUND (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Top 10 Must-dos for Optimizing Mobile Conversion Strategies