Forms

Types of Forms

Simple

Simple forms are short groupings of related inputs. Use a simple form when you only need to answer one question. For example, an address form has multiple related inputs, but they are all part of the answer to the question “What is the user’s address?”

Simple forms in Mews include information like, new customer, address, name, phone number, nationality, etc.

Sectioned

Sectioned forms are grouped into chunks, each with a clear section heading, to help the user quickly scan the form and see what is being asked.

A sectioned form is good when you need to ask multiple questions. For example, when inviting a new user to the system, there are sections for User details and for Roles and permissions.

A sectioned form is offered in a single screen and should have a single call to action. If you need more sections than comfortably fit on a single screen, you should consider a multi-step form.

Multi-step

A multi-step form distributes input fields across multiple screens, with a progress indication to show how the user is advancing through the form. Each screen should have a coherent group of fields, with a linear connection between the sections.

Multi-step forms can save progress throughout the process and allow users to revisit prior steps to review their submissions.  
Because users cannot easily scan ahead, provide instructions in advance for any documents the user may need to have at hand, if the forms are collecting personal data or there are legal requirements that need to be met. Multi-step forms contain a form title, and clear section titles, with a Progress indicator.

For example, when checking in online, guests will need to have their passport nearby. During KYC processes, Mews customers need to have legal identification ready to scan. 

---

Best practices

When to use

• User registration and login: For those cases we have the users create an account or authenticate themselves. Registration forms collect information like usernames, passwords, and email addresses, while login forms verify user credentials.
• Surveys and feedback: In case we have to collect user opinions, feedback, and survey responses.
• Contact and support requests: Contact forms allow users to reach out for support, ask questions, or provide feedback.
• Booking and reservations: Forms enable users to book services. These forms will collect details needed to confirm bookings and manage reservations.
• Profile Updates: Forms allow users to update their personal information, preferences, and settings within their accounts.

When not to use

• Read-only: Do not add a form with read-only info in the text field. Instead, use a Simple list
• Limited user context: If the Form is not relevant to the user’s current context or task, it can disrupt the user experience. Make sure that Forms are contextually appropriate and placed where users expect them.

---

Do’s and Don’ts

Clear information hierarchy: To ensure user-friendly Forms, establish a clear information hierarchy, use appropriate sectioning, maintain consistent headers and follow the spacing guides for better comprehension of information clusters.

Implement progressive disclosure: Reveal supplementary content triggered by the user's preceding choice. This show/hide method means users can concentrate on pertinent data and keeps workflows concise. 

Minimise info icon use when possible: Because Tooltips are only visible when hovering over the info icon, they are not as user friendly or accessible as helper text. Minimise the use of these where possible. The info icon and Tooltip should only be employed in extremely rare situations to avoid cluttering the user interface.
Whenever you are thinking of adding a tooltip, consider whether you can redesign the inputs to avoid the need for a tooltip, or whether a different kind of text element could be used instead (e.g. section description, helper text, placeholder, etc.)

Avoid multi-step forms for settings: Because it is important to see all the settings/controls that will be applied in one place, these kinds of forms may require scrolling. Multi-step forms make it harder to go back to previous sections and change the settings, so these forms tend to scroll.
This makes it important to chunk the information into sections, to make it easier to scan. Use section headings to describe what each chunk of information controls.

Building Blocks

Actions  

Feedback