Forms integrated into apps and websites help to automate processes and reduce administrative effort. They work like small conversations between real people. In the best case, it feels at least exactly like that. Not like a bureaucratic act, but like a short conversation.
To achieve this best case, the interfaces and the forms must be designed in such a way that the right questions appear at the right place by
app developers. Here are a few concrete, practical tips.
Columns
There is a whole debate among online marketers that is about whether forms have to fit on one screen, even if that would mean that the form spans several columns.
Well, of course, it depends - sometimes it could be beneficial to take advantage of all the space available. In general, you can say that this is a pretty bad practice.
Why? The reading flow is interrupted. In multi-column forms, users always have to start from the top to record all fields. It is easier if the form can be read and filled in at once. This reduces the possibility of missing (mandatory) fields and thus reduces the probability of errors.
Logical order
Ok, it should be clear that the order of the requested information should somehow be "logical". "Logical" does not necessarily mean that the information must follow one another. Rather, that they are not fundamentally different from what the audience is usually used to. Don't request for the phone number before the name.
As much as necessary, as little as possible
The GDPR has already ensured that marketers are encouraged to use data sparingly. But the experience on the part of the public, the app users and website visitors is a more pleasant one if there is as little to do as possible. Therefore: Avoid unnecessary query fields. Keep forms as simple as possible. Combine the date fields into a single entry. If possible, summarize first and last names - this will make it more fluid for most users.
Bundle content groups
Instead of spreading the form over several pages, it can also be sufficient to present queries that belong together in terms of content. Use sections so that the user can differentiate between personal information, service information and contact information.
Labels
Labels that indicate the function of the respective text field should always be left-justified. In longer forms, it is sensible to place the labels to the left of the field instead of above it, so that the form becomes even more compact overall.
However, it does not promote the flow of reading - a more relaxed filling of the form is achieved if the labels are left-justified above the input fields.
Labels should be as short and concise as possible. To avoid any eventualities in the case of ambiguous input fields, you can set a tooltip, i.e. a small "context menu" that pops up as a speech bubble when the user moves the mouse pointer over the label. However, this should also only happen in exceptional cases.
Predefined values
Almost all people who use forms choose values based on a given model, for example, the order of first and last name or a date format.
Therefore, display specifications in the form fields instead of leaving them blank - because the user is free to choose which data to enter and how. This can lead to two problems: firstly, the user may be unsettled. Secondly, it helps the internal processing of the data. The more the data is standardized, the more efficiently it can be used.
Placeholder
In very small forms (e.g. password queries, callback forms), it can make sense to place the labels as placeholders in the text field itself. In cases where users (by habit) already know intuitively what needs to be done at the point, the placeholder label only acts as a reminder.
Buttons
Use buttons to get users to do something. For example, sending the completed form, scrolling back to a previous form page, etc. Designing buttons should not degenerate into rocket science - but you shouldn't neglect the topic either. Because it's actually simple:
- The primary action should be differentiated from all other possible actions - for example, in colour.
- The buttons should be arranged in such a way that their function can be grasped intuitively - for example, scroll buttons aligned on the respective sides.
- The button label should be specific and convey to the user in a crystal clear manner what he will achieve when he clicks the button. At the same time, the label must remain extremely compact - like all form labels, it is scanned rather than read.
