Mobile Login
Best Practices
INTRODUCTION
“Mobile First” and “Mobile Only”
are gaining more and more traction as mobile traffic
continues to earn an increasing percentage of
overall traffic. A recent comScore report showed
that consumers now spend
37% of their time
online on mobile devices
. Tracking and attributing
customer engagement on mobile devices can
be problematic, especially in native apps where
cookies are useless and many traditional methods
for tracking individuals activity are rendered
ineffective. In iOS, Android and other native app
environments, user registration and subsequent
login is the most effective way to connect a user in
a mobile app to your stored identity and associated
data for that user.
THE IMPORTANCE OF OPTIMIZED MOBILE
REGISTRATION AND LOGIN
Mobile registration and login have obvious benefits, like collecting useful customer data such as name and email address and smoothing subsequent conversion points in the customer journey, like checkout, by already having data on-hand. This, however, is only the beginning.
Marketers are encountering problems establishing a unified view of a unique customer caused by the fragmentation of tools and storage of information about customers. The solution is called Marketing Continuity: a continuity of experiences for a user as they interact with your brand across different devices, channels and touchpoints, as well as a continuity of the marketer’s view of each unique customer across her business and marketing systems. The first big steps to achieving this continuity are to know the user everywhere, and then connect your data about that user on the back end. Optimizing mobile login and encouraging a logged-in state can solve for the former—even across devices and within mobile apps—where cookies are useless. Tying the data together on the back end can be simplified by a customer profile management solution that stores user data in a single, central profile used throughout your marketing and business systems.
Mobile Guiding Principles
THE FOUR
OF MOBILE LOGIN
Before delving into specific best practices it’s important to explore the general guiding
principles that should be kept in mind while planning out your mobile experiences.
Everyone has different objectives and target audiences while building for mobile —we
can’t assume that there’s a “one-size fits all” solution—but the following principles are
universal and can help guide your thinking around questions that pop up.
1
LESS IS
MORE
Mobile users are less tolerant of barriers and hurdles to their experiences. For example, typical mobile conversion rates for checkout are a meager 3%, compared to 28% on a desktop. Even if you’re not in retail, it’s easy to understand that there are transactions that more mobile users would be willing to complete if it was simply easier to do so! Fewer is better in terms of how many actions or taps are required to accomplish anything, and you should strive to simplify, minimize and reduce your requirements for user input whenever possible.
If you’re having trouble determining what can be removed and what can’t, try narrowing your core goals for the experience and strip away anything that distracts. For example: Is it mission-critical to know a customer’s zip code immediately? Or is it more valuable to get her to create an account, capture her email, and be able to uniquely market to her? Perhaps you can request a zip code on a subsequent visit. Ultimately, you need to ask what is most important to you, and what can be put off until later in order to make a better experience at your front door. If it’s important to you that customers identify themselves as unique users by registering or logging in, then you must make it as easy as possible by removing distractions and making the call to action clear.
“Simplify,
minimize and
reduce your
requirements
for user input
whenever
Mobile Guiding Principles
2
UI AND
UX ARE
IMPORTANT
It seems like this shouldn’t have to be explicitly stated, as if everyone should know this already, but bad UI and UX are still a commonly seen problem with mobile registration flows. Consider some of these factors that present additional challenges on mobile compared to desktop, which are detailed on the following pages.
CHALLENGES IN MOBILE UX
1.
Mistake Intolerence
2.
Desktop-Oriented UX
3.
1 + 1 ≠ 2 With Mobile UX Problems
MISTAKE INTOLERENCE
Consumers are less tolerant of mistakes or inefficiencies in
compressed spaces where they don’t have the precision of a
mouse or trackpad, and don’t have the speed and ease of a
QWERTY keyboard.
TYPE A LOT HERE
OOPS! TRY AGAIN.
12:55 PM Timothy Smith [email protected] ******* *******
DESKTOP-ORIENTED UX
On mobile, all of these things take more effort and
represent higher barriers:
•
Going back a screen
•
Having multiple programs visible at once
•
Switching between tabs
•
Copying and pasting
THIS IS NOT A DESKTOP. 12:55 PM COPY SCREEN1 SCREEN2 SCREEN3 TAB 3 TAB 2 TAB 1 → Challenges in Mobile UX
Mobile Guiding Principles
THE LOGIN BARRIER
Registration and login by definition add an extra step—
an intentional barrier—to the customer’s experience.
It’s your responsibility to make this intentional barrier as
easy to use and as unobtrusive as possible to minimize
abandonment and frustration.
Be vigilant about creating the best possible experience
and make every effort not to compromise.
1 + 1 ≠ 2 WHEN IT COMES TO
PROBLEMS WITH MOBILE UX
Consumers do not perceive UX problems additively. Every
additional hardship multiplies the pain of the experience,
and a few seemingly small problems in a row can make
an otherwise well-architected app unusable or drive
conversions into the basement.
12:55 PM
PROBLEM ONE
I CAN’T HANDLE ANY MORE PROBLEMS. I WANT TO THROW THIS PHONE OUT THE WINDOW, MOVE TO THE COUNTRY AND LIVE OFF THE LAND.
12:55 PM
LOGIN
Mobile Login Best Practices
3
FINGERTIPS
ARE BIG
It seems ridiculous to have to say this, but too many apps are still cramming things together, forcing text links rather than buttons or
delineated spaces, or just making things too generally cluttered together for the small screen. At the risk of stating the obvious, our fingertips aren’t getting any smaller. Avoid using text links when buttons or delineated spaces make for a better UI, and try to keep fingers—not cursors— in mind when designing interfaces. Avoid clutter, and weigh every addition to your screen or navigation against ease of use.
12:55 PM
BEST-OF-BREED
MINDSHARE
Holistically generate B2B testing procedures. Globally cloudify economically sound outsourcing. Continually restore
interdependent bandwidth. Uniquely leverage other's interdependent action items. Objectively provide access to technically sound initiatives. Assertively brand stand-alone expertise. Distinctively optimize prospective networks. Fungibly predominate resource maximizing users. Energistically embrace granular quality vectors.
Now that’s a catalyst for change.
GET BENEFITS
Your Email Address Your Name
Mobile Login Best Practices
4
PROVIDE
VALUE
There must be a value exchange for people to adopt and continue to use your app, and this is pronounced if you want them to register with personal information. It’s your job to identify the value you can offer, provide that value, and clearly articulate it at the point of registration to encourage conversion.
12:55 PM
REASONS TO
REGISTER
1 Faster login with
social
2 Sync your saved
preferences by logging in 3 Access to mobile-only offers and discounts
SIGN UP
MOBILE
BEST PRACTICES
Guiding principles are well and good, but you’re here for a checklist of deployable, dependable mobile best practices. Well, you’re in luck. We’ve got seven for you:
1. Use On-Device Credentials 2. One-Time Login
3. Follow UX and UI Best Practices
4. Identify and Communicate Value Exchanges Clearly 5. Gather Data Progressively
Mobile Login Best Practices
1
USE ON-DEVICE
CREDENTIALS
Several identity providers store profile information on the device at the OS level in both iOS and Android. This means that social login for these identity providers can be extremely smooth and seamless, leveraging the information stored on the device rather than rendering the social network permission screen and loading a separate web page from your mobile app. Most people access social networks through native apps (like the
Facebook app or the Twitter app) while on their devices, not by going to facebook.com or twitter.com in their web browsers. This behavior means they are not typically logged into those networks in their mobile web browsers, often leading to an extra step to the social login process by requiring consumers to input their social network credentials via a web permission screen.
By leveraging credentials that are
already stored on-device your app can
authenticate consumers faster, and with
fewer steps.
2
ONE-TIME
LOGIN
Part of a good login experience is never
having to do it again! Registration and
login should occur the first time you
launch the app, but never again.
There are exceptions if the customer is granting additional permissions, or performing a sensitive action like payment authorization or email change where it may make sense to require a PIN confirmation or re-entering of the password. However, these cases are not for login, but rather for confirmation the current user is indeed the authorized user, and not someone who is using a lost or stolen mobile device without permission. Persisting sessions forever, or for very, very long periods of time is acceptable. There is no need to expire the session because sharing phones is unlikely, and customers are usually more concerned about losing their phones than they are about losing the password to your site.
Mobile Login Best Practices
3
UX AND
UI BEST
PRACTICES
BE FRUGAL WITH
YOUR COPY
Avoid excessive text blocks that crowd the screen and force additional scrolling.
12:55 PM
LOGIN
INSTRUCTIONS
FIRST
12:55 PMRegistration
Your profile information will never be shared with anyone. Creating an account will make it possible for you to save your activity and streamline purchases.
First Name Last Name Birthdate Month Email Password Confirm Password Submit Year Day
UX AND
UI BEST
PRACTICES
OPTIMIZE FIELD
SIZE FOR MOBILE
Anything a user is supposed to be able to tap should be big enough to tap while keeping screen dimensions in mind. There’s no excuse for copy or fields that are falling off the screen. It should also be responsive, and designed to handle device portrait and landscape modes.
12:55 PM
Your billing account number is located on the corner of your bill.
CableCompany billing account number
cablecompany
John Doe
Enter the street address where your service is being hooked up.
12:55 PM
Your billing account number is located on the corner of your bill.
CableCompany billing account number
cablecompany
John Doe
Enter the street address where your service is being hooked up.
Mobile Login Best Practices
REQUIRE LESS DATA FOR
ACCOUNT CREATION
The registration experience can be vastly improved by stripping it down. Requiring the minimum viable amount of data required for account creation frees the user from filling out fields that you don’t really need, but seem like big barriers in their experience.
UX AND
UI BEST
PRACTICES
ELIMINATE
NONESSENTIAL
USER INPUT
Your customers should be typing as little as possible. Here are a few ways to reduce the amount of
input required.
1
First Name Last Name Birthdate Month Email Address City Phone Number Gender Newsletter Preferences Offers Select Year Day First Name Last Name Email→ Eliminate Nonessential User Input Lisa Smith Birthdate Feb [email protected] Gender Female 1981 08
Login with Facebook
PROFILE DATA PRE-POPULATION
One of the benefits of social login is that information like a users’ name, email, gender and more can be grabbed from the social profile and pre-entered into their entry fields for your app. This is valuable time and typing that the customer doesn’t have to worry about anymore.
UX AND
UI BEST
PRACTICES
2
CUS
TOMER PROFILE
ACCEPT DATA WITHOUT PRE-POPULATION
Identify fields, like gender or birthday, that you feel comfortable accepting without showing them to your customer for manual confirmation. Removing these from a confirmation step reduces the number of fields a user has to review and eases their perception of how many steps they must go through. It also allows for a screen that is much more streamlined. This data can always be edited by the customer on their profile page at a later time without forcing the review to occur during registration.
3
Lisa Smith [email protected] Lisa SmithActual Collected Data Confirmation Form
[email protected] Birthdate Feb Gender Female 1981 08
CUS
TOMER PROFILE
Mobile Login Best Practices
→ Eliminate Nonessential User Input
UX AND
UI BEST
★
COMPETITION
ENTRY REQUEST
Lisa Smith
I want to join because
I
12:55 PM
END KEYBOARD
BULLYING!
Keyboards can be bullies, covering up active fields. Make sure your UI responds to where the keyboard appears and keeps active areas visible for the user.
→ Eliminate Nonessential User Input
UX AND
UI BEST
Mobile Login Best Practices
4
IDENTIFY AND
COMMUNICATE
VALUE EXCHANGES
CLEARLY
Craft clear and concise messaging about why taking the time to register is worthwhile, and (if it suits your business) why social login will make it painless. This should be presented the first time the app is launched, within your app store descriptions, or even on loading screens during app setup. What are some typical reasons to login or create account? They can be very different than the web!
1. An easier, faster experience with social login
2. The app will remember you for next time (and the things you did, saved, etc)
3. Sync with your account preferences or permissions (from existing account or desktop)
4. Access to exclusive content on mobile 5. Seamless commenting or messaging
6. Complete purchases (if your credit card is already on an existing account)
7. Personalized recommendations
8. Special offers, discounts or promotions 9. Easier to enter contests or giveaways
5
GATHER DATA
PROGRESSIVELY
Ask for what you need, when you need it. You can improve registration conversions by reducing the amount of work the customer has to do, but that often means giving up some data points you might like to have. But you don’t have to give them up forever! Just at first. Try lowering barriers to entry and maximizing initial conversion, then you can craft experiences that encourage registered users to share more about themselves or enable additional permissions. Progressive profiling, as it’s called, helps build a much more robust customer data set over time.
Here are a few ways you can pursue additional
information after initial registration:
1. Present an interstitial screen when a user moves to other areas of the app
2. Present additional requests at the start of future app visits
3. Gather from the desktop also. Now that the customer is registered on mobile, you can sync elements of their profile between their devices. Additional data collected to their profile on the desktop is just as good as getting it on mobile (and vice versa, of course)!
Mobile Login Best Practices
GATHER DATA
PROGRESSIVELY
Always pursue relevance.
Customers are much more likely to provide the information you’re requesting if you can show that it’s related to actions they are trying to perform in the app at the time. For example, if a customer clicks on a button you’ve provided to subscribe to a newsletter, it might be a good time to ask them to visit their profile and manage other email settings or subscribe to other newsletters.Look for opportunities to make use of in-app functions as well as device functions (e.g. push notifications and access to Contacts/Photos on the device) to explore what value propositions it makes sense for you to offer in relation to the service your app provides.
6
CROSS-APP
SINGLE SIGN-ON
Make sure that if your customers tend to have multiple of your apps on a single device, that those apps can talk to each other to support on-device cross-app single sign-on.
If a customer is logged in to
one app, when she visits other sibling apps they can pull identity from the first app so that the customer is already logged in when the other apps launch. You can see this in action with Amazon’s Android apps—across Kindle, Amazon Mobile, and Amazon MP3.
Mobile Login Best Practices
7
NATIVE TO HTML
SINGLE SIGN-ON
Ensure single sign-on works between native app components and HTML components: more and more apps are using a hybrid architecture, where there is a native app layer, and content within the app is populated
through HTML, rather than a web service. Quora is a good example of this. The app size is tiny on the device, but requires an internet
connection to call and populate the content. With this approach the user’s credentials must move from the SDK to the HTML layer seamlessly within the app.
CONCLUSION
There’s no going back.
Mobile devices are giving more people more access to more
information than at any other time in human history. Get in
front of the wave by not only optimizing your sites, apps and
experiences for mobile, but by optimizing the registration,
login and identity management elements as well. As more of
your customers interact with you on their phones and tablets
(and hey, let’s even throw phablets in there!), connecting those
interactions to unique customers will be critical to success.
This is how you can turn what has been a more anonymous
interaction into a relationship with a customer you know, whose
needs you are meeting, and who appreciates the experience
you have worked hard to offer.
