Getting a new client, registering users, site logging, or collecting feedback all these activities require forms. A renowned UX designer Julie Grundy says web forms are the linchpin of web interactions. Forms are an integral part of designing and business requirements for collecting the required information, but ignoring forms is convenient, and this ignorance can be a most expensive blunder for your company.
- Well-known American online travel Expedia Group lost $12 million because of incomplete financial transactions. The bank name, confused with a UI field named “company”, was a reason for an incomplete transaction. Credit card processing failed while checking the address of the cardholder and the form field. After research, designers deleted the optional field “company”, allowing Expedia to gain $12 million profit annually.
- Another well-known example is the John S. McCain accident, where a poorly designed checkbox of the touchscreen made the crew lose control over their ship and collide with the Liberian tanker. This accident resulted in ten sailors with an added financial loss of $100 million.
Usually, the UX designers would not accept these as mistakes, plus the tester too conveniently forgot to point out, these mistakes have caused the companies financially.
According to the studies, the forms with basic usability are faster to complete and are twice as likely to submit without errors.
But for a user, filling forms is annoying. UX designers sometimes accept such decisions that could affect people. Filling the forms for the requirements of applying the insurance or job is not delightful to the user if there are multiple fields to complete or fill manually, but the users would need to fill it manually to accomplish their goals.
Here are some preliminary questions to be asked before designing a form.
- Is applying for a form necessary?
Forms are to collect data from clients or customers. Before implementing a web form, one must ask if you require it or use an alternative way to gather the needed data. For example, support for Facebook or Google login instead of registering to your site.
- Do we need the data requested by the form?
Sometimes the forms may require the user to add critical information that might go wrong. So as you design, see if you can fetch the required details automatically on the form. For example, retrieve the credit card details as the user enters their id details.
- Can we get the data some other way?
Sometimes, the client who has registered with you need not fill the form again. Instead, fetch the details and move him to the next page or skip the entire form-filling for him. For example, asking the customer to verify his fetched credit card details, rather than requesting them to retype.
The best version of having a form is in its shortest version, so it does not bore the user while filling. It is impossible to avoid forms entirely, so we will discuss certain essential aspects required to create forms.
The layout of the web forms ought to be less cognitive. Less cognitive means it should promote the feeling of simplicity. As you design the web forms, consider the factors,
- Structure: The structure of the web forms describes the field order, appearance of the form, and logical connection between the fields.
- Grouping: we know Grouping thoroughly. Related information or fields put together or grouped. This sets a logical block and the flow of questions. Grouping information together makes the sense of the information.
- Logical flow: the order of the questions or the sections decides the logical flow.
- Building blocks: Fields of the web forms are the basic building blocks of any web form.
- Label alignment: There are 3 ways to align the label: left, top, and right align. All these have their advantages and disadvantages, but most used is the top align label as it requires less horizontal space, is easy to process, and supports multi-language forms.
Along with left align the latest trend shows of having a top-aligned label only when the user clicks on the placeholder to fill the text.
- The input types: Arranging the input fields like text box, check box, radio buttons, submit buttons collect the required data. Align them in proper sequence and required pixels.
- Field length: Sometimes the field length acts as an affordance by giving the hint of text length. Not only the field length but also the button colors and field shape show the consequences of users’ actions.
- Good defaults: Defaults assist users in filling out the long forms quickly. Like a tab, click to the next field, or the hints if the entered value is not acceptable to the system.
Forms are used to collect data, for the companies dealing with banking and insurance require lots of user details. Here, the web forms designed can try fetching the most obvious details like the bank details. Dividing the multi-step forms into chunks, steps, or screens with the required navigation makes it easy for the users to fill in the grouped details.
UX writing smoothens communication between the web and users. The questions, labels of the input field, the gateway way screen prompting the expected example completion time, is a way to guide the users. Handling the empty states or during onboarding of users using tooltips, contextual helper, form title, or feedback text all fall under UX writing, aiming for hurdle-free user goals.
UX writing guides the new users to take action that will match their goals. Remember, every app has its manual or the helper file, but now designers prefer to depict these details on the screen for first-time users. Some ways are tooltips or indirectly guide the users during their online interaction with the tool.
Web forms serve an essential role in collecting and displaying data in the required format. Humans don’t prefer to fill in the long details and UX designers conveniently forget to make it interesting. In this series we are discussing the essential aspects the UX designers care about during users’ interaction with data. So far we have covered the Layout and UX writing in web forms, in the upcoming part we’ll discuss the remaining details