nailing mobile ux for better customer experiences
TRANSCRIPT
@Suzzicks MobileMoxie#SMXMunich
Mobile Usability – SMX Munich
Cindy Krum, CEO MobileMoxieSMX Munich
Mobile UX
@Suzzicks MobileMoxie#SMXMunich
What is UX?
@Suzzicks MobileMoxie#SMXMunich
Intro
@Suzzicks MobileMoxie#SMXMunich
“Multi-Platform” Means…Device Operating System Browser/ Application
@Suzzicks MobileMoxie#SMXMunich
@Suzzicks MobileMoxie#SMXMunich
@Suzzicks MobileMoxie#SMXMunich
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.
@Suzzicks MobileMoxie#SMXMunich
They have a Lower
Tolerance for Error
@Suzzicks MobileMoxie#SMXMunich
“What is the Mobile Experience?”What is the Best Mobile UX?
@Suzzicks MobileMoxie#SMXMunich
Great Mobile UX Means:
@Suzzicks MobileMoxie#SMXMunich
Great Mobile UX Means:
Fast
@Suzzicks MobileMoxie#SMXMunich
Great Mobile UX Means:
Fast
Readable
@Suzzicks MobileMoxie#SMXMunich
Great Mobile UX Means:
Fast
Readable
Cross Device
@Suzzicks MobileMoxie#SMXMunich
Great Mobile UX Means:
Fast
Readable
Cross Device
Localized & Personalized
@Suzzicks MobileMoxie#SMXMunich
Great Mobile UX Means:
Fast
Readable
Cross Device
Localized & Personalized
Secure & Private
@Suzzicks MobileMoxie#SMXMunich
PageSpeed is Only One Part of Fast UX
Fast Loading
Fast Form Completion
Fast Checkout
@Suzzicks MobileMoxie#SMXMunich
@Suzzicks MobileMoxie#SMXMunich
http://www.webpagetest.org/
@Suzzicks MobileMoxie#SMXMunich
PageSpeed is Only One Part of Fast UX
Fast Loading
Fast Form Completion
Fast Checkout
@Suzzicks MobileMoxie#SMXMunich
Optimize for Fast Form Completion
@Suzzicks MobileMoxie#SMXMunich
Allow Users to “AutoComplete”
<input type="email" name="customerEmail" autocomplete="email"/>
@Suzzicks MobileMoxie#SMXMunich
PageSpeed is Only One Part of Fast UX
Fast Loading
Fast Form Completion
Fast Checkout
@Suzzicks MobileMoxie#SMXMunich
1-Click Checkout Great for Repeat, Logged-In
Customers
Reduces Friction, ESPECIALLY on mobile (fingers work harder to type on mobile)
Encourages Impulse Buying
@Suzzicks MobileMoxie#SMXMunich
Faster Checkout with Amazon or PayPal Services
@Suzzicks MobileMoxie#SMXMunich
Android Pay or Apple Pay
@Suzzicks MobileMoxie#SMXMunich
Great Mobile UX Means:
Fast
Readable
Cross Device
Localized & Personalized
Secure & Private
@Suzzicks MobileMoxie#SMXMunich
Easy to Read
SchemaViewPort SettingsFont SizeProper Banners
@Suzzicks MobileMoxie#SMXMunich
Schema Makes Google Search More Useable
@Suzzicks MobileMoxie#SMXMunich
Easy to Read
SchemaViewPort SettingsFont SizeProper Banners
@Suzzicks MobileMoxie#SMXMunich
You probably can’t read this
text. It says this page
has no Viewpor
t specifie
d.
@Suzzicks MobileMoxie#SMXMunich
You probably can’t read this
text. It says this page
has no Viewpor
t specifie
d.
@Suzzicks MobileMoxie#SMXMunich
You probably can’t read this
text. It says this page
has no Viewpor
t specifie
d.
@Suzzicks MobileMoxie#SMXMunich
You probably can’t read this
text. It says this page
has no Viewpor
t specifie
d.
@Suzzicks MobileMoxie#SMXMunich
Easy to Read
SchemaViewPort SettingsFont SizeProper Banners
@Suzzicks MobileMoxie#SMXMunich
Specify Font Sizesbody { font-size: 16px;}
.small { font-size: 12px; /* 75% of the baseline */}
.large { font-size: 20px; /* 125% of the baseline */}
@Suzzicks MobileMoxie#SMXMunich
Easy to Read
SchemaViewPort SettingsFont SizeProper Banners
@Suzzicks MobileMoxie#SMXMunich
Interstitials
Google Plus Study – July 2015:
9% clicked “Get App”
69% abandoned page (didn’t go to app OR website)
@Suzzicks MobileMoxie#SMXMunich
Interstitials
Google Plus Study – July 2015:
9% clicked “Get App”
69% abandoned page (didn’t go to app OR website)
They Kind of Suck
@Suzzicks MobileMoxie#SMXMunich
App Install Interstitials VS. App Install Banners
Mobile Friendly!NOT Mobile Friendly!
@Suzzicks MobileMoxie#SMXMunich
App Interstitial ≠ No Mobile Friendly Tag
@Suzzicks MobileMoxie#SMXMunich
Getting Around Interstitials for Mobile Friendliness
App Banners
Post-Login Interstitials
Bit.ly Interstitials
Robots.txt Solution
@Suzzicks MobileMoxie#SMXMunich
iOS “Smart App Banners”
App Not Installed:
App Installed:
@Suzzicks MobileMoxie#SMXMunich
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.
@Suzzicks MobileMoxie#SMXMunich
Bitly Redirectors
@Suzzicks MobileMoxie#SMXMunich
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!
@Suzzicks MobileMoxie#SMXMunich
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!
@Suzzicks MobileMoxie#SMXMunich
Bitly Redirectors
@Suzzicks MobileMoxie#SMXMunich
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
@Suzzicks MobileMoxie#SMXMunich
Great Mobile UX Means:
Fast
Readable
Cross Device
Localized & Personalized
Secure & Private
@Suzzicks MobileMoxie#SMXMunich
Works on All Platforms
Translates to Mobile EmailSocial Web & Apps
@Suzzicks MobileMoxie#SMXMunich
Mobile-Email Usability
Image: https://litmus.com/blog/the-ultimate-guide-to-preview-text-support
Apple Mail Gmail (Android) Windows Phone Mail
@Suzzicks MobileMoxie#SMXMunich
Mobile-Email Usability
Image: https://litmus.com/blog/the-ultimate-guide-to-preview-text-support
Content displays Differently based on
OS & Email Application
@Suzzicks MobileMoxie#SMXMunich
Mobile-Email Usability
Image: https://litmus.com/blog/the-ultimate-guide-to-preview-text-support
<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
@Suzzicks MobileMoxie#SMXMunich
Works on All Platforms
Translates to Mobile EmailSocial Web & Apps
@Suzzicks MobileMoxie#SMXMunich
WebApp App WebDiffere
ntImageLayout
@Suzzicks MobileMoxie#SMXMunich
WebApp App Web
Different
ButtonLayout
Different
ImageLayout
@Suzzicks MobileMoxie#SMXMunich
WebApp App Web
Different
Content
Different
ButtonLayout
Different
ImageLayout
@Suzzicks MobileMoxie#SMXMunich
Opening a Link on Android FacebookAppWeb
@Suzzicks MobileMoxie#SMXMunich
Opening a Link on iOS Facebook
@Suzzicks MobileMoxie#SMXMunich
Opens in
Twitter Browse
r
Twitter Browser Broke
the Meta-
ViewPort
Settings for
Page
No help
for the Android Folks
@Suzzicks MobileMoxie#SMXMunich
Great Mobile UX Means:
Fast
Readable
Cross Device
Localized & Personalized
Secure & Private
@Suzzicks MobileMoxie#SMXMunich
Localized & Personalized
Permission & MessagingLocation-Specific Landing PagesPersonalization
@Suzzicks MobileMoxie#SMXMunich
Have Clear Error Messaging
@Suzzicks MobileMoxie#SMXMunich
Have Clear Error MessagingNon Specific
“Error Code” means nothing to site visitors
“Ok” is a non-solution to the problem (like ‘dismiss’)
@Suzzicks MobileMoxie#SMXMunich
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
@Suzzicks MobileMoxie#SMXMunich
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
@Suzzicks MobileMoxie#SMXMunich
Better Control of Language Messaging in
Chrome
@Suzzicks MobileMoxie#SMXMunich
Mobile Devices Share Location
@Suzzicks MobileMoxie#SMXMunich
Mobile Location Messaging
Web App
@Suzzicks MobileMoxie#SMXMunich
Location Messaging in iOS Apps
Specify Custom Explainer text inYour iOS App’s Info.Plist
@Suzzicks MobileMoxie#SMXMunich
Websites on iOS SafariDon’t Get Explainer TextSo Don’t Be Creepy...
@Suzzicks MobileMoxie#SMXMunich
So Don’t Be Creepy...
Websites on iOS SafariDon’t Get Explainer Text
@Suzzicks MobileMoxie#SMXMunich
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
@Suzzicks MobileMoxie#SMXMunich
Localized & Personalized
Permission & MessagingLocation-Specific Landing PagesPersonalization
@Suzzicks MobileMoxie#SMXMunich
“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
@Suzzicks MobileMoxie#SMXMunich
Location-Specific Landing Pages
Impact Website UX
Impact Google Search UX
@Suzzicks MobileMoxie#SMXMunich
Localized & Personalized
Permission & MessagingLocation-Specific Landing PagesPersonalization
@Suzzicks MobileMoxie#SMXMunich
Personalized UX
@Suzzicks MobileMoxie#SMXMunich
Great Mobile UX Means:
Fast
Readable
Cross Device
Localized & Personalized
Secure & Private
@Suzzicks MobileMoxie#SMXMunich
Security & Privacy Conscious
Trust SymbolsHTTPS
@Suzzicks MobileMoxie#SMXMunich
Trust Symbols
@Suzzicks MobileMoxie#SMXMunich
Trust Symbols Improve Form Completion
Case Study!
http://www.bluefountainmedia.com/blog/verisign-seal-increase-conversions/
42%Increase in
Form Conversions!
@Suzzicks MobileMoxie#SMXMunich
Security & Privacy Conscious
Trust SymbolsHTTPS
@Suzzicks MobileMoxie#SMXMunich
HTTPS During WHOLE Transaction ProcessCart Checkout
Shipping
@Suzzicks MobileMoxie#SMXMunich
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
@Suzzicks MobileMoxie#SMXMunich
Be Careful Of Redirects That Impact Security Certificates