Sign up is where conversion goes to die.
Over the last few weeks I’ve been helping Shelby.tv conduct UX tests at the TechStars NYC office, and I have to say that the whole experience has been really illuminating. I’ve long revered the power of a great UX/UI for delivering on conversion, retention, and engagement, and this week really cemented that. I’ve become really passionate about UI/UX and want to distill everything I’ve learned so far so that you can use these techniques in your own applications.
Users are faced with more sites than they can possibly hope to sign up for. As a result, they have become extremely picky and time-sensitive. If they’re faced with your sign up form, you’ve generated some kind of interest. Now don’t screw it up. Remember – Sign up is where conversion goes to die.
Every minute they spend signing up for your site is a minute you’re competing against Facebook, Tumblr, and Twitter for attention. Since I’m competing with them right now for your attention, let’s get started.
Big Forms Are Giant Obstacles
I’m actually amazed you’re still reading this after seeing that form. Phew! If you try to make me fill out this form and your service doesn’t give me super powers then I’ll hate you forever.
"Keep it simple stupid." A sign up is a win for you, so make it painless.
Wunderlist does a fantastic job with this.
Get Them Excited
Wouldn’t you just love to sign up for this one? This beautiful sign up form from Matthew Skiles makes you want to hit the waves, even if you’ve never gone surfing before in your life.
Evoke Some Emotion
Emotion more often than not is what causes people to take action. Heroku is legendary in my book for incredible UI/UX. Notice how their gorgeous sign up page invokes a sense of peace and calm.
Remind Them Why They’re Signing Up
Foodzie does an awesome job of reminding you that you’re signing up for delicious gourmet food by using an immersive fullscreen background image.
Stand Out Through Design
Journnl’s sign up form takes it to the next level, creating a beautiful typographical experience that helps you understand the real product. Signing up is fun.
Handle Errors Gracefully
Jesse Stewart has an excellent example here on dribbble. Handling errors well is key to providing a clean and simple sign up process. Don’t flash a giant alert in the user’s face or reload the page, just give a simple inline hint as to what they need to correct.
Allow Sign Up Through Multiple Services
Shelby.tv (check it out if you haven’t yet, it’s awesome) does this exclusively. Allowing signup/login through 3rd party apps like Twitter and Facebook is the way to go. It allows you access to more information via their APIs and it also means one less password for your users to remember.
Provide Some Guidance
Directing the user’s eyes through the necessary steps makes sign up incredibly fast and intuitive. See Wunderlist above.
Condense Multiple Fields Into One Line
Try to Initiate a Conversation With the User
Having a conversation with the user is an amazing way to engage, educate, and build trust with your users. I got to check out Bondsy’s iPhone sign up process the other day at TechStars and it absolutely blew me away. They’re still in beta right now so you’ll have to wait to see that.
Don’t Require Email Confirmation
Unless absolutely necessary, don’t require users to click a confirmation link in their email. The user has just given you their information, you can sign them in first without making them confirm.
Multiple Forms on Multiple Pages
If you need to gather more information from a user, don’t confront them with a giant sign up form like the one seen above. Instead, break up the forms into different pages so they’re not so intimidating.
If you really need to capture more information from your customers, autofill as much as possible to ease their strain.
Captcha definitely poses a usability issue and unless your site is facing serious security/spamming problems, you should probably avoid it. That being said, I’m a huge fan of what the reCAPTCHA project is doing. Why!?!? Because by filling in those annoying little forms, you’re actually helping to digitize human knowledge. Don’t believe me? Read here: http://www.google.com/recaptcha/learnmore.