So why do we need to pay so much attention to our forms?

Well they are often the first thing people encounter on your site, i.e. when they want something from your service; when they want to buy something; when they want to sign up; when they want to post a comment or a status; and they want to upload…Each time, they are met with a form. That initial experience can be seen as a reflection on how good the rest of your service is, so it’s best not to get off on the wrong foot. Make it simple and quick - they might not even notice it. Or try the opposite approach and make it , dare I say, delightfully memorable.

They [forms] stand between people and the products or services they want and between companies and their profits.

Luke Wroblewski - Web Form Design - Filling in the Blanks

It’s a rare project that does not rely heavily on forms. Forms can make or break our conversion rates, so it’s important everyone on the team has a good knowledge of what that means.

So here’s my advice:

The form is more than its components; consider the things you can’t see.

Context

Who is your likely user? Where and with what will they access the form? We should always consider covering basic accessibility for screen readers but ask ‘What other accessibility issues do I need to consider?’. Then there is the context of where in your process are they; which previous screen or steps have they been through. We recently worked on an online Ad Buying Service. We worked on creating something that would be great for the small enterprises and still have enough meat for the power users. We had to consider these different users and create something simple that works every time. For those power users, it also had to feel like they maintained complete control, so stepping through each part was simple, but we always gave the ability to jump back and forth through each step, and all the results could be seen in an always visible summary.

Reduction

For both mobile and desktop, we want to minimise the amount of friction towards completing the form. Removing items can be difficult but attempting to reduce unnecessary questions is going to speed up completion and change initial perception of the forms complexity. If you haven’t already reduced unnecessary fields, then remove them at least for mobile, for some types of forms you may be able to offer a different version on mobile.

Particularly for mobile we can speed things up by avoiding split inputs, for example two fields for one phone number or forename surname as separate fields because every field means opening up that keyboard again which slows the user down and not least frustrates them. Check out this amazing solution of a single field credit card entry inspired by square cash.

Clarity

What information do you want from the user, and importantly why do you want it? A user is going to stop and think twice about giving you their personal information, we can reduce drop off simply here by just explaining what we will or will not do with that information. Clarity becomes even more important when it comes to actions, we try to be clear with the exact results of the actions we offer for example ‘cancel’ might become ‘cancel order’ or ‘submit’ may become ‘create account’.

action-copy.png

Errors

We want to do everything we can to prevent the user making errors especially unnecessary ones but it happens and when it does we need to guide them to fixing them as quickly as possible again this is with clarity tell the user exactly where the error is, what was wrong and how they can fix it. Also consider how you can help the user prevent mistakes, for example matching the length of input field to the amount of content expected for example postcodes - there’s no need for a 10 character long field and it only serves to confuse people. For mobile, we can create large contact areas, to account for our fat fingers, inputs and buttons need enough space to avoid mistakenly clicking the wrong button.

At Adaptive Lab we recently created a form for users who weren’t too tech savvy, so we chose to only show a single question at a time in a guided flow. We took the progressive disclosure approach only showing the most important options to avoid mistakes.

Success

‘Yay! You finished the form’ it’s great to celebrate success. It’s a little win and we love little wins, but be careful with success pages that become dead ends, guide your user into the next step.

Back to the basics, how should you organise your form.

Top align your labels

There are 4 viable options for label placement: top aligned, right aligned, left aligned and inside the input boxes. There are a number of good reasons to left or right align your labels. You may want people to slow down and carefully consider their inputs, or you might want to save space as we did on the bank trading system. We were able to make it 5 times faster to set up trades than their current system - invaluable when you are dealing with millions of pounds worth of trades. There, we chose left aligned labels, but my first port of call is top aligned. Top aligned labels beat the rest for multiple reasons:

  • Eye tracking studies have shown that we scan down the left edge (perhaps this is different for languages that don’t read left to right?). The labels relate directly to the inputs so there is no confusion or need to track right and left repeatedly.
  • A clear path to completion - people can quickly understand all the info needed and only need to make actions to move down the way whether tabbing or using the mouse.
  • It’s responsive friendly, your form will translate easily to mobile or tablet, you wont need to change the visual design either so it’s consistent across devices.
  • On mobile top aligning your labels makes the most use of a screen and easy to scan.

top-aligned-2.png

A quick note on labels inside the input fields

Labels inside inputs save a lot of vertical and horizontal space both on desktop and mobile, but putting the label in the field means that once the user is active on the field or they have already entered their information, they lose the context of what they need to enter. So checking over their form and pausing and returning could cause unnecessary errors. To tackle this you could try one of the many recent examples of float label interactions.

Choose the most appropriate input for desktop & mobile

For inputs, it is of course important to consider what it is you want the user to input and choose the appropriate method for the job to be done. Check out Google’s web fundamentals on forms for a good list of HTML5 Input types and their appropriate uses.

Align buttons with the ‘scan line’

It’s easy for users to make mistakes because of bad placement of buttons. Buttons are predominantly the actions you want the user to take ie. submit, sign up, save & continue Anything beyond this, you may want to consider relegating to a secondary style to avoid confusion ie. cancel order, back, help are all secondary actions and can be styled as such. With actions, we need to bear in mind our user quickly running through our form with our top aligned labels. They are concentrating on that one scan line down the page. This slide from Caroline Jarrett shows us that the first place they will look for that button is aligned with the inputs - imagine a scenario where we put the back button there, or worse, the cancel button.

eye-tracking.png

If you need lots of tabs, go for vertical

Vertical because it remains in the scan line mentioned above. For our Online Ad Buying Service, we had lots of steps that did not necessarily need to be completed in order. The user could go back to them at any time and edit them. We needed to show all 8 steps for the user, what they were and, as they continued, their progress on each. For this we created a layout with vertical tabs, a main form content area, and an extra piece of info which was a summary of their whole campaign which was slightly more out of the way on the right hand side.

Although this web app prototype was desktop and not responsive, I thought I’d look at how we could make the vertical tabs work on mobile too. Here is a rough potential solution to a responsive version of these vertical tabs:

vertical-tabs-mobile.png

Hopefully this brief look at forms will help you to make better forms first time round, and increase happiness and conversion. Here’s a rundown of the key takeaways:

  • Be clear, reduce any unnecessary elements/inputs and give clear informative instruction in all aspects
  • Top align your labels
  • Align buttons with the ‘scan line’
  • If you need a lot of tabs think about going vertical
  • The form is more than its components. consider the things you can’t see like context, processing and accessibility.

Further reading on forms

Luke Wroblewski – Web Form Design - Filling in the Blanks

Google Web Fundamentals – Forms and user inputs