Key UX concepts

Primary configuration section

Be critical of the inputs you place in the primary section, and keep it as short as possible. Make resource creation as easy as possible – having a shorter form to complete both decreases the initial mental load and makes it faster for users to complete your form.

One-click to create

Use good defaults in as many inputs as possible to allow users to simply click the Create button to have a running resource.

Data symmetry

The order of the input fields in the primary section will be re-used as the default table column display and order.

Validation

There are two types of validation, which are frequently used together:

  • Form field validation: Most often used for client-side validation, which processes information and provides feedback, before the form is sent.

    • This feedback is presented as error text on individual form fields.

    • It is best used for validating specific values such as missing required fields, incorrect formatting of values, and unacknowledged confirmation fields.

    • This type of validation can be invoked on the completion of each field or upon form submission.

  • Page level form validation: Most often used for server-side validation, which processes information after the form is submitted, and returns either a success or failure.

    • This feedback is presented in one of two ways: either as a page level alert above the form's action buttons (in the case of a recoverable failure), or a flash on the page following submission (in the case of success or immutable failure).

    • It is best used for validating requests to the server that result in recoverable errors such as insufficient capacity, exceeded request limits, and permission errors that can be updated. Failure messages should be communicated in the context of the form when possible, to prevent the user from having to re-enter any information.

    • This type of validation is invoked upon form submission.

Exiting the form

Ensure users can exit the form at any time. If a user has unsaved changes in the form and attempts to exit before completing the flow, you must prompt users with a modal asking them to confirm that they want to exit the flow. If there is no user input, you may end the creation flow without a prompt.

Building blocks

A
B
C
D
G
I
H
E
F
A
B
C
D
G
H
I
E
F

A.
Breadcrumbs

Use full service name or (approved) abbreviated service name as the root page in the breadcrumbs, as a link. As the last entry of the breadcrumbs, use Create or Launch, followed by the form page header.

B.
Form page header

This is the title of the page. It indicates what the user is doing in the current step. Begin the title with an active verb and format it as heading 1. The title begins with an active verb. Use the following: Create [resource name]

C.
Container

In most cases, use a single container for all the configuration inputs of a single resource. Consider using multiple containers if the choice is highly complex and would benefit from having its own section in the form layout. Example: Choosing a database type.

D.
Primary form fields

Keep the primary configuration section as short as possible. Criteria for primary section inputs:

  • Any required field that we can’t provide a good default for. Example: password.

  • Any field that 80% or more of users would expect to see, and want to know the value of in order to be successful. Example: Knowing the security group associated with the resource, even when we provide a good default.

E.
Additional expandable section - optional

Place as many inputs as possible into the additional settings section for each resource card. This allows the user to keep the primary section as short as possible, so the user can focus on the most important tasks. The label of this section should align with its container's heading, and similarly, should be a noun describing its content, not an action.

F.
Form action buttons - optional

Standard set of actions at the bottom of pages in the form. These allow the user to commit configuration and begin creating the resource(s) or to exit the create flow.

G.
Info link

Use the Info link next to a form field label or section header to open the help panel.

H.
Help panel

Place supplemental, helpful information in the help panel. For more information about structuring help content and how users can open help panels, see help system.

I.
Side navigation

Navigation is closed by default on forms. For more information about structuring side navigation content, see service navigation.

General guidelines

Do

  • Apply the recommended max content area width and default panel states by setting contentType='form' in the app layout component.
  • Follow standard form validation.
  • Only highlight optional fields.
  • Group related input fields together under a subheading if there are multiple types of configuration inputs.

Don't

  • Don't disable the primary button, even if the user has not completed the required inputs.

Writing guidelines

Breadcrumbs

The last breadcrumb item should match the page title exactly.

Form page title

Begin page titles with an active verb. Most likely it will be: Create

Examples: Create distribution, Create S3 bucket, Create function

Page descriptions

Follow the writing guidelines for forms description.

Container headings

Begin container headings with a noun. Follow the writing guidelines for headers.

Additional expandable sections

The label of this section should align with its container's heading, and similarly, it should be a noun describing its content, not an action.

For example: Additional settings.

Container descriptions

Follow the writing guidelines for headers.

Form

Follow the general writing guidelines for forms.

Placeholders in fields

Follow the writing guidelines for placeholders in inputs.

Defaults in fields

Follow the writing guidelines for select.

Constraint text

Follow the writing guidelines for form fields.

Buttons

  • The button that allows the user to exit the form should always use the text: Cancel

  • The button that allows the user to submit the form should always use the format: [Active verb] [resource type]

    • For example: Create distribution.

  • Follow the writing guidelines for buttons and form actions.

Related patterns and components

With the create new resource pattern, users can create new resources.
Use the multipage create, which employs the wizard component, when you want users to create resources by completing a set of interrelated tasks. We recommend multipage create for long or complex configurations.