User-friendly microcopy texts
Part three: How to make your forms more user-friendly
Only one click away ...
Forms are tricky: Users should be able to perform an action without any detours. Between a great content strategy and the small buttons “Register”, “Login” and “Buy” there are only a few fields to fill in. And it is precisely these fields that can frustrate customers so much that they leave your website at the very last moment.
So how do you set up forms so that they are appealing, answer questions that arise and – as a result – get completed by users? Besides an attractive design and optimum functionality, microcopy texts are the answer. We’ll tell you how to use them to make your forms more engaging.
Check the UX design!
If you feel like you have to explain every section of your form with lines of text, you may be failing in UX design. Textual help should only support the design where it is absolutely necessary. For example, when creating a password or the correct spelling of an e-mail address.
A revision of the form template can usually eliminate many ambiguities.
Static
The short texts are visible to users from the beginning and do not disappear until the form is submitted. As they reduce clarity, they should only be used for important information that must not be missed.
The assisting text snippets are placed in the form in such a way that they cannot be overlooked. However, they shouldn’t affect the clarity of your website.
Possible uses:
- Crucial information without which the form cannot be successfully submitted. For example, information about the privacy policy and the general terms and conditions.
- Important notices that users should not overlook. For example, the final note on the imminent completion of a chargeable order.
Display on demand
These notices only appear when someone hovers over or clicks on them. Small info buttons that open a little lightbox with the relevant information via mouseover or mouse click are suitable for this purpose. That’s where you can include longer pieces of information that would otherwise make the form cluttered and confusing.
The advantages of this type of display are obvious: While regular customers can complete the form quickly, new customers can access relevant information. This keeps the form tidy and appealing as well as informative. One disadvantage is that these notes are not immediately visible to users. So don’t use this feature for information that users absolutely have to see!
Possible uses:
- During a hotel room booking, where prospective customers can indicate whether they are travelling for business or pleasure.
- During an online order process, where customers must select in the last step whether the billing address is different from the delivery address.
Automatic display
In contrast to notices that appear on demand, these texts appear automatically as soon as users select a form field. This type of UX writing is especially useful for longer and more complicated forms or processes.
One advantage is that this information cannot be overlooked. However, this function should only be used for forms that are only filled out once. In the case of actions that users carry out more frequently, the automatic opening of the information can become annoying in the long run. For example, when ordering or sending messages as a registered user.
Possible uses:
- During registration: As soon as the password field gets clicked, a tooltip opens that lists the password criteria.
- The cookie bar that opens automatically the first time someone visits a website.
Placeholder
These useful notifications are located in the form fields and disappear automatically as soon as the fields are filled in. They increase the clarity of the form and accompany your customers step by step. However, placeholders must not contain important information that a user may want to revisit.
Make sure that the font colour of the placeholders is clearly different from the rest of the text. A slightly lighter colour than the form field itself is best.
Possible uses:
- In a registration form: Placeholder texts for first name and address could be "Kim Mustername" (gender neutral) and "Musterstraße 1".
- In the contact form: A small, friendly nudge on how a message to your company could begin. This will also help your users to strike the right tone. For example, “Dear punkt & komma team, I would really appreciate if ...” or “Dear punkt & komma team, I would like to ...”.
