More Related Content
Similar to Top 10 Must-dos for Optimizing Mobile Conversion Strategies
Similar to Top 10 Must-dos for Optimizing Mobile Conversion Strategies (20)
Top 10 Must-dos for Optimizing Mobile Conversion Strategies
- 2. 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
- 3. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash
M O R E T H A N
s i n c e 2 0 0 2
1200CLIENTS
- 6. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash
Yesterday - a handful of incompatible browsers
- 7. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash
Today - an explosion of diverse devices
- 8. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash
The answer is to draw pretty boxes…
- 9. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash
…and code them into “responsive” one-page sites
- 11. #Pubcon #CRO @tim_ash
“[Most responsive websites] are
infinitely scrolling pieces of crap.”
- Richard Banfield, CEO of Fresh Tilled Soil
- 12. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash
We need to be responsive to the context
- 13. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash
We live in a multi-screen world
- 14. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash
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
- 16. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash
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)
- 17. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash
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?
- 18. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash
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
- 19. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash
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
- 20. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ashCopyright © 2013, SiteTuners - All Rights Reserved. @tim_ash
Top 10
Mistakes to Avoid
- 21. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash
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)
- 22. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash
Mistake #2: Making It Hard to Find Location
• In desktop usage scenario:
– User can find location more easily with visible
‘contact us’ link
– User can more easily find firm location via search,
Google Maps
• Challenges in mobile usage scenario:
– 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’)
- 23. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash
Mistake #3: Using Non-Standard Buttons and Controls
• In desktop usage scenario:
– With wider view and longer linger time, user is better able to decipher
controls
– Mouse clicks are considerably easier than thumb touches
• Challenges in mobile usage scenario:
– 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
- 24. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash
Mistake #4: Neglecting Visitor’s Limited Attention
• In desktop usage scenario:
– User is typically seated, has larger screen
– User is free from most distractions (with some exceptions)
• Challenges in mobile usage scenario:
– 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
- 25. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash
Mistake #5: Forcing Your Visitor to Remember Info
• In desktop usage scenario:
– 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
• Challenges in mobile usage scenario:
– 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)
- 26. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash
Mistake #6: Using Too Much Screen for Navigation, Promos
• In desktop usage scenario:
– On larger screen user can see all main and sub navigation
– User can see more topics of interest lower on page
• Challenges in mobile usage scenario:
– 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
- 27. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash
Mistake #7: Making It Difficult to Contact You
• In desktop usage scenario:
– User can easily see phone, chat, email options
– Most users know where to find them (header, footer)
• Challenges in mobile usage scenario:
– 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 #
- 28. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash
Mistake #8: Using Too Many or Large Images
• In desktop usage scenario:
– User has a much wider view of your site
– User has higher bandwidth (cable speed or higher)
• Challenges in mobile usage scenario:
– 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
- 29. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash
Mistake #9: Using Tiny Text, Buttons & Links
• In desktop usage scenario:
– User is typically seated, has larger screen
– User can easily scale up the text size
– User may be a bit more willing to read
• Challenges in mobile usage scenario:
– 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
- 30. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash
Mistake #10: Using Long-Winded Content
• In desktop usage scenario:
– User has larger screen, can better see context
– User often seated, feeling more patient
• Challenges in mobile usage scenario:
– 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
- 31. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ashCopyright © 2013, SiteTuners - All Rights Reserved. @tim_ash
Top 10
Must-do’s
- 32. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash
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
- 33. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash
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/
- 34. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash
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
- 35. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash
Example – Alaska Airlines
• Focused on:
– Top tasks
– Loading speed
• Uses:
– Light, minimal graphics
– Blue color for links
- 36. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash
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%!
- 37. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash
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
- 38. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash
Example – Chase Desktop Site
• Visible and direct login
• Prominent mortgage rate banner
• ‘Open checking account’ and ‘find credit
card’ entry points
Desktop Site
- 39. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash
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
- 40. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash
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
- 41. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash
Progressive Enhancement
At each ‘breakpoint’, offer
more content with adjusted
layout
Typical breakpoints:
• Phone
• Tablet (or mini tablet)
• Laptop / Desktop
- 42. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash
Example – NPR Desktop Site
• Exposes all main navigation,
search field and ‘support’
Calls-to-Action
• Shows dual branding
- 43. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash
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
- 44. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash
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’)
- 45. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash
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
- 46. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash
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)
- 47. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash
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)
- 48. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash
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)
- 49. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash
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)
- 50. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash
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
- 51. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash
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
- 52. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash
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)
- 53. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash
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)
- 54. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash
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’
- 55. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash
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
- 56. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash
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
- 57. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash
SAVE OVER $400•increaseyourrevenueandprofit
•generatemoreleads
•landmorecustomers
•boostsalesandpaidmemberships
•maximizeyourmarketingROI
RioAll-suitesHotel &Casino
LasVegas-May18-19, 2016
- 58. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ash
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
- 59. Copyright © 2015, SiteTuners – All Rights Reserved. #INBOUND15 #CRO @tim_ashINBOUND15