Jan 07 2014

UX Flows: How to Craft Effective Sign-ups

unnamed

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.

screenshot of Mint app

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.)

screenshot of Twitter

Twitter

screenshot of Facebook

Facebook

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.

screenshot of Medium

Medium is the biggest example right now. This approach works for them because it adds to the fluidity and attractiveness of their concept. Users can comment easily as the site aggregates their name and avatar from Twitter.

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.

screenshot of Pinterest

Pinterest

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.

screenshot of Keep

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.)

Buzzfeed screenshot

Buzzfeed

Meetup screenshot

Meetup

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.

Takeaways

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.

Tumblr screenshot

Tumblr uses one static background with the forms delightfully animating, which makes it feel like the user hasn’t had that long of a sign-up journey. In the last step, the “Almost Done” animates into “Done” as users type the text — what better way to make the step feel fun and easy?

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.”

Artsy's sign-up flow

The manageable chunks in Artsy’s form exude ease and simplicity.

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.
Square screenshot 1

Square screenshot 2

Square’s flow is simple and makes dealing with finances feel less complicated, but one potential problem is that the simplicity may make it feel less secure.

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.

Shopify screenshot

Shopify uses tooltips and the on-site messaging to give context and transparency.

Groupon screenshot

Groupon makes the process clear by allowing the next step to peek out. This offers the user an enticing hint and makes the process feel less daunting. Plus the steps are minimal, which makes signing up less burdensome.

Twitter screenshot

Twitter’s new sign-up flow uses onboarding within the sign-up flow to make sure users are clear on the product while they are signing up. (Onboarding is getting the user familiar with the product and often comes after sign-up. Stay tuned for a post on that one.) This approach makes it very clear what users are signing up for and most likely assures future engagement by users with new accounts.

In Conclusion

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 ;))

About the Author:

MK Cook is a UX designer at digital-telepathy who channels her boundless energy and curiosity toward designing killer interactions and interfaces. She’s also a bicycle commuter, gourmet pizza baker and wannabe bee-keeper. Find her on Twitter and Google+.

Leave a Response

3 Responses

  1. Jan 07 2014
    Jeffrey Samorano

    MK, Great post. It would be nice to hear some statistics or reasoning on when to use (or not to use) methods such as pop-ups, modal sign ups, peek-a-boo sign ups, etc.

    Also, isn’t DT Labs working on other methods for making sign ups more engaging? What’s the progress on that? What kind of studies are you guys performing that can glean some meaning on what works and what doesn’t?

    Thanks again!
    (and thank you for keeping bees, we need more bees)

  2. Jan 15 2014
    Brian Mireles

    I love this series! I look forward to more of these topics. Great stuff!