Designing the perfect input field
How input fields can make or break an entire experience
Input fields are essential elements of every app or website. Whether you want your user to subscribe, register, complete an order or simply communicate, input fields are part of the process. But what defines the perfect input field? What’s required, what’s to avoid? Here are some things to pay extra attention to.
Input fields 101
Input fields have one main goal: to get information from your user. In order to do so, you have to 1. Ask for the required info and 2. Provide space for the user to give you this info.
Additionally, some extras such as placeholders, hints or icons might come in handy to enhance usability. Or, in some cases, ruin it.
Placeholders ≠ Labels
When it comes to saving space, using placeholders instead of labels is a bad idea. Not only is this confusing to your user, as the inputfield looks filled in by default, but using placeholders will also make it harder for someone to scan a form. Input fields with placeholders are less noticeable, as people tend to look for empty fields, so there’s a chance a user skips several of them entirely.
Labels make it possible for the user to check their input after filling out a form, since they’re close to the user’s input and don’t disappear when interacting with a field.
“Then what about those shrinking placeholder-label hybrids, used in the Material guidelines?”
The main advantage of this type of form fields, is that they’re great space-savers on mobile devices. The fact that the required info is always visible to the user, is visually helping to not forget the info that was initially asked.
But even with this hybrid between placeholder and label, the problems stated earlier, remain. People can’t scan a form for empty fields, which will leave the user confused and possibly annoyed, with the danger of them not filling out your form. You don’t want to lose your users over something as silly as this, right?
State what you don’t need
Hell, a concept: Having a long form with a bazillion input fields that are all mandatory EXCEPT ONE.
In most cases, mandatory fields are marked with * [an asterisk]. When having a lot of fields, try finding the one in a bazillion without the little asterisk.
I’ll wait…
This might not seem like the biggest issue, but small things do matter in UX and in some cases may even make the difference between a good and a bad experience. In case you’re not so sure about this statement, I recommend reading through this little article by Jakob Nielsen.
Now, back to the input fields. Instead of indicating which of the fields are required, try marking those that are optional.
To err is human
There’s nothing more frustrating when something is not working without knowing why, so why put your user through this misery? When input fields require a specific input, define exactly what you expect them to provide.
In case of passwords or other input that might need real-time validation (inputs that have one or more requirements to meet): give your user immediate feedback when inserting. This way, users will know exactly when their input meets requirements.
However, don’t use live inline validation for simpler fields where the only requirement of it is that it’s filled. This might distract the user and increases the time it takes to complete an input.
The perfect input field?
Like all design-related matter, everything depends on the context in which a certain component is used. Who is the audience, how long is the form, what kind of input are you expecting, what devices are being used,…
Key to optimise the experience is to provide all the tools a user needs in order to fill out input fields with minimal frustrations along the way.
Of course there’s much more to input fields in the context of forms, but hey, a good start is half the battle, right?
