Default

Below is an example of how a Compacta may be used with fields and inputs. Any form related elements can exist inside a Compacta.

Error states

When a user attempts to progress through the form, errors are captured at this point. Any Compacta that has an error will automatically open and highlight the error inline.

User experience

The Compacta was designed to meet the need of capturing multiple instances of detailed information without overwhelming users, particularly on mobile devices. An example use case may be multiple questions about a customers’ assets.

It is always editable, with the drawer state an easy and familiar show/hide interaction. The remove button is located at the top of an open Compacta for consistency, recall, and to keep all functions in one place.

The numbering of each Compacta is an accessibility consideration for low vision/zoom and screen reader users to help navigate and identify groupings of content.

States and behaviours

The Compacta has 2 states: open and closed.

Default state: the first Compacta is open.

Adding another: the previous Compacta automatically closes a new Compacta appears in an open state.

Opening, editing, and closing: the user is free to open, edit, and close any Compacta at any time.

Assigned fields

It is possible to surface content on a Compacta when it’s in its closed state and an important part of making the component work. This enables users to scan important information without opening, making the review process faster and less overwhelming. There are up to three fields with which a designer and developer can assign to surface in the Compacta closed state. Generally speaking there should be a minimum of 2 and a maximum of 3 fields to give enough context and meaning.

An example may be:

1 NAME: to differentiate on multi-applicant forms

2 TITLE: of product or ‘thing’

3 AMOUNT: or numerical detail

Pre-populated content

Pre-populating fields with content brings complexity for data management, technology, data quality, risk and compliance, and users’ cognitive load. However, if done well with good quality data it can expedite form progress.

If pre-populating Compactas, use an alert above the first instance to highlight the need for the user to open and review their information as all pre-populated Compactas should be closed by default. By having all pre-populated Compactas open for review would be potentially overwhelming.

Dos and don'ts

• Don’t nest Compactas within Compactas
• It should never be used to simply “tidy up the screen”