Improving Drupal's default registration and login forms

We recently completed an overhaul of the user experience of Do-Surgery.com, a video training portal for surgeons, and I want to talk about just one area of the site that we have spent some time getting right.

Login, or not to log in

Debates about misspelling of the verb "log in" aside, login forms aren't particularly interesting, right?

Drupal defaults to having a dedicated page for logging in, and an optional login block that you can put wherever you want. But the login block often gets stuck in a sidebar across the whole site, taking up valuable page real estate and limiting layouts to that classic body-with-sidebar look. Worse, the default approach for a responsive site is often to put the sidebar below the content area, meaning what is otherwise a very useful feature often doesn't even get used.

Consider the alternative – a dedicated login page. Having to go through a whole server call and wait for a new page to load just to get to the login form is pretty heavy going, especially if you're a mobile user.

So I revisited the block in an attempt to use it properly. By hiding it initially and intercepting clicks on the "Log in" link, I could keep it right under the header and toggle its appearance as instigated by the user – no server load or waiting times, just a pretty little form. Take a look! The focus states were quite fun to play around with, and I love using :active on buttons to get that depressed look on click, instead of an often-seen gradient flip on hover/focus. I know there isn't anything particularly original about all this; I'm just highlighting that with a bit of attention, there are some really easy wins for the experience of logging in.

Registration, and legal and text, Oh My!

If the requested data is used to enhance their experience, it's worth making that clear!

Getting the registration form right can be a bit more involved. If your objective is to actively encourage registration, as with Do-Surgery, the registration form has to be right. It is an opportunity to remind the user of how they will benefit by sharing their data, and particularly if the requested data is used to enhance their experience, it's worth making that clear! This is what the old reg form looked like:

In the case of Do-Surgery, these were the factors influencing the requested information:

• Access to the full site content is exclusive to surgeons, and acceptance of a user registration is performed manually after verification of their credentials.
• Once logged in, the site recommends content to the user based on their area(s) of specialism.
• Joining the mailing list also enables webinar registration, event reminders and tailored emails of new content in their area of specialism.

The new form

The leader copy is concise, reassuring and aspirational.

Microcopy (via Drupal's form element descriptions) is used to communicate what information is required, but can overwhelm forms with text. So, I decided to hide the microcopy and show it only when a related textfield is in focus. If you're curious about the technicalities, I used input:focus + .description.

Microcopy is also often only used on forms to describe what is needed (no spaces, lowercase only, that sort of thing). The user probably knows their own name, email address and area of specialism, so I shifted the copy angle to why we need this info, rather than just what. This means on each field, the user is reminded why they are bothering to complete the form, and encouraged to continue.

The other useful thing about this approach is that if any required fields are incomplete when the user submits the form, we can highlight the microcopy, which explains why it is needed. This means the Drupal error message at the top of the page isn't so disconnected from the fields it refers to. All of this was done with almost no templating – just CSS, a bit of JS and some careful thinking.

I'm not saying my approach is perfect, but it's a big improvement on the old form, and I'd encourage everyone reading this to look again with fresh eyes at their forms.