nailing mobile ux for better customer experiences

@Suzzicks MobileMoxie#SMXMunich

Mobile Usability – SMX Munich

Cindy Krum, CEO MobileMoxieSMX Munich

Mobile UX


What is UX?


Intro


“Multi-Platform” Means…Device Operating System Browser/ Application


Mobile Users Expect

To get what they want -

FAST.

57% 30%

Will abandon your website if it takes more than 3 seconds to load.

Will abandon a purchase transaction if the shopping cart isn't optimized for mobile.


They have a Lower

Tolerance for Error


“What is the Mobile Experience?”What is the Best Mobile UX?


Great Mobile UX Means:



Fast



Fast

Readable



Fast

Readable

Cross Device



Fast

Readable

Cross Device

Localized & Personalized



Fast

Readable

Cross Device


Secure & Private


PageSpeed is Only One Part of Fast UX

Fast Loading

Fast Form Completion

Fast Checkout


http://www.webpagetest.org/



Fast Loading


Fast Checkout


Optimize for Fast Form Completion


Allow Users to “AutoComplete”

<input type="email" name="customerEmail" autocomplete="email"/>



Fast Loading


Fast Checkout


1-Click Checkout Great for Repeat, Logged-In

Customers

Reduces Friction, ESPECIALLY on mobile (fingers work harder to type on mobile)

Encourages Impulse Buying


Faster Checkout with Amazon or PayPal Services


Android Pay or Apple Pay



Fast

Readable

Cross Device


Secure & Private


Easy to Read

SchemaViewPort SettingsFont SizeProper Banners


Schema Makes Google Search More Useable


Easy to Read



You probably can’t read this

text. It says this page

has no Viewpor

t specifie

d.


Easy to Read



Specify Font Sizesbody { font-size: 16px;}

.small { font-size: 12px; /* 75% of the baseline */}

.large { font-size: 20px; /* 125% of the baseline */}


Easy to Read



Interstitials

Google Plus Study – July 2015:

9% clicked “Get App”

69% abandoned page (didn’t go to app OR website)


Interstitials

Google Plus Study – July 2015:

9% clicked “Get App”

69% abandoned page (didn’t go to app OR website)

They Kind of Suck


App Install Interstitials VS. App Install Banners

Mobile Friendly!NOT Mobile Friendly!


App Interstitial ≠ No Mobile Friendly Tag


Getting Around Interstitials for Mobile Friendliness

App Banners

Post-Login Interstitials

Bit.ly Interstitials

Robots.txt Solution


iOS “Smart App Banners”

App Not Installed:

App Installed:


Chrome “Native App Banners” (iOS & Android)

"prefer_related_applications": true,"related_applications": [ { "platform": "play", "id": "com.google.samples.apps.iosched" }]

Requirements:• Have a web app manifest file with:

• a short_name• a name (used in the banner prompt)• a 144x144 png icon - icon declaration’s should incl. a mime type of image/png• a related_applications object with information about the app

• Be served over HTTPS• Be visited by the user twice, over 2 separate days during the course of 2 weeks.

https://developers.google.com/web/fundamentals/engage-and-retain/app-install-banners/

https://developers.google.com/web/fundamentals/security/encrypt-in-transit/


Bitly Redirectors


Setting Up Bitly InterstitialsThese are hosted

by Bitly, so Google will not see them!

Perfect for when you want

interstitials to show up for your social or email referrals, but don’t want them on your organic search

results!


Bitly Redirectors


Don’t Do Anything Blatantly DeceptiveJohn Mueller is Watching

You“We're considering maybe taking manual action and saying well we need to flag this as an interstitial even if it isn't flag from our algorithms.” -John



Fast

Readable

Cross Device


Secure & Private


Works on All Platforms

Translates to Mobile EmailSocial Web & Apps


Mobile-Email Usability

Image: https://litmus.com/blog/the-ultimate-guide-to-preview-text-support

Apple Mail Gmail (Android) Windows Phone Mail




Content displays Differently based on

OS & Email Application




<div style="display:none;font-size:1px;color:#333333;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;"> Insert preview text here. </div>

Define Custom Preview Text:

@meladorriJustine Jordan


Works on All Platforms

Translates to Mobile EmailSocial Web & Apps


WebApp App WebDiffere

ntImageLayout


WebApp App Web

Different

ButtonLayout

Different

ImageLayout


WebApp App Web

Different

Content

Different

ButtonLayout

Different

ImageLayout


Opening a Link on Android FacebookAppWeb


Opening a Link on iOS Facebook


Opens in

Twitter Browse

r

Twitter Browser Broke

the Meta-

ViewPort

Settings for

Page

No help

for the Android Folks



Fast

Readable

Cross Device


Secure & Private



Permission & MessagingLocation-Specific Landing PagesPersonalization


Have Clear Error Messaging


Have Clear Error MessagingNon Specific

“Error Code” means nothing to site visitors

“Ok” is a non-solution to the problem (like ‘dismiss’)


Have Clear Error MessagingNon Specific

“Error Code” means nothing to site visitors

“Ok” is a non-solution to the problem (like ‘dismiss’)

Explains the problem in Fast, simple English

“Try to Refresh” explains what pushing the button will do


Better Permissions Messaging in Android Apps

Google Adds Value with Step #1

The explainer messaging is clear and looks like On-boarding instead of an interruption.

It makes it easy to say “YES!” to #2


Better Control of Language Messaging in

Chrome


Mobile Devices Share Location


Mobile Location Messaging

Web App


Location Messaging in iOS Apps

Specify Custom Explainer text inYour iOS App’s Info.Plist


Websites on iOS SafariDon’t Get Explainer TextSo Don’t Be Creepy...


So Don’t Be Creepy...

Websites on iOS SafariDon’t Get Explainer Text


Location Messaging in Android AppsOn Android, asking permission is a 2-step process:

1) Customize your request to the user and explain what you want.

2) The Android OS ask for permission - You can’t customize that part


“Google search interest in 'near me' has increased 34 times since 2011 and nearly doubled since last year. The vast majority come from mobile — 80% in Q4 2014.”

-Matt Lawson, Google

Mobile is the Local Battle Field


Location-Specific Landing Pages

Impact Website UX

Impact Google Search UX


Personalized UX



Fast

Readable

Cross Device


Secure & Private


Security & Privacy Conscious

Trust SymbolsHTTPS


Trust Symbols


Trust Symbols Improve Form Completion

Case Study!

http://www.bluefountainmedia.com/blog/verisign-seal-increase-conversions/

42%Increase in

Form Conversions!




Security & Privacy Conscious

Trust SymbolsHTTPS


HTTPS During WHOLE Transaction ProcessCart Checkout

Shipping


Show Security At ALL Steps

If cart is not

HTTPS, you may

lose conversions in the

cart before

they get to the

secure checkout

Cart Checkout – Sign In


Be Careful Of Redirects That Impact Security Certificates