Common mistakes designers make and how to fix them
Whether it is a signup flow, a multi-view stepper, or a monotonous data entry interface, forms are one of the most important components of digital product design. This article focuses on the common dos and don’ts of form design. Keep in mind that these are general guideline and there are exceptions to every rule.
Forms should be one column
Multiple columns disrupt a users vertical momentum.
Top align labels
Users complete top aligned labeled forms at a much higher rate than left aligned labels. Top aligned labels also translate well on mobile. However, consider using left aligned labels for large data-set entry with variable optionality because they are easier to scan together, they reduce height, and prompt more consideration than top aligned labels.
Group labels with their inputs
Present the label and input close together, and make sure there is enough height between the fields so users don’t get confused.
Avoid all caps
All caps is more difficult to read and scan.
Show all selection options if under 6
Placing options in a selector drop-down requires two clicks, and hides the options. Use an input selector if there are over 5 options. Incorporate contextual search within the drop-down if there are over 25 options.
Resist using placeholder text as labels
It is tempting to optimize space by using placeholder text as labels. This causes many usability issues that have been summarized by Katie Sherwin of Nielsen Norman Group.
Place checkboxes (and radios) underneath each other for scannability
Placing checkboxes underneath each other allows easy scanning.
Make CTAs descriptive
A call to action should state the intent.
Specify errors inline
Show the user where the error occurred and provide a reason.
Use inline validation after the user fills out the field (unless it helps them while in the process)
Don’t use inline validation while the user is typing — unless it helps them — like in the case of creating a password, username, or message with a character count.
Don’t hide basic helper text
Expose basic helper text wherever possible. For complex helper text, consider placing it next to the input during its focused state.
Differentiate primary from secondary actions
There is a bigger philosophical debate regarding whether a secondary option should even be included.
Use field length as an affordance
The length of the field affords the length the answer. Employ this for fields that have a defined character count like phone numbers, zip codes, etc.
Ditch the * and denote optional fields
Users don’t always know what is implied by the required field marker (*). Instead, it is better to denote optional fields.
Group related information
Users think in batches, and long forms can feel overwhelming. By creating logical groups the user will make sense of the form much faster.
Omit optional fields and think of other ways to collect data. Always ask yourself if the question can be inferred, postponed, or completely excluded.
Data entry is increasingly automated. For example, mobile and wearable devices collect large amounts of data without the user’s conscious awareness. Think of ways you can leverage social, conversational UI, SMS, email, voice, OCR, location, fingerprint, biometric, etc.
Make it fun
Life is short. No one wants to fill out a form. Be conversational. Be funny. Gradually engage. Do the unexpected. It is the role of the designer to express their company’s brand to elicit an emotional reaction. If done correctly, it will increase completion rates. Just make sure you don’t violate the rules listed above.Design vector created by freepik - www.freepik.com
Web Developer, Blogger, Creative Thinker, Social media enthusiast, Italian expat in Spain, mom of little 6 years old geek, founder of @manoweb. A strong conceptual and creative thinker who has a keen interest in all things relate to the Internet. A technically savvy web developer, who has multiple years of website design expertise behind her. She turns conceptual ideas into highly creative visual digital products.
After the quarantine, many of us have had to adapt our work and personal routines to the new remote paradigm. As a mother, I decided to share some things I've learned. We've…
This area, which arises from a basic human need, such as the urge to communicate, is constantly changing thanks to the advances of the technological era. Today, we invite you…
Privacy is one of the most important aspects among most users of the popular Facebook messaging application. So much so, that many settings have been included in WhatsApp itself to…
Your WhatsApp messages can be much more original and fun by changing the font, size, or format. Here's how. WhatsApp is the leading messaging app for virtually everyone, with permission from…
Words are carried away by the wind, as long as they are not written on WhatsApp. Sending it was like getting a tattoo, something you'll always like, or yet it'll…
In the previous articles I made a short introduction to the Unix world and in the following article I have dealt with the basic commands for the file system management. Today we are…
As a brand, UX is incredibly important when it comes to keeping your customers happy and on your site. Afterall, the longer they are on your site, the more likely…
I introduced in the previous article, available here, the basic concepts concerning the Linux world. Today we are going to have a look to some basic operations that we can perform…
If you have thought about migrating from Windows to a Unix operating system, or Linux specifically there are things you should know. The goal is to give essential information (and…
Today we are going to talk about a creational pattern that in many situations can represent a useful alternative to the construction of the objects using the constructors: the Builder…
One of the most popular patterns is the Strategy Pattern. It is also one of the easiest patterns. It is a member of the behavioral patterns family, it has the duty…
Welcome back to this overview about the Java world! Today, we are going to talk about a renowned sorting algorithm: the Quick Sort. The Quick Sort is not very suitable for educational purposes because…