The art of Signup design

Signing up to web services is something that most digital professionals are familiar with, and take for granted. But surprisingly as it sounds, although we know it is important to make the process as simple and painless as possible, what works or not depends largely on your target audience and the problem you are trying to solve.

Examples from existing sites

A couple of months ago, I was researching UI Patterns for registration and sign-ups.  There is no doubt a huge resource of information out there, with some examples that stand out from among the crowd:

• Facebook
• Twitter
• Quora
• Stackoverflow
• I’ve collected some screencaps and will share them on flickr soon.

UI Patterns and research on signup design

This is a shortlist of resources I found useful:

• Sign Up or Registration, from Designing Social Interfaces
• Account Registration
• Lazy Registration
• Ajax Patterns – Lazy Registration
• Barebone registration: is password repitition and captcha really essential?
• How much information should you ask for when users register?  
• Web Form Design Patterns: Sign-Up Forms, by Smashing Magazine
• Web Form Design Patterns: Sign-Up Forms, Part 2, by Smashing Magazine
• Registration Form Design Examples, by UI Pattern
• Five UX antipatterns to avoid when designing Log-in & Registration area

Signup 101

There is no end of resources available. In summary, the usual suspects of signup 101 includes the following, but what works or doesn’t work for you will depend on your business, your target audience and ultimately, what it is you are trying to achieve with the signup:

• Only use signup if there is an obvious benefit (e.g. access to useful/additional content that won’t be otherwise available)
• The link to the sign-up should be available and obvious – top right-hand corner

• Lazy signup – Defer signups until totally necessary, if possible
• Keep the form minimal – Ask for only information that is necessary
• Only include mandatory fields – if it’s optional, it means we can ask for it later
• If you must have both optional and mandatory fields, make that difference obvious
• If the sign-up has to be in steps, or require lots of input, group the details together so they make sense when filling up the form
• If the sign-up caters to different types of accounts, separate the content of each clearly
• Don’t rely on hover effects unnecessarily – firstly, they don’t use on touch screen devices, secondly, they can be confusing to the users
• Provide realtime feedback and contextual error messages – this can be ajax/client-side topped with server-side messages.

• Don’t display unnecessary details or graphics – they are distractions that distract and confuse

The outcome

• Our intention was mainly to lock out access by organisations that abuse the site, so introducing the sign-up is something that works well for us; while at the same time, still allow access by individuals that just want to casually browse the content.  The sign-up allows us to identify who is accessing the site and isolate abusers.
• Although we would have preferred the Lazy signup approach, it works in most situations, but unfortunately not ours because of the underlying objective for introducing the sign-up.
• To ensure we keep the form minimal, we have segregated the sign-up into 2 types, signup by individuals for personal access of the site; as well as signup by individuals for business access of the site.  This allows us to get more information from businesses and corporations, while ensuring personal access is not hindered. We achieved this we did by keeping the content of each group separate and this is probably something we’ll continue to improve over time.
• The original design show only mandatory fields.  Although it is not ideal, we have also included a couple of optional fields to address the needs of the business.
• Realtime feedback is definitely useful, but there is a limit to what we can feedback (e.g. password and re-entered password must match, email format is incorrect); we are finding some users are struggling to type in the correct email address, and this hinders the account activation process.
• Not displaying unnecessary graphics and texts is definitely key.  Although our original account activation email was very succinct, we felt it lacked friendliness and hence included  what we thought was friendlier copy with additional instructions. Long story short, we have reverted to succinct. Users only want a link to click to activate their account and that’s what the final version provides.

The art?

UI design is an ongoing process, it’s not a one-size fit all science.  On the same note, don’t make the mistake of assuming designing the UI is simple; the upside is, people think it’s simple because we do a good job of making the UI and the process straightforward, the downside is, there is a hell lot of detail that we have to bear in mind whenever planning, designing, developing, testing and launching anything like this.  Don’t assume that it is simple and something that you can put together and launch in a few days.