When designing forms designers are often tasked with displaying the options available to the user in UI tools such as radio buttons, dropdown, and input fields.
We place this data into the appropriate UI tools and apply validation designs if required. However, we don’t often think about the empty state value of these fields.
Empty state data is critical to informing and assisting the user enter or select the correct data that is required.
Validations on Input Fields
In this post I’ll touch on the best uses of values for input fields. Firstly let’s look at validations.
Input validation is defined at the process of testing input received by an application for compliance against a standard defined within the application. It can be as simple as strictly typing a parameter and as complex as using regular expression or business login to validation input.
There are two types of input validation you can use. We can either validate it immediately, usually on the input field itself; or after we’ve sent the form off to the system to check. I.e. on submission, returning via an alert bar at the top of the form.
When validating immediately I’ve seen two options. We display the validation message below the input field, or within the input field.
Both options inform the user and highlight the fields with errors. Depending on the length of your input field, using the second ‘within’ option may limit the number of characters you can use for your error message. Something such as ‘Maximum 50 characters exceeded’ may not fit into the name input field.
Another option is to reduce the error message text size and highlight the input field to allow for more options. This allows designers to maintain consistency where the error message varies.
All options above can be considered when designing for software, and added to a design system for consistency.
Placeholder inputs
Let’s now talk about what it looks like before a user would select or input data.
As outlined by W3schools, a placeholder attribute specifies a short hint that describes the expected value of an input field. For example a sample value or a short description of the expected format.
The placeholder attribute works with the following inputs:
- Text
- search
- url
- number
- tel
- password.
Ideally when designing for input fields we should always add in placeholders. As a rule, when available, any contextual help that we can give to users to assist them in their user journey should be given.
Our or empty state placeholder value should vary based on the input field we are using.
Let’s look at dropdown menus. If a dropdown menu doesn’t offer a search function and only predefined values, we ideally tell users that what they should do. Select from a number of options. Examples below:
I tend to prefer making the placeholder values a lighter shade of the selected options as users can then distinguish between a placeholder and a selected value. This is important for larger forms and to reduce cognitive load when working with multiple screens or busy/distracted users – which all of us today are.
Type to search input placeholders
Now what if your dropdown allows user to type to search those pre-defined values. Great! This is ideal for drop downs with many values. For example when users search addresses or countries. It is unlikely they will scroll hundreds, if not thousands of values. Typing to search gives the users a quick way to get to their ideal value quickly.
This however this means we need to adjust the placeholder text to tell the user that it’s possible. Here are some options of what I may do when using a type to search dropdown.
Depending on the user base or the dropdown field (I use country here as an example), we need to alter the placeholder or default value. When a dropdown allows for search we can simply tell the user this in the default value.
Change the placeholder value when user selects
In addition to this, we can change the placeholder value once the user has selected the input field, giving them more contextual help.
Giving them an example upfront might be another option for some users. Particularly for hard to remember values or to tell users how the system wants them to search those values. For example if a system wanted users to input the date, we can use a wide variety of formats.
- 20 August 2024
- 20 Aug 2024
- 20/08/24
- 08/20/2024
- Tue, 20 August
- 20 – 8 – 2024.
Giving them an example simplifies the process of retrieving data from the user.
And there you have it. A quick overview of placeholder values or empty state values on input fields. Leave a comment or send me an email about how you’ve used placeholder values to assist your users in product design.
Happy designing and stay informed!
