Web forms best practice to Transform User Experience

26 January, 2017
Self-Service Platform, Websites

Delivering services online is at the heart of many companies and organisations and Customer expectations are continuing to be led by larger websites.

Customers expect exceptional digital service interactions, such as Amazon, and Asos in the private sector and gov.uk in the public sector often lead the way to what customers want. 

All organisations can use learning from such websites and forms, self-service and web providers who regularly deliver exceptional customer service for their clients.

Here we have gathered some great examples of how good online forms can be used to transform user experience. 

Mobile friendly = user friendly

Websites should be responsive, so that the site re-scales smoothly to all devices, such as laptops, tablets and smartphones. Forms should be designed for "mobile first" as this will make them user friendly.

Data collection

It is important to be collecting the correct data. This may sound obvious but asking for exactly the right information will help the user by telling them what you want. It also helps you by ensuring the data is ready to be processed once you receive it.

Good error messages

Ensure error messages refer to the data required rather than being vague such as "Error".

errer-message-setup

Validation

Where possible, validate data on the website by ensuring email addresses or dates are in the correct pattern. This gives you clean data and guides the user as to what they want.  You can add guidance text to help users further.

email-validation

date-format

Give validation as you type or on submission and give direct feedback.

Validation should also be set for required, max / min length or patterns for known data such as UK post codes.

Error messages

Error messages inline with form fields with clear sign-posting, error messages and focus make it much easier for mobile users as it saves them scrolling.

error-message

Don't make users think

Forms often ask for data you don't need to know or you should already know such as payment reference numbers. Instead give users their own account and pre-fill as much as possible, such as an address and phone numbers.

Registered users get a much better user experience as they will see a form with their name / address filled out, and relevant information to the service. It will also reduce automated spam as they won't pass validation.

Data sources

Most data types can be added to a good form via backend integration. API calls can get data from 3rd party systems or data can be collected from secure urls and displayed in a form.

data-source-picker

Import data

Additionally, you can mass import data to your forms server such as the property gazetteer that can then be used for address lookup.

data-source

Be guided by logic

We have already said that you should only collect the data you need. Logic can help you here. You can turn off pages or skip pages that are not required as other data is entered. Designers can dynamically move fields, so if one field is validated, another field can appear. A good example of this is the different information needed to pay by Visa/Mastercard vs Switch. Switch payments require a start date and issue number whereas Visa/Mastercard payments do not.

payment-visa

payment-switch

Logic builders

Logic can be written in JavaScript, but modern forms software also have less technical interfaces to allow designers to build logic graphically with tools like Blockly. Logic should also run client side and server side.

Pages or fields can be part of logic to flow user journeys smoothly.

logic-builder

Form fields

Having a large library of available form field types will hugely improve customer experience. As well as standard text, radio buttons and check boxes use advanced functions like Recapture, File upload, Number inputs and Password inputs, plus:

Date picker - intuitive calendar for collecting dates with additional logic to validate weekdays or weekends, past or future dates.

date-lookup

Postcode lookup - match a post code to a pre-defined data source of addresses for quick data population

address-lookup

Location picker (Google maps based) - to allow users to select locations for reporting issues like graffiti or broken street lamps.

location-picker

Form analytics and insight

Often overlooked is the importance of statistical analytics so that forms can be refined and enhanced. Google Analytics tracking code can be dragged onto a form that sends events to Google Analytics. Events might include if a validation is met or a form error message is displayed. This is great for seeing where users encounter difficulties. And the best part is that it can all be done in real time for live user testing.

google-analytics

Forms are just the start of a process

Submitting a form should trigger a business process. Link your forms to processes and workflow. This can be complex but the internal complexity can lead to excellent customer journeys. A lighter version is to store data in your forms package where it can be searched and filtered, viewed, amended and exported. Automatic emails can be sent from forms packages with specified data.

data-browser

Great for mobile service delivery

Strong forms that adhere to best practice will improve user experience, encourage repeated usage and if coupled with automated processes, will reduce calls to your contact centre.

Market leading forms solution

The Forms solution contains all the best practice standards for developing and managing easy, flexible online forms.

Forms training

Training Our focus is on ensuring clients fully utilise their GOSS solutions and to maximise return on their investment to build engaging content and strategy for websites and intranets. GOSS offers a range of forms courses for every level from beginner to developer.

An enjoyable day's training. The materials and exercises were clear and useful and I liked the tutor's presentation style which was well pitched. Jenny Shorter, University College Union

I have attended the course with limited knowledge and have gained a far greater knowledge. This has encouraged me to use the system and I am now feeling more confident. Sarah Green, Mendip District Council

  1. Add Comment

Have a question? Call us on 0844 880 3637 or  book a demo