Forms

1

Form title 

Helps orientate the user.

Keep the title short and use it to clearly explain the reason for the form.

Form title generally sums up the purpose, e.g. Check-in, Reservation, etc. 

2

Form description

Provides additional context.

Use this to give more context to what is being asked of the user or why it is being asked. If the form is common knowledge, you can omit the description.  

Provide instructions in advance for anything users may need if forms are collecting personal data and legal requirements need to be met. (e.g. passport for check-in, ID for KYC forms). 

Yes

3

Section title 

Helps orientate the user and allows them to scan the form quickly, and fill in the form without missing any required sections.

If you need a lot of information from a user, break the information into logical chunks or sections.

Label each section clearly, briefly and directly. This may include contact details, dates, etc. 

Needed for new sections

4

Section description 

Provides additional context.

Use this to give more context what this section is about and why we are asking for the particular information. If the form is common knowledge, the description can be omitted. 

Yes

5

Field titles/Field labels 

Clearly indicates what kind of information to enter in the field.

Field titles/labels are the labels above each input field that instruct users what specific data to enter. Labels should be concise (one to three words only). Any additional details needed should go in helper text, placeholder text, or tooltip (depending on context). 

6

Helper text 

Provides clarifying examples of what to enter in the field.

Helper text gives an extra explanation beyond the label.

Use it when the label isn't clear enough on its own. You can use helper text to provide reassurance about why information is being collected. E.g. for a field to collect sex as listed on passport “This information is a legal requirement in the country of your stay”.

Yes

-

Placeholder text

Provide additional guidance on format of specific content.

Avoid placeholders if possible. Placeholder text should not be used to communicate critical information, as this is poor accessibility.

7

Error message 

Guides users to prevent or recover from errors

Error messages let users know what went wrong and how to fix it. Error messages in form fields should be placed directly by the field the error occurred in and should explain what information to enter there to correct it.

8

Buttons

Abstract terms like “Submit” give the user the impression that the form is generic. Although brevity is key in buttons. Try to tell the user specifically what action your button will perform.

"Submit" can be altered to fit the situation more appropriately such as "Book now" on reservations, or “Send invite” when creating new users. Button text should clearly indicate what will happen when immediately engaging with the button not what will happen at the end of the flow. Use sentence case on buttons. Mews typically uses Go back and Next on buttons in multi-step forms.

9

Tooltip

Aim to use the helper text or placeholder text in 95% of cases, and only use the tooltips when it cannot be avoided. (Some backend forms can only use tooltips in current forms.) Tooltips are for longer blocks of text, that would go over multiple lines in helper text.

Yes