Forms are one of the most important type of interaction between users and website or web apps. Input is a core method of interaction to gather user information, and in many cases it stands between the success and failure for many web products. Forms represent the hard conversion point towards the completion of user’s journey on a web product and is often hard to achieve through any other mean of interaction.
Web forms, although a necessity, are often a pain point for both designers and users as it has to skirt the fine balance between being engaging and functional. Over time, set UI patterns have emerged for how a form should look and behave. Usually, we can outline the following components which are typical of any web form :
- Labels : Brief text descriptors for what the corresponding input fields are for.
- Input Fields : Input fields enable users to provide feedback. They include text fields, password fields, check boxes, radio buttons, sliders and more.
- Actions : These are links or buttons that, when pressed by the user, perform an action, such as submitting the form, moving on to the next question and so on.
- Help : Simple statements and instructions that provide assistance on how to fill out the form.
- Messages : Messages give feedback to the user based on their input. They can be positive (such as indicating that the form was submitted successfully) or negative (“The user name you have selected is already taken”).
- Validation : These non-interactive but critical measures ensure that the data submitted by the user conforms to acceptable parameters.
Going ahead in this article, we will explore and in turn ponder on some design techniques and helpful guidelines that are significant for web forms design based on usability testing, field testings, and eye-tracking studies conducted with everyday web users. These will be presented against their practical implementation for our designs for the ‘Get Quote’ form for our client which is a Law firm.
The primary requirement for our client was to design a form which will be intuitive, engaging and able to work seamlessly across all devices and technology platforms. The following points helped us decide and move forward in a direction that would ensure that the form we were designing took into account all possible user case scenarios.
Add some Personality
Part of Web design is about communicating personality and being relatable. This is because people enjoy dealing with other people rather than a stoic system. One quality that almost always helps is a bit of quirkiness and fun in the colours and animations. A small dose of friendliness and personality will make the input process a bit more engaging and human. Applying this to the task at hand, we created a web form which uses vibrant colour schemes to demarcate the different information groups within it. We also used used simple, conversational language.
Break it Down
No one likes a humongous unending lists, especially a list of elements to fill in or interact with. Just as a giant paragraph of text is daunting to the user, so imagine making your users go through a giant block of empty fields to accomplish their goal. To coax the user to the finish line, the designer should make them feel like they are completing steps, or bite-sized chunks. we achieved this while designing Altium Legal’s get quote form by utilising gaming techniques like a real-time animating progress bar, visual feedback for the group of questions user is dealing with, automatically advancing to the next question on validation and so on.
Validation is Key
Users will not spend extra time making sure they have given you all of the information you need. Many designers believe that form validation detracts from the user experience, but that only happens when validation is done and presented ineffectively. When validation is simple and clear – it makes sure that the problem is marked conspicuously and is able to tell the user exactly what is wrong. The fastest way to kill the user experience is with generic error alerts that are meaningless to them. To make sure that users are always on track and not losing sight of the end goal – the name of the game is – feedback, feedback and feedback. To address and ensure that this is not a issue in the form we were designing, we designed the form in such a way that users have only one question to deal with at a time and the relevant error messages and validation related directly to the input field in question.
Reduce Friction & Make it a Smooth Sail
To ensure that the web form does not present unpredictable and avoidable friction that can deter them midway, using multiple choice questions is the best way to go in a form. Selecting items from a list is naturally easier than filling in a blank. A blank sometimes raises more questions than it answers, especially if the labelling is not clear or there are too many empty fields. The user may be confused by the format, the type of information being requested or how exactly to answer a question. In general, a choice is better than a blank, especially with information that could be confusing, such as scope, budget, project type, etc. This was addressed while designing the get quote form for our clients by ensuring that at all times, no more than 19% of the questions require direct user input.
Interactivity, User Controls, and Flexibility
A form is an interactive part of a website or application. In general, people want to interact with elements that feel alive and that follow convention. Many forms have a slight indent, creating a slight 3-D effect, whereas other forms simply show a box outline to delineate form fields. The key to any interaction is expectation and feedback. To make sure that at all times, users knew how to react to the question being asked and the feedback provided by the system we provided prominent UI controls to change user decisions, the ability to go back, change and verify their inputs. Validation was done in multiple layers through colours to assert the section of the form users are in as well as the state of user’s inputs.
The Finish Line
An effective Web form should get the user to cross the finish line. It might be a “Submit” button, an order confirmation button or a sign-up button. At the end of the day, the designer wants the user to hit that conversion point and be reasonably happy with their decision. To ensure this we make sure that the way of submitting the form is bold and specific when it really matters i.e. during the final stage of the form or when the user wants to go back and verify the inputs and answers he has provided. As questions progressed automatically once they were validated, there was a distinct lack of any discernible and actionable UI elements on the screen so that there were no erroneous clicks.
Users can be reluctant to fill out forms, so make the process as easy as possible. Minor changes — such as grouping related fields and indicating what information goes in each field — can significantly increase usability. This overview covered a few such practices which when applied will lead to much higher conversion rates, but often remain overlooked. It is important as a designer to note that we spend so much time getting people to the door that we forget to make the door as inviting and useful as the path to it.
