Nailing Mobile UX for Better Customer Experiences

@Suzzicks MobileMoxie #SMXMunich
Mobile Usability – SMX Munich
Cindy Krum, CEO
MobileMoxie
SMX 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
Localized &
Personalized
Secure & Private

PageSpeed is Only One Part of Fast UX
Fast Loading
Fast Form Completion
Fast Checkout

http://www.webpagetest.org/

Optimize for Fast Form Completion

Allow Users to “AutoComplete”
<input type="email" name="customerEmail"
autocomplete="email"/>

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

Easy to Read
Schema
ViewPort Settings
Font Size
Proper Banners

Schema Makes Google Search More Useable

You
probably
can’t read
this text.
It says
this page
has no
Viewport
specified.

Specify Font Sizes
body {
font-size: 16px;
}
.small {
font-size: 12px; /* 75% of the baseline */
}
.large {
font-size: 20px; /* 125% of the baseline */
}

Interstitials
Google Plus Study – July 2015:
 9% clicked “Get App”
 69% abandoned page (didn’t go to
app OR website)

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 Interstitials
These 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!

Don’t Do Anything Blatantly Deceptive
“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

Works on All Platforms
Translates to Mobile Email
Social 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:hidd
en;">
Insert preview text here.
</div>
Define Custom Preview Text:
@meladorriJustine Jordan

WebApp App Web
Different
Image
Layout

WebApp App Web
Different
Button
Layout
Different
Image
Layout

WebApp App Web
Different
Content
Different
Button
Layout
Different
Image
Layout

Opening a Link on Android Facebook
AppWeb

Opening a Link on iOS Facebook

Opens
in
Twitter
Browser
Twitter
Browser
Broke
the Meta-
ViewPort
Settings
for Page

No help
for the
Android
Folks


Localized & Personalized
Permission & Messaging
Location-Specific Landing Pages
Personalization

Have Clear Error Messaging

Non Specific
“Error Code” means nothing
to site visitors
“Ok” is a non-solution to the
problem (like ‘dismiss’)

Non 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 in
Your iOS App’s Info.Plist

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

So Don’t Be Creepy..
Websites on iOS Safari
Don’t Get Explainer Text

Location Messaging in Android Apps
On 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

Security & Privacy Conscious
Trust Symbols
HTTPS

Trust Symbols

Trust Symbols Improve Form Completion
Case Study!
http://www.bluefountainmedia.com/blog/verisign-seal-increase-conversions/
42%
Increase in
Form
Conversions!

HTTPS During WHOLE Transaction Process

Show Security At ALL Steps
If cart is not
HTTPS, you
may lose
conversions
in the cart
before they
get to the
secure
checkout

Be Careful Of Redirects
That Impact Security
Certificates

Nailing Mobile UX for Better Customer Experiences

More Related Content

What's hot (20)

Viewers also liked (10)

Similar to Nailing Mobile UX for Better Customer Experiences (20)

More from MobileMoxie (13)

Recently uploaded (9)

Nailing Mobile UX for Better Customer Experiences