Live blogging Designing Sign Up Screens and Flows presentation at Webstock 09 by Author of “Designing for the Social Web” Joshua Porter.
Josh got started in this biz because every client he ever had came to him with problems relating to web site sign ups.
Joshua wrote a book called The Usage Lifecycle. First up: Sign up is hard. If you have 8% of first time visitors signing up for a *free* account, you’re doing well.
When we think about the hurdle of sign up, we generally think about the friction of interface. So how do you remove friction? The Tumblr sign up is a great example of this. The URL box shows you what your URL will be. No need to understand sub-domains or anything else. The action button says “sign up and start posting” – it’s clear what will happen when you sign up.
We’re starting to see cool ways to make forms easier to use. Things like:
– Password strength
– Check username availability
– Inline help
– refilling fields upon error
– sending username in confirmation email
– Show/hide password
Joshua is currently working on a Facebook app. Facebook applications are great to work on because of all the different metrics. He’s been trying to improve the ease of use of typical Facebook forms:
Original Flow looks like:
1) Confirm personal info
2) Add your friends
3) Invite others
4) Getting started
Original Conversion Funnel:
Of the 100% of people who started the sign up process using the original flow, only 14% made it to the getting started screen. So at every level of the app sign up, we lost users.
What would happen if we took down some of the steps? He started by removing steps 1 and 3. The new flow was:
2) Add your friends
4) Getting started
The new conversion funnel resulted in 86% of users making it to the *getting started* screen. Always ask clients why they want their user sign up forms changed. Focus tends to be on the form. But the form is not the problem of sign up. There’s a lot of good info on the web about form design. That’s not the issue. The issue is motivation.
“If ease of use were the only requirement, we would all be riding tricycles” – Douglas Engelbart
You need to change people’s minds about your software. Sign up is in the mind, not the web. People will find a way to sign up if they are motivated enough.
What are we asking?
1) A change in behaviour – old habits die hard
2) Give up accepted shared practices
3) Jump into the unknown
4) Shift from potential to kinectic energy – psychology behind wanting to change
The Psychology of Sign up = 9 x Effect by John T. Gourville. People tend to overvalue the software they currently use by about a factor of 3. Software makers tend to overvalue the software they offer by about a factor of 3. This creates the 9 x Effect. That’s why entrepreneurs tend to think they’re going to set the world on fire.
What we imagine people are thinking: confident, decisive, passionate
What they’re actually thinking: unsure, scared, non-commital
The Preconditions of Sign up:
– product research
– considering an alternative
– learning about the product
– comparison with other options
– reconnaissance
The form goes where the moment of readiness to sign up comes along. Therefore, pre-conditions are very important.
Design for 3 distinct visitor types:
1) I know I want to sign up
2) I want to make sure this is for me
3) I’m skeptical
Ways to tackle sign up:
1) Immediate Engagement
Geni’s family tree image where user can picture their *place* in the tree. NetVibes sign up reminds people it’s free, provides unobtrusive help comment window. Most importantly, you are allowed to create a personalized page via various fields etc BUT you have to sign up in order to be able to save that page. Slide widget that is on many social media sites uses similar thing. If you click on other people’s slide-shows, you can add and customize a photo BEFORE you sign up. Tripit use a helpful signup graphic and allows you to send travel data such as flight confirmations etc and then Tripit creates the account for you based on your return address. You’ve never even filled out a form, just sent an email. Posterous also has an email generated sign-up process and has “sign up” crossed through to remind people how easy it is
2) Write to Reduce Commitment
Copywriting is the easiest, fastest way to improve your sign-up process.
Highrise did A/B testing using Google Web Site Optimizer. They tested copy at top of sign-up form. Most conversions resulted from:
“30 day Free Trial on All Accounts. Sign-up takes less thann 60 seconds. Pick a plan to get started”.
Another example was PearBudget which started as an Excel spreadsheet and was converted to a web app. It allows you to create an online budget. The sign up is simply a pop up field “Save Your Budget” with an email and password field.
3) Levels of Description
First level is your elevator pitch – one line description of service, logo, screenshot
Second level includes more detail – features, benefits, how to join
Third is In-depth level – more complicated, details, links to deeper levels of information
The NetFlix sign up is a great example of the 3 levels in action. They also add their phone number for persons still needing help during the sign up process.
Bill My Clients recently changed their sign up which was not successful. Freshbooks has a great user interface (yay team!).
