Field States and Examples

EMPTY STATES

Wherever possible, fill in fields with default values to help members get through forms quickly and efficiently. For example, on food detail screens, date defaults to today, and mealtime defaults to the current mealtime.

Use hint text to guide members through our forms. Hint text should display units, and let members know if the field is optional.

If a field is conditional, show that field only when a user satisfies the condition required. Otherwise, hide the field so that we’re not showing members irrelevant information. For example, the “Are you nursing?” question in onboarding only appears once a member selects that she is female.

 
And-Empty.png
 

ACTIVE STATES

When a text field is active, it becomes highlighted and the hint text tranforms into a label. This makes it clear that a member is interacting with the text.

When selecting from a picker, single-item or multi-item set, display options in a dialog so members don’t lose context of their task.

 
And-Active.png
 

DISABLED STATES

All fields have disabled state. Only display a disabled state if another selection has made items unnecessary.

 
 

COMPLETED STATES

We show units once a member moves focus away from a field.

 
And-Complete.png
 

ERRORS / WARNINGS

All error messages should describe the error and what the member must do to correct the problem and move forward.

Use inline error messages to help members fix problems with specific fields. The field with the error should be underlined in red with the error text placed below that field.

Use snackbars to help a member fix a problem with multiple fields. Where possible, underline the fields involved in the error. For example, in Calculator, if a member enters nutritional information that doesn’t add up (e.g. fat grams are greater than calories), then we notify them with a snackbar and highlight the fields that need to be fixed (e.g. fat and calories).

Where possible, prevent errors by guiding members through forms with the information they need to succeed. For example, we provide a healthy goal weight range when asking members to provide a goal weight.

Where possible, validate fields and show errors as soon as the member moves focus away from a field. However, if the member moves focus away from the field, and leaves the field empty, do not show error messaging for it until she submits the form.

For errors that have to do with multiple fields, wait until the member submits the form to display page errors.

Take members to another screen when an error requires more than 2 lines to explain or contains more sensitive information (like legal information, age limits, BMI). We should show the error screen once the member tries to submit the form.

 
And-Errors-1.png
And-Errors-2.png