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 save

Use good defaults in as many inputs as possible so that users can choose 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

Validation is performed in two ways:

  • At the page level when the user triggers the Next button

  • Using standard validation

Use a flash message if creation fails, not for validation.

Building blocks

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

A.
Breadcrumbs

Use the service name for the root page in the breadcrumbs, and make it a link. For the last entry in the breadcrumbs, use Edit.

B.
Form page header

For the title of the page, use a heading 1.

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

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

These allow the user to commit changes to the resource or to exit the edit flow. Place buttons below the resource cards.

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.

Flow charts

General guidelines

Do

  • Launched from resource’s global edit button: Show all editable resource cards for the entire resource in a single page view.
  • Launched from in context edit button in a container: Show only a single editable resource matching the resource container from which the user clicked edit.

Writing guidelines

Form page title

  • Use the word Edit and then the resource name or appropriate resource type.

    • For example: Edit KJ3829HD9 or Edit distribution

Container headings

Use the same resource card header titles from the create flow.

Additional expandable sections

Follow the writing guidelines for create flow.

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 submit the form should always use the text: Save changes

  • Follow the writing guidelines for buttons and form actions.

Accessibility guidelines

Make navigation links, form inputs, and buttons keyboard accessible, in a logical order.

Related patterns

With the view resources patterns, users can find and take action on a collection of resources in the most efficient way possible.
On a resource details page, users can view the details of a resource and, when relevant, any related resources.