Exploring form screens

While not the most glamorous component of an application's user experience, form screens are a long-time staple of software. A form screen can be defined as any screen where the user is expected to explicitly enter or change data, as opposed to viewing or navigating it. Good examples of form screens are login screens, edit profile screens, or the add contact screen from a phonebook app. Over the years, the idea of what constitutes a good form screen has changed, with some people going as far as to shun them completely. However, you can't capture the user's data out of thin air.

The Android standard toolkit provides an excellent and perse collection of widgets and layout structures to facilitate building excellent forms, and in Material Design applications, form screens can often double as a view screen (what will usually be a read-only version of the form screen) thanks to the placement of labels. A good way to understand this principle is to consider the evolution of textboxes. As soon as you have a blank space to be filled by your user, you need to tell the user what to put there, and when we started labeling textboxes, we simply copied how we did this on paper forms--by putting a label to the one side of the textbox:

The issue with this is that the label always takes up quite a bit of space, and takes up even more if you need to include some validation rules for the user (such as date inputs--DD/MM/YYYY). This is where we started adding hints to the input boxes. The label will explain what to add in the Date of Birth textbox, and a hint within the textbox will tell the user how to input valid data:

From this pattern, many mobile applications began to drop the label completely and instead used the hint/placeholder to contain the data on the theory that from the context of the form, the user will be able to infer what data was in each of the textboxes. However, this means that the user has to do a bit of extra thinking in order to make sense of the screen when they see it for the first time. This extra delay can quickly turn to frustration, and reduces how usable your application is. For this reason, Material Design text inputs turn their hints into small labels that move above the textbox when the user focuses on the textbox, making it easier for them to keep track of what information they are entering:

This also reduces the amount of work that needs to be done on form screens as a developer, because you typically won't need to separate the view and edit screens of your application, since the form will always have all of its labeling available. However, it's important to avoid overcrowding your screens with input widgets. Nobody likes to have to fill in lots of data, even if most of it is optional. Instead, always consider the minimum amount of data you need from your user at each point in your application. It's also important to consider how you will ask the user for their data.

We'll start our first form screen as an information capturing screen. We'll be building an imaginary app to track someone's travel expenses, allowing them to capture, tag, and store each of their expenses to be filtered and reviewed later. The first thing we need is a screen where the user can capture an expense and any additional information that goes with it.

As best as possible, you should make input fields optional, but you can always encourage people to give more data by telling them how complete something is. This is a common technique when dealing with a user profile--"Your profile is 50% complete", helps encourage the user to provide more data to raise that number. This is a simple form of gamification, but it's also very effective.