Web Form Usability/UX, by Stefania Perlak

Artículo realizado por la estudiante Stefania Perlak en el marco de la asignatura User Centered Design del Grado en Ingeniería Informática de la Universitat de Lleida correspondiente al curso 2016-17.

Article done by the student Stefania Perlak as a homework of the subject User Centered Design corresponding to Degree in Computer Engineering of the Universitat de Lleida corresponding to the 2016-17 course.

Summary

In the 2017, the most popular way to gather the user information are still web forms. They are kind of a dialogue between the user and the application. In this article there is an explanation what web form is and what are the important aspects of it. There are also presented the most popular ways to increase the usability of the web forms.

Introduction

The beginning of XXI century is a time, when Internet changed its appearance and functionality [1]. Now the access to the network is common and everyone are still online. In consequence of this, there is also an evolution in the interactivity of the websites. Despite all changes that have taken place, the main core of interaction between user and the website are web forms. They allowed users to enter data, which is sent to a server for processing. According to their role in communication, developers should pay an attention in making using them as comfortable as possible, usable and user – friendly. Problems with filling the information can affect on the popularity of the website and make users dissatisfied.

In the Internet there are a lot of publication, which shed light on the aspects of web form creation. Most of them gathered together different observations (coming e.g. from the usability testing) and based on that, author made a checklist or guideline for improving the forms. There are also a few articles, which describes concrete effects of efficiency, effectiveness and user satisfaction.
In this article there will be presented a short definition of the web forms and gathered information about its usability, based on founded articles and guidelines.

Web forms

A web form is a form on a web page, which allows user to enter data for processing. There are six components, which should be included in the typically case [6]:

Labels – the description of the corresponding input field;
Input field – elements, which enable user to provide information to the server. Examples of the input field:
- Text input – text box, allows user to input a single line of text (e.g. password)
- Text area – text box, which allows user to input a multiple rows of data
- Radio button – element, which allows user to choose one of the predefined options
- Checkbox – element, which allows user to choose more than one of the predefined options
- Select – drop – down list, displaying the list of item a user can select
- File select – element, which allows user to choose a file and send it to the server
Actions – links or buttons, triggering an action. Examples:
- Reset button – element, which restoring the values on the website to their initial values
- Submit button – element, which trigger the action on the form (typically it is sending filled information to the server)
Help – information dedicated for user, which helps filling out the form
Messages – feedback to the user, based on the input information. They can inform user that form was submitted successfully or there are some mistakes (e.g. “Your password is too short”).
Validation – ensure that data provided by the user is acceptable.

According to the book “Forms that works: Designing Web Forms for usability”, there are also three aspects of the form, which should be met to gain high usability [9][6]:

Relationship between the user and organization established by form. People have plenty of relationship in their lives. In the XXI century a lot of them are based on the Internet and doesn’t have to be a connection between two people. During building the website, designers also should have in mind, that people using the form will have a relationship with organization for which it is created. It can affect on the long of it – if will be established badly, user just won’t use it.
Conversation between the user and organization. Conversation is a dialogue between two people and in this case this two sides are user and the application. Filling out the form is start of the dialogue and because of that, the form should make user feel comfortable. Developers should have in mind that the dialogue always have one topic and the conversation (which here are the text boxes) should be conducted logically – when people meet for first time they ask at first about the name and after that about the number or address. The form also should not have a lot of the unnecessary things, like additional links or banners.
Appearance, which affects on the relationship and conversation. As everybody knows, the most important attribute is the appearance. Also in this case, the way how the website looks like has affected the user. Specific rules, which should be followed by designers are described in the next point: “Tips and rules for web form designers”.

Tips and rules for web form designers

As it was said earlier, in the Internet there are a plenty of tips, guidelines, checklists and rules, which should be followed during creating a website. Every author has his own idea about it, so here are gathered information from different sources – the most popular and interesting, which are important for the developers.

Less is the better. User usually wants to fill the form in quick and easy way. Providing many information can be exhausting and can make user unsatisfied. Shorter forms give the user fast accessibility and results.
Labels [6]. There are a few rules connected with this specific element:
- Present fields in a single column layout [9]. User during using the website is used to the vertically orientation. When columns are multiplied it interrupt this and impose reorientation. In the other case, when they are showed in a single column, user just fill the information one by one. The effort is lower, so user can do it faster. There can be some exception from this rule – e.g. when some data are connected, like city and zip code, they can be placed next to the other.
- Use logical sequencing and grouping [9][6]. As it was said earlier, web form is a dialogue between user and the application. Every conversation needs a start, the main topic and the end. For example, during meeting the new people we never ask about specific information before we ask about their name. Web forms has the same rules – user should fill the information in the form, which provides him a comfortable way to doing it.
- Individual words vs. sentences [6]. Beside the fact that forms are a kind of conversation, we have had in mind that shorter statements are better understandable. If there is no need, developers should provide the information about field in one – two words, which are enough to understand what user should do.
- Sentence case vs. title case [6]. There is also a problem which letters should be used in the form – should developers use grammatically correct sentence “Confirm password” or should they write every word with the title case “Confirm Password”? The first is more familiar to all users, so it is faster than the other one. There is also a different case, which is strongly unrecommended by UX designers – writing sentence with caps is the most difficult to read.
- Alignment of labels [10]. There are three possibilities to put the labels form – top, left and right. Every of them has its props and cons. The most common are top aligned, which making filling the forms faster and easier. The bad thing is that this option need more place and makes the form longer. If we want shorter form, we should look at right or left alignment – they are slower (and left alignment is slower than right), but they don’t need estate like the vertical one. Developers should be also careful about the language – some languages has very long words (e.g. German), so they can’t unnecessarily make the form unreadable.
Input field. As in the previous case, there are also a few aspects, which should be considered:
- Type of input field [6]. Developers should take into account the type of field, e.g. if the field requires one option, the good choice will be radio button; in many – checkbox.
- Restricting the format of input fields [6]. If the form requires specific type of data – e.g. zip code, phone number or account number, the field should provide the specific format, by using the input masks. In that case, user doesn’t have to think if the provided data is right, because website do everything for him.
  - It is important that mask is not a placeholder – it shows only when user is focused on the specific field and it formats the text automatically.
  - This is also very important aspect in the data fields – in the USA and Europe there is different type of displaying calendar. Americans use format MM/DD/YYYY, while Europeans are familiar with DD/MM/YYYY. To avoid the situation when user provides bad data, the good solution can be using calendar field in which user can choose the right date.
- Mandatory and optional fields [6]. In the web form there should be clearly marked which labels are obligatory and which are not. The most popular is to mark them with the asterisk. There are also solutions in which mandatory fields are displayed with the other colours.
- Setting default values [2][6]. Developers set default value when they think that most of the users will fill the field with specific value. But when the value is chosen, most of them skip it and go ahead. Instead of it, in the form can be used “smart defaults” [2], which based on the data provided by user. For example, basing on the geo location data or IP, user’s country can be preselected. But also in this case, user can skip it and send wrong data to the server, so when we want use that, every case should be considered.
- Address pre-fills [4]. Filling out the address is very unwieldy – user has to provide a lot of data. It can be divided into a few inputs or stand as one field. In both cases it is very uncomfortable to fill it. To make it easier, developers can use one of the dedicated APIs – e.g. Google API, which is based on the Google data and can fill the form with a few keystrokes.
- Autofocus on input field [2]. By changing the colour or enlightening the field, we can focus user attention on it and make it easier to fill the form. It is also good to user, that he always knows where he exactly is, during filling the web form.
- Avoid placeholders [4]. The placeholder text, which should help user in filling the form properly are nearly the opposite of helpful. When user focus in the specific field, the information disappears and user no longer see it. In this case he doesn’t know what he should do, what can increase the chance of error. Additionally, empty fields need more attention from the user, so developers should use typical labels to describe text field.
Actions [3]. There are two types of the action which can be done by user. First is the final functionality, which enable user to send the web form, e.g. “Submit”. The second enable clearing the data or leave the form. The second should be less highlighted, so the first, which is more important can be more visible.
Help [3]. Good written form is easy to fill and doesn’t required specific instruction what should be provided in the fields. Any additional information should be hidden and showed only in case when user needs it. It can be an image of question mark next to the field, which shows short description while user click on it.

Conclusion

Despite the evolution of the Internet, web forms are still the best way to communicate with users and gather information from them. They are everywhere – in the banks, registration forms etc. and the developers should focus on making filling them as easy as possible. Minor changes – minimizing the number of fields or logical grouping them can increase the usability of the website. There are a lot of sources, which can be helpful during the website creating process. It has to be remembered that web forms are a form of Internet dialogue and should follow the same rule as regular conversation. Only in this case the website will be designed properly, with focus on the user, his needs and parallel on increasing the usability of the website.