• User-Centred Design

20th Dec 2017

7 min

Although forms are such simple, functional things, they are often badly implemented online. I come across forms daily both as a part of my job and in my personal life; rarely is it a seamless experience. Because a form is there to collect information, a user should be able to move through the required fields with ease and as little friction as possible, regardless of any assistive technologies they may need to use. In this post, I will discuss five important areas which together will help you create a great form experience; clarity, consistency, easy navigation, screen reader accessibility and mobile specific functionality.

Clarity

All fields should be labelled in a clear and unambiguous manner. If your form includes fields in which users may stumble, these should be supported with help text. For example, in the form of a tool tip.

 

In this example from compare the market, you can see that the target area of the tooltip is large and allows users to see additional information without being intrusive. As it is not an overlay the user can proceed to complete the form whilst leaving this information open or they are able to use the ‘x’ to close this and again, continue forward. The information is unobtrusive.

Another element that embeds clarity in form completion is inline validation. This provides confirmation that the user has correctly completed the field without error as the user moves through the form. When used well, this helps encourage the user to progress through the form with as little friction as possible. As users are alerted to errors as soon as they leave the field, the error is easier to identify and rectify whilst the user is in the moment as opposed to retrospectively struggling to find and rectify the error (or multiple errors).

Showing where the focus is on the page by visually highlighting the field is another aspect which can increase clarity when completing a form. This visual marker is important for all users to assure they are able to identify where they currently are on the page and more specifically in the form. This aspect becomes especially important for users who are using the TAB functionality to navigate the page.

Consistency

Ensuring that fields are highlighted in the same way is also a great way to add consistency in the form. This will help reduce the amount of cognitive energy it takes to complete the form. Reducing cognitive load increases the ease at which a user can complete the fields and in turn the speed in which they move through the form.

Following a linear layout, so fields are in one column, helps the user flow through the form fields. This consistency of moving from one field to the next field below helps users accurately anticipate what field is next to complete, again reducing the cognitive load of the form completion. The example shows how two-column forms force users to scan in a z-pattern, slowing the speed at which they can understand and complete the form. In comparison, the one-column form shows the user a clear path to completion, as everything they need to complete is in one straight line.

 

Another example of where consistency is important in forms, is the date format. Users often struggle completing date fields due to the lack of consistency, whereby some require dd/mm/yyyy compared to others where dd/mm/yy is required. Too remedy this, choose one format and stick to with it. Clearly label the field so users understand what they are required to enter, and then stay consistent when multiple dates are required.

Navigation

Allowing a user to navigate through a form using only keyboard functions is essential to all users. There are a number of reasons for why users may need to use the keyboard, for example those with motor dysfunction or low vision/blind. Being able to use keyboard functionality to interact with elements in a form increases the ease at which a person can move through the form inputting their details.This is especially important for some users, as this is the only way they can interact with the page.

  • TAB to move focus onto the next element (this may be the next input field or a function such as clear or submit/search)
  • SHIFT + TAB to move to the previous element
  • ENTER to trigger an action (e.g. activate the ‘Find address’ function for an address finder
  • When using lists, Up/Down arrows on the keyboard should allow the user to move through the list. Lists should have a clear end to them so the user knows when they have reached the end of the list and therefore needs to try a new search (for suggestions list)/or review the previous options
  • Once within a dropdown list, the user must be able to get back to the input field using the UP arrow
  • ESC should close the suggestions list and focus the use back into the input field

 

Example of using only keyboard navigation.

Screen Reader Accessibility

Some users who use assistive technology such as screen readers (for example users who are visually impaired or blind) may need additional guidance to help them complete forms, especially those which include auto-complete/suggestion list functionality and in-line validation.

Elements in ARIA and HTML can be used to enhance the website for users who use assistive technology. Adding ARIA in the code allows developers to add semantic meaning to elements on the page. This is especially beneficial for increasing the awareness of dynamic content and explaining how to interact with the interface.

One type of ARIA is ‘aria-describedby’. This attribute is used to establish a relationship between a widget and some text that describes it. The additional text added will be read out as instructions to help explain to the user the role of the widget on the page. ‘aria-expanded’ would be used alongside ‘aria-describedby’ to inform the user that the auto-suggested results are now being displayed,

Code 1

As mentioned previously, in-line validation is a great way to notify users of errors in real time, however as this tends to be visual it is important to assure your code includes the correct ARIA and HTML in order for screen readers to know and notify the user. For this, we need to use ‘aria-invalid’

Code 2

Mobile specific

With google moving to mobile first indexing, adopting the same mindset to optimise your website. Mobile experiences for forms, speed and conversion paths are now more important than ever.

There is nothing more frustrating than trying to complete a form on mobile which is designed to be used on desktop. Tackling the small, unreadable labels and tiny fields which zoom in when the field is active is creating a negative, time consuming experience. To improve the experience, optimise the text, target size (for even the chubbiest of fingers) and functionality of the website to avoid automatic zoom as a user activates the field.

Correct formatting of the keyboard allows users to easily complete the field without resistance. This is especially important when entering numerical input. Users struggle to input numbers when using the number/symbol qwerty keyboard, therefore when requiring numerical input present the user with the numbers keypad.

All of the above sounds obvious and raises questions such as ‘well of course it should do that, why would anyone do anything different?!’ Yet despite this, so many forms fail to provide a smooth and seamless user experience. In this post I have covered some key aspects, however there are many more opportunities to enhance the form helping create an enjoyable user experience.

Completing a form should not have to feel like a chore. Improving this IS worth the time and effort, so please help your users out; create a simple, smooth (and maybe even delightful!) experience – if more users can complete your form, you’ll reap the benefits.