Design for Sign-Up – Lazy Registration in Drupal

One of our key challenges in building BeGrand.net is that we have ambitious targets set for the number of Registered Users on the site. In a perfect world, everyone who visits your website would immediately be amazed at the cornucopia of wonders it offers and would willingly crawl over metaphorical broken glass to sign up and get member benefits. Ah, what delightful whimsy! The reality is somewhat different. People are generally loathe to register, i.e. give their personal details to a website for any number of reasons, including:

• Concerns over security and privacy – a particular issue with our demographic – “once you give them your postcode they know everything about you”
• Not seeing any benefit to registration – “why should I bother?”
• Natural human aversion to the hassle of filling in forms, particularly loooooong forms
• Registration process usually disrupts the cognitive flow of the user by taking them to another page
• Extreme allergy to CAPTCHAs
• …and so on

So what can we do to overcome this resistance to register? And how can we do it in Drupal?

Write good copy

Part of the solution comes not from any technologoy, but from good, old-fashioned, intelligent copywriting (as 37signals declare, and I totally agree – Copywriting is Interface Design. This ranges from clearly explaining the benefits of registration, why it will be worth the users’ time, and allaying their privacy worries, down to the text used to label the register button – ‘Sign Up’? ‘Join Us’? ‘Register’? As the 37 signals guys point out – “You need to speak the same language as your audience”. We quite probably won’t hit on the best turn of phrase first time, all the time, but not to fear – A/B (aka Multivariate) testing to the rescue! Drupal has a Multivariate module which makes A/B testing very simple. Hurrah! Now we can test our different button labels etc with ease. Nice work.

Use patterns, keep it simple

I’m a big fan of design patterns. Why reinvent the wheel when lots of very smart people have been thinking about and refining said wheel? One design pattern which has been receiving quite a bit of attention lately is ‘Lazy Registration‘. The basic principle is that you allow users to interact with the site and defer registration until it is required (for example, to comment on a story, or post in forums). A good example is amazon.com where you can add items to your basket, see previously viewed items etc without having to register until you actually decide to buy something.

If and when users are required to register, the process should be as simple as possible, which means only asking for essential information. At minimum, we only need a username and password – this is what is required to allow users to login to the site from any computer. If we use the email address as the user name that’s just two pieces of information required, which isn’t too onerous. Once registered, members can choose to fill in their profile later, which hopefully they will if you can clearly communicate the benefits of this (personalized content, ability to create content, make friends, etc).

So how to do this in Drupal? There is a lazy registration module, which facilitates automatic creation of a temporary account the first time the user tries to access an area or perform a task which requires authentication (the account can be made permanent via email confirmation.) However, it is not yet available for Drupal 6 (although they are working on it apparently. Come on chaps!). Another candidate is the Inline Registration module, which “allows anonymous users to register via the node/add page, thus removing a step/barrier from the user actually publishing content.” Which is nice. One more module that deserves a mention is LoginToboggan, which allows a user, once registered, to login immediately via JavaScript, which adheres to the principle of staying on the page…

Stay on the page / keep in context

In the olden days (i.e. about 2 years ago) registering on a website would mean being taken to another page (or worse, a popup window), completing a registration form, then if you are lucky, being returned to the page you were at. This creates a number of breaks in a users ‘flow‘ and thus an irritating, disjointed experience. Luckily for us, AJAX and JavaScript have come to the rescue. Rather than interrupt the users flow, we can now use dialog overlays with a lightbox effect to replace old-style popups. The advantage is that the user is kept in the context of the page (the background is just dimmed out) and because they are usually quick to appear the user can ’stay in the flow’. Even if your registration process comprises multiple steps, the user is still kept in the context of the page.

Lazy Registration wireframe

1. Keep in context with a modal overlay
2. Use a SAPTCHA instead of a CAPTCHA
3. Clearly explain benefits of Registration
4. Give user option to learn more if they are still unsure

I think we can agree that overlays are a “good thing”. Overlays are being implemented as part of the of the Drupal 7 UX project, but what about Drupal 6? I searched in vain for an overlay module that could support embedding forms (as opposed to just images, which is all you can do with Lightbox, for example). Imagine my delight/confusion upon finding the inaccurately named Drupal Popups API. To me, a popup is an annoying little popup window, not an AJAX overlay, so Lord knows why they gave it that name, but who cares if it does the trick, right? I don’t actually know if we can embed registration forms yet since I only found it yesterday, but we live in hope… Mike can write a module if not. Right, Mike?

Kill CAPTCHAs

Everyone hates CAPTCHAs, right? To prove you are human and not a spambot you have to try to read a piece of distorted text. Problem is, they don’t work very well. The text is often so distorted that even users with 20/20 vision have no clue what it may say. Given our audience demographic is 45+, using a CAPTCHA is asking for bail-outs. A proposed alternative is the SAPTCHA, which uses a string of text (usually a question) to trick the naughty spambots.

Leverage Social APIs

I’m not sure what proportion of our audience (45-75 year olds) already have an account on any existing Social Networks, but I wouldn’t be surprised if there were a fair number on facebook at least (see “Why facebook is for Old Fogies”). Giving users the chance to register on the site using their existing facebook/twitter/Open ID accounts can’t hurt, and luckily the clever people at Gigya have written the Gigya Socialize module to enable just that. The Socialize API allows users to invite friends from existing networks and to interact with these networks (eg sharing content or sending user status updates and newsfeed events). You can learn how to implement the module in Drupal with this helpful ‘webinar‘.

Conclusion

Hopefully, if we are ‘on our game’ we will be able to make user registration a smooth, painless, and possibly even enjoyable process. If any readers have top tips they would like to share, well that would be splendid.

Resources

Lazy Registration patterns and examples

• Lazy Registration – AJAX Patterns
• Lazy Registration – UI Patterns
• 12 Excellent Examples of “Lazy Registration” – Web Jackalope
• Signup forms must die – here’s how we killed ours! – 90% of everything (screencast)

Drupal Modules

• Lazy Registration
• Inline Registration
• LoginToboggan
• Popups API (for modal AJAX overlays!)
• Gigya Socialize module