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 placeholder text to guide members through our forms. Use the most important placeholder text in the following order:

1.  Optional (Only when a form has optional fields, which we should try to avoid. We do not need to mark required fields.)

2.  Units

3.  Instructional text such as “Add a unique name for your recipe to search later”. 

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. This also saves space on the screen. For example, the “Are you nursing?” question in onboarding only appears once a member selects that she is female.


Active States


Complete States

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

Field States and Examples 3.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 error notifications at the top of the screen 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 at the top of the screen with a notification and highlight the fields that need to be fixed (e.g. fat and calories in the previous example).

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 push the error screen once the member tries to submit the form.