nailing mobile ux for better customer experiences

@Suzzicks MobileMoxie#SMXMunich

Mobile Usability – SMX Munich

Cindy Krum, CEO MobileMoxieSMX Munich

Mobile UX

What is UX?

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

Mobile Users Expect

To get what they want -

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:

Readable

Cross Device

Readable

Cross Device

Localized & Personalized

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”

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

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

has no Viewpor

t specifie

has no Viewpor

t specifie

has no Viewpor

t specifie

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.

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!

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

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

Twitter Browser Broke

the Meta-

ViewPort

Settings for

No help

for the Android Folks

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

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

nailing mobile ux for better customer experiences

Mobile

service blueprinting for convergent channel experiences - ux...

what is ux really? how do we create delightful experiences?

crisis ux: designing experiences for emergent situations -...

beyond "ux" – creating connected experiences

music experiences - mobile ux london

lean ux: stop with the deliverables and start making...

wearable user experiences: the new world of...

gbn patriot pallet nailing system.€¦ · nailing system....

designing wearable experiences ux week 2015

designing wearable experiences ux lisbon 2015

closure experiences at ux salon

uxsg2014 lightning talks - ux in gaming: building immersive...

requirements are hypotheses: my experiences with lean ux

nkhceo.irnkhceo.ir/wp-content/uploads/2016/11/excavation-compatibility.pdf ·...

ux mind games: the secrets of addictive digital experiences...

design thinking for accessible user experiences - ux...

antizipatory experiences - die zukunft der ux?

holistic ux: designing ubiquitous multi-device experiences

ux week 08 memorable service experiences

ux strat usa, jim kalbach, "mapping experiences with...