The great thing with Internet is that you have many services that used to be done in the offline world: you can ask questions to a company about its products. You can arrange a test drive on automotive site. You can register to a TV cable service, you can switch energy provider… You get the idea (and I am not even talking about e-commerce sites). All these services involve filling an online form at a certain stage. That is where online experience can turn into online nightmare and frustration. Online forms are often the Achille’s eels of many websites and I am still surprised – as an end-user – to see so many terrible “online” forms. While I do not pretend to be a usability expert, here are some tips & best practices from my own experience to make forms not only better for end-users but also for your business.
Shorten the completion path as much as possible!
I think that whenever you have to design an application form, there are some principles and guidelines to follow in order to make it user-friendly, intuitive and most important effective.
Whatever the purpose, put all efforts to make the completion path as short as possible. You must reduce the number of interactions required from the users to complete the process. Temptation is high to ask a lot of “nice-to-know” questions but keep in mind that each additional interaction is an additional opportunity for the users to abandon.
Who is your target audience?
Think carefully about your audience and never – never assume users will use the form the way you do! You know your business by heart, you designed and built the form so you know what is the purpose of each field, what input is expected. Your audience does not! Consider the context: are you offering services to regular users? Or is it a service that users will use once in a lifetime or very rarely? Is it for experts or for common people? This aspect is very important but not always taken into account – we tend to extensively use our jargon that is unknown for the rest of the world.
Some tips & best practices
Considering the previous general principles, here are some rules and tips that you should try to apply to your own forms. Some are easy to implement, some are obvious (but then why are these often forgotten?). The list is far from being exhaustive but I think these are a good starting point.
- Fit in the browser screen: long forms not only discourage users but also require them to scroll down – distracting them from the process and adding unnecessary interactions. It should fit in most standard resolution screens (check your browser stats) and if not possible, split it into multiple steps.
- Reduce mouse usage: Ideally, it should be possible to fill the form only using the keyboard, tabbing through fields (watch out for the fields tab order). Requiring users to use the mouse to move from one field to another should be avoided - not only it is annoying but also it adds up “distractions”.
- Clear & functional design: Forms are often seen as boring – especially when Web is all about flashy, colourful animated content. But hold on your horses and do not try to do the same with online forms. Keep them simple and clear – unnecessary visuals are distracting users from the main purpose (i.e. filling that damned form). Avoid “visual noise” – use a clean and neat design. Only use visual elements where it helps.
- Logical process & flow: Filling a form should be a smooth process. Group data in logical blocks/pages and order them accordingly. A good logical structure will make the process more intuitive. If multiple pages, clearly indicate steps and show where users are in the process.
- Reduce cognitive load: End-users are lazy and in a hurry – they don’t like to think too much. Simplify their task: use radio button, dropdown lists (with limited choices), automated controls (address validation, calendar interface) and set default values according to context whenever possible.
- Clear labels – use "customer" words: Ensure that questions and field labels are clear, leave no room for ambiguity and remember, no technical/marketing jargon (depending on your audience of course). Use "customer" language - not yours.
- Provide contextual help: Show help/instruction text for each question whether dynamically (when accessing the field) or on user action (help icon). Indicate clearly what you expect and give examples when relevant (even if it is plain obvious for you).
- Clear error messages and handling: for me there is nothing more annoying then a form saying a generic message like "Invalid value. Please provide a valid value" and leaving it to me to figure out what I exactly did wrong. Highlight erronous fields and ensure that error messages provide enough explanations for the person to understand what needs to be corrected. Ideally validation should be done at field level when users move from one field to the next one.
- Save data across steps: when your form is split over multiple pages, make sure that going back to previous step will not result in loosing data. High source of frustration and abandonment (I hate that when it happens :-().
- Optional questions come after the conversion: Only ask first mandatory or key information. Forms are often seen as a way to collect lot of “marketing data” (what is your favourite color, when is your birthday…). However all these optional questions should come AFTER the main action is completed. Less data to fill – shortest path to completion, remember? Once the conversion occurred, feel free to ask whatever you want. And you will be surprised by the high percentage of users who will actually answer you (because they are so happy they managed to complete their request :))
The next tips are not really for improving conversion because they relates to “after-conversion” aspects – still there are important to enhance the customer experience:
- Confirmation message & summary: It is good to tell users that no gremlin prevented their data to be successfully processed. And thank them for using your service. Tell them something nice and explain them what will happen next. And even better, show them what they sent to you (so they can double check). And the cherry on top of the cake: allow them to modify their data in case of errors!
- Keep users interested – bring them back to original context: In many case, filling a form gets you out of the original context and when completed, you often find yourself looking at a dead-end page (like “ok, you are done, bye bye”). In my work, I have observed that while around 50% leave the site after completing a request, the other half continues to explore the site. So why not bring them back to where they were when they initiated the process? Or suggest them other actions.
The latest version of WebTrends tagbuilder is a good example (even if it is a “specialized” application) as it applies many of the above tips: clear & simple design, detailed contextual help, error messages handling, shorten path to completion. All these improvements make the tool easier to use – especially compared to previous version (far too technical).
At Toyota Motor Europe, we implemented new forms that open in an overlayer (no pop-up – avoid them at all costs) – not only forms fit in a regular browser screen but it keeps users in original context so they can continue exploring the site when done. Also we provide a summary screen and the ability to correct data if any errors.
As a Web Analyst, make sure to measure the overall process so you can identify leaks.
Usability labs are really great to find out usability issues and collect user insights – most of the time you may miss obvious flaws that real users will find in few seconds. But as labs can be costly, they are recommended if you plan a major redesign otherwise do some A/B testing.
Don’t aim at the perfect online form from start but try to build a good one and do small improvements (Kaizen) based on lessons learned, measurements & tests.
If you plan a major redesign and if forms are business-critical for you, consider calling upon a usability expert.
What do you think? Any tips/best practices that you think are really important for improving online form conversion and/or user experience?
If you want more, here are some related articles/resources: