Best practice

A best practice guide to creating webforms

UX Design

Three steps to creating the perfect webform

Step 1

Reducing Cognitive Load

  • Are your fields clear and obvious?
  • Are your labels outside the field area?
  • Are the labels you’re using aligned to the top left of the field area?
  • Are you showing your users all options at once if there’s less than 5?
  • Are you using a contextual search if there’s more than 25?
  • Are you using pre-fills when possible?
  • Is your primary action button on the right?
  • Are you matching the text field length to the estimated text size?
  • Are you grouping related information?
  • Are you showing a user’s progress on longer/multi-step forms?
  • Are you adding attributes for usability? E.g. a phone keypad when the user is on mobile
  • Are you using input masks? E.g. a dash in the middle of a postcode
  • Is your form one column? This applies to radio buttons and checkboxes too.
  • Are you making sure there is no “reset” action button in you form? There better not be!

Step 2

Prevent Errors

  • Are you specifying a users errors in line?
  • Are you using colour coding to be clear with validation?
  • Are you using icons clearly and safely? Don’t overload the screen with red crosses.
  • Are you positively reinforcing a successful input when it happens?
  • Are you showing help text when necessary?
  • Ae your select lists blank? They better be…
  • Are you validating per field? Users need to know errors before they’ve licked the action button
  • Are you only showing the error message/symbol after they’ve input the field?
  • Are you differentiating your button styles? Think about when we want them to do.

Step 3

Make It Human

  • Are you using clear and simple language throughout the journey?
  • Do your CTA’s easily explain what to do for a potential user?
  • Are your labels, buttons, CTA’s and other options written with the user in mind?
  • Are you limiting the amount of typing as much as possible? Think of it as a set of stairs.
  • Ae you valuing your user’s time whilst creating your form? Ask only if you need to.
  • Are you making your UI an UX engaging?
  • Have you considered the context? Where will users be whilst filling out your form?
  • Are you empathising with your users and their situation? No? Why not?
  • Is there a clear call to action? Why are they filling out your form…not just “submit” or “send”
  • Shorrter isn’t always better…dpes your form have important and engaging fields?
  • Last but not least…is your form beautiful? Users are far more likely to complete the form if so!

Transform your webform experience & increase conversions

10 Simple Steps

Step 1

Make sure your labels are left aligned & outside the field

Many UX researchers have found that this increases form completion time because the forms are easier to read an more accessible to users.

Step 2

Avoid going two column with your fields

Eye tracking studies show that, unless it is features such as a first name & surname or a date, one column forms are much easier to navigate and complete for our users.

Step 3

Always vertically stack your radio buttons & checkboxes

This simple layout rule will ensure that your radio buttons and checkboxes are faster to process for your user, reducing cognitive load massively.

Step 4

Never split up the fields for dates or phone number

This means the user has to make unnecessary extra clicks to get to the next field, therefore increasing cognitive load – the opposite of what you want to achieve. A better way to do it is to have one single field with a clear guidance in the field.

Step 5

Remember…multi-step forms out perform single-step

UX research has proven that splitting your form into two or three steps (depending on the amount of fields, of course) increases completion rate, almost every time.

Webforms are often the last and most important mile in a long journey

Luke Wroblewski

Step 6

Be careful when asking for phone numbers

People are increasingly less happy handing out their phone numbers. One study by Clicktale found the marking the phone number file as optional decreased form abandonment rate from 39% to 4%.

Step 7

Make your design form beautiful

It has been proven that people trust beautifully designs forms more than forms that don’t look as impressive.

 

Step 8

Remove all non-essential fields

Travel company Expedia lost $12 million per year by asking one additional question (company name) in their booking form. Every additional file in your form is losing you leads.

Step 9

Is your form easy to use in bright or low-light situations?

If people are likely to use your forms outdoors on their mobile devices, you may need to ensure that your question fields contrast against the form backgrounds and can be seen in harsh or bright lighting.

Step 10

Call to actions should be the same width as fields

Uber forms use large full-width call to actions that are highly contrasted against the form backgrounds. By making call to actions the same width as fields you remove any doubt over where the button is located for a user.

Creating experiences that connect

At Electric Circus we’re an experience-led team. We understand the challenges of recruiting, retaining and developing talent. Our expertise blends creativity, digital solutions and communications strategy to create experiences that engage and connect with your employees through every phase of the talent lifecycle.

Whether you’ve read something intriguing about what we’ve done for other companies, or you’ve got a challenge that you can’t get your head around. Or even if you just want to know where we got our name.

We’re always happy to chat.  Get in touch below.

Let's work together