What is a (digital) form?
In a broader sense of the meaning, a form, is an interface that collects through interactions, the required information, in a logical, meaningful way, and then passes it to at least one third party entity.
Sounds complicated, right?
What is a form document?
Wikipedia describes a form document like this: “A form is a document with spaces (also named fields or placeholders) in which to write or select, for a series of documents with similar contents. The documents usually have the printed parts in common, except, possibly, for a serial number.Forms, when completed, may be a statement, a request, an order, etc.; a check may be a form. Also there are forms for taxes; filling one in is a duty to have determined how much tax one owes, and/or the form is a request for a refund. See also Tax return.”
Do you notice the resemblance?
We at 2Checkout have been using forms as a way to collect information for a significant amount of time. All forms use the same metaphor and serve the same purpose: collecting information.
Ok! So… What makes a good form?
On one side, it means that it needs to serve the intended purpose, in that it collects the necessary information that an organization needs in that specific context. On the other side, it needs to be well adapted for the needs and context of those users.
Collecting information is what distinguishes a form from any other types of interactions. The way we interact with forms has changed, user mental models and expectations have changed, but the UX aim remains the same: to adapt, iterate and deliver an optimal experience.
If we look at this from general UX standpoint, then in order to create this optimal user experience we apply the same UX principles or techniques as we would with any other challenge, including:
Research usually refers to learning more about the needs, wants, context, preferences of both users and stakeholders.
This is an important step because it can offer valuable insights on users (through contextual inquiry or cognitive interviewing) and can better define the intended purpose.
Here are some insights that you may uncover:
1. Mental model – Mental models are an artefact of belief. They are the beliefs that a user holds about any given system or interaction.
Unfortunately, this research step is usually skipped, resulting in a poor understanding of the purpose and context, or simply poor conceptual models.
The ideation and testing are parts of the UX (Design Thinking) iterative approach, and there are a lot of materials online which explains this approach (for example, Change by Design – Tim Brown).
Forms are made of three main elements:
Words are what you say in the form and how you say it.
To have proper wording you need to do some research so you use the appropriate vocabulary and reduce ambiguity.
Cognitive scientist Roger Tourangeau proposed (in The Psychology of Survey Response) a four-stage model for how people answer a question
These stages can happen in an instant and people are not consciously aware of them; sometimes they can be repeated if the user decide that their answer in not suitable.
It is better to use precise terms, frame of reference, and to explore only one concept per question.
Layout is how things are presented, visually.
Design Principles are some widely applicable laws, guidelines, biases, and design considerations. Design Principles draw from many disciplines—e.g., behavioral science, sociology, physics and ergonomics.
Here are some important design principles to consider when it comes to form layout:
In the above example we see a proper use of the proximity principle. In the A option the top labels are too far away from the input fields, so it makes it harder for users to understand (or perceive) the relationship.
Flow refers to how a user moves through the form.
There are some important key aspects that you need to keep an eye when it comes to forms:
In the above example the A version is a very common and uninspired way to collect the date of birth.
In the above example the A version doesn’t really help the user and fails in providing hints on how to correct the problem.
In the above example we can see how we can combine words + layout + flow to create a better experience. Option A is an exception because it doesn’t follow design principles like proximity. Option B and C are great, but the only downside of option B is that it doesn’t allow to group fields horizontally
In the above example we can see an example of a sign in form.
Let’s explore a little bit this example. Option A is a common sign-in form that we are accustomed to seeing online. Options B and C are improved (better) versions of A.
In depth analysis:
Option A problems:
Option B problems:
Option C problems:
In the end there are many more things to add; if you want to learn more I recommend you to read Jessica Enders – Designing UX: Forms.