To work collaboratively with design partners (like us), you’ve got to talk the UX talk. That way, you can get the most out of your engagement (big words — yep, we’re doing this!). I want to make you an expert (or at least make you sound like one)!
UX Flows is a column about figuring out User Experience Design together. In this series we’ll look at some common user flows and break them down to really help you get on your UX design hat when you need it most (which is now).
Let’s start this thing off with a process that pops up (literally) many times in a user’s week: Sign-ups. What’s a sign-up flow? It’s signing up to create an account on a website or web application (it’s a huge first step for users!).
Today we’re going to focus on account creation, which gets users invested deeper in the experience of your website. (We’ll skip eCommerce account creation for now because that is more of a checkout experience. We’ll get to those hairy beasts in another post.)
To glean some tips, I went through the sign-up processes for websites that have no trouble getting users to sign up, and jotted down my feedback along the way.
First, here are the three main categories that sign-up flows tend to fall into…
1. Traditional: via Email
The most common and traditional mode of account creation asks for an email address and follows up with a confirmation. This approach can feel more secure for a user, especially when it comes to sensitive information, so it is often used with financial apps like Square, Stripe, and Mint.
The other two main uses of email sign-up are Facebook and Twitter — what I’ll call the “one ring to rule them all” social media platforms. Once you sign up for these, you can sign up for anything. (But we’ll get to that in the “social login” section.)
One thing to watch out for is how you ask for an email address and a username. In the MailChimp sign-up flow, users are asked for an email address and then prompted via username not the email address (which was previously in the same spot). It’s ideal to give users both options, but be careful not to confuse them!
2. New Kid in Town: Social Login
This simple sign-up flow prompts users to sign up via their social network — most commonly Facebook or Twitter. The social login approach is an attractive one stop shop. Getting into the app immediately becomes extremely easy. Plus, almost every product or service out there wants users to share the message on their own social media. This makes it way easier and is one reason why integrating social media is quickly becoming the norm.
However, this approach can be limiting. If you require a user to log in via social media, and they aren’t using that outlet of choice, they will not be able to sign up. Shawn, for example, doesn’t have a Facebook account, so this prohibited him from using sites like turntable.fm and used to prohibit him from Meetup and Spotify before they took a more hybrid approach. The solution is found in the third type of sign-up listed here: Providing users with the option to sign in with their email.
3. Hybrid/Flexible: Sign up However You Want
A hybrid approach between social login and via email is the most popular. This hybrid/flexible approach means allowing users to sign up however they want, using email and username or social media account. Buzzfeed, Pinterest, and Quora all take this approach.
Nicholas Carlson of Business Insider credits the success of Pinterest to their easy sign-up flow in an article he wrote in 2012, a big year for the company. Instead of bogging down users with forms, they let users start getting their hands in the product right away. Plus they make users feel like they are a valued member of The Babysitters Club. Many other companies have since followed suit, including Keep.
Most sites take an approach of putting more weight on the social sign-up, by listing social first or weighting it more heavily with the use of size or color. This may because of the data mining benefits, or it could be to get users engaged deeply in the experience. (I’m telling myself it’s the second one.)
As designers, we need to make the sign-up easy and ask for details later. As a user, this is my favorite approach because I’m a user that says “C’est la vie” about my information all being interconnected. It doesn’t scare me. But maybe I’m not your target audience and this approach maybe isn’t best for your brand. Maybe it’s not appropriate for your content either, if you have a financial app or an online storefront.
Sign-ups are touchy as hell — experience-wise, that is. The flow can be seamless and increase user engagement on your site. Or the flow can be annoying and keep users from converting. Let’s avoid annoying. I went through a ton of sign-up flows, so what did I glean from becoming an online account junkie?
Here are two main takeaways:
1. Less Steps
Keep the sign-up process as simple as is practical. Time is money; we all know that. If a user isn’t already familiar with a product — and driven to get to it at any cost — then an arduous process is going to deter folks from signing up. This usually means the less steps, the better.
Design decisions can help drive simplicity (e.g., labeling form fields to the right of the boxes instead of above for a shorter page and leaving plenty of white space). Over at eConsultancy, Graham Charlton provides tangible tips on approaching UI in his post, “12 Useful Tips for Web Form Optimisation.” He points out that while it’s ideal for forms to be shorter, you can’t always have your way. The key? Break the form into “manageable chunks and make them user friendly.”
Simplicity is great, as long as users know what they are signing up for and feel assured in the process. Which is where the “as is practical” clause comes in. Some sites that deal with sensitive information — like Square and Simple — are examples of simplicity that may or may not work for some users.
This problem could be solved without making it less beautiful. How about adding a security emblem or more explanation of why they are asking for a user’s social security number? And this leads us to our the next point about the importance of clarity.
Simplicity also means less work for users. Minimize the UX of sign-ups by using elements like short drop downs, pre-populated email forms, radio buttons, and delightful date pickers for removing the friction characteristic of many sign-up flows.
2. More Explanations & Hints
From clarity of design (like labeling form fields clearly), to communicating the steps of signing up, explanation is always key. Clear explanations translate to users as transparency, and transparency builds trust. That said, treat your users like the smart people they are, and don’t over-explain; find the right balance via user testing and common sense.
Besides keeping the steps minimal and the explanation adequate, look for ways to make the experience a little more delightful. And know that if you have a worthwhile product or service to offer, simplicity and explanation will trump a loud beg to sign up.
What are your thoughts on account creation processes? What flow do you want me research next? (Maybe it will be account deletion or unsubscribe because now I’m on account overload ;))