a framework for mobile conversion - unbounce#pubcon #cro @tim_ash radically reduce features &...

Copyright © 2015, SiteTuners – All Rights Reserved. #CTAconf #CRO @tim_ashCopyright © 2013, SiteTuners - All Rights Reserved. @tim_ash

A Framework For Mobile Conversion !

Tim Ash, CEO - SiteTuners !

Call To Action Conference Vancouver – September 14, 2015


About SiteTuners

• San Diego based strategic 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

The Big Picture

#Pubcon #CRO @tim_ash

The Train Has Left The Station


We spend most of our

digital media time on smartphones

!@tim_ash #CTAconf #CRO


Frequently Used


Smartphones are touched

130 times per day



91% of millennials

admit to using their phones while seated in the bathroom stall

Always Present

Copyright © 2015, SiteTuners – All Rights Reserved. #CTAconf #CRO @tim_ashMobile Email Is The Killer

App


70% of all emails are first opened on mobile



We live in a multi-screen world


The Mobile Visitor


We need to be responsive to the context


• Often in motion • Multi-tasking • Using with one hand

• Using outside • Impatient and interrupted

Physical Environment


Time Sensitive


Short Burst


Location-specific


A Common Knee-jerk Response


We Need A “Responsive” Website!


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


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


Responsive-light one-page websites suck!



A Mobile Conversion Framework


Clean-sheet Redesign for Mobile


Overstuffing is a result of lazy packing


Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away. !Antoine de Saint-Exupery


Example – Chase Desktop Site

• Visible and direct login

• Prominent mortgage rate offer

• ‘Open checking account’ option


Example – Chase Mobile Site

• Login is not direct type-in

• New tasks for mobile visitors – Contact Us – Find ATM/Branch !

• “Open checking account” option is removed

!!!!


Use Progressive Enhancement


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


Location Awareness


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)


Use Proper Proportions


Too Much Screen Used for Promos


Good Navigation-to-content ratio

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


Large Target Clickable Areas

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


Perceived Site Speed Is Critical


Get Rid of Images

• Focused on: – Top tasks – Loading speed

• Uses: – Light, minimal graphics – Blue color for links


LukeW Image File Trick

Steps: 1. Double image dimensions 2. Set quality to zero (0) 3. Save as jpg or gif

!Typical effect: Reduces file size by 50%!


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 distraction


Make Phone Contact Easy

!


No phone number on Contact Us page


Example – Phone-call CTA


Drive Directly To Phone


Poof - there is no landing page!


Time to optimize your call response?


The best mobile landing page

may be your call center



SAVE OVER $400!

• increase your revenue and profit • generate more leads • land more customers • boost sales and paid memberships • maximize your marketing ROI

Register !

for only !

$797 limited time Rio All-suites Hotel & Casino

Las Vegas - May 18-19, 2016


Conversion Conference – Win A Free Pass or One of 15 Signed Books

!Email [email protected] with title “CTAconf” why you deserve to go to the conference.

http://www.amazon.com/Landing-Page-Optimization-Definitive-Conversions/dp/0470610123/










mailto:[email protected]







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


http://attentionwizard.com/











































































































http://conversionconference.com/



































































































































http://sitetuners.com/
































































































Appendix:

!

Mobile Conversion

Preparedness Checklist


Understand Mobile 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


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


Radically Reduce Features & Content

• The Problem: – Smartphone users need info fast – 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


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)


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’)


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


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


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/


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


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’


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


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)


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

a framework for mobile conversion - unbounce#pubcon #cro @tim_ash radically reduce features &...

Documents