The create pattern presents users a form used to generate new objects and object details. It is typically triggered by “Create” or “Add” actions. The create pattern is presented in a full-screen dialog on mobile devices or modal dialog on tablets. In the dialog, users are able to input the information related to the object they are creating.
Create dialog on mobile (left) and tablet (right) devices
The create pattern follows the basic structure of a full-screen dialog. Based on object type and object detail, different types of data entry components are used. Hierarchy of data entry components should reflect the hierarchy of object detail.
A. App Bar
The app bar contains:
- Screen title specifies the object it’s creating.
- “Close” icon on the left to discard the new object without saving.
- “Save” button on the right to generate the new object based on information filled in this dialog.
B. Key Information
The data points that define the foundation of this new object are considered key information. This contains properties that help users to identify the object, such as the title of a new task. Usually, at least one of the key information is required for creating the object. The key information should be located at the top of the dialog so users can start with this first. In some cases, key information is pre-populated, and the user may or may not be able to edit these values. The type of information that appears in the key information section differs depending on the use case.
Property details appear after the key information section to gather additional information for the object. In general, one form cell is used for one property. Cells can be grouped together based on the information hierarchy of the object. Choose the form cell that best serves the data type.
The accessory area is at the bottom of the dialog. It includes elements such as notes and attachments.
Create dialog anatomy
Simple property form cell in a create dialog
Note form cell in a create dialog
Chip Form Cell – Single or Multiple Selection
Use a chip form cell when users need to make selections from no more than eight predefined values. Use a choice chip form cell for single selection. Use a filter chip form cell for multiple selection. If the number of values is more than eight, or the text of value is too long to display within chips, use a list picker form cell instead.
Chip form cell in a create dialog
List Picker Form Cell– Single or Multiple Selection
A list picker form cell is used when the property has long values or more than eight possible values. It is also used when the number of values is dynamic or unpredictable. With a list picker form cell, the user is able to search and select the data entry.
If a list is multi selection, the selections can be grouped in a “Selected” grouping to enable users to deselect without having to scroll down a large list.
List picker form cell in a create dialog
Switch form cell in a create dialog
Slider form cell in a create dialog
Attachment in a create dialog
Behavior and Interaction
The create pattern is triggered when users tap on an “Add” icon or create/add menu options. The trigger should state clearly what object it is going to create.
The create flow triggered by the create menu in app bar
The “Close” icon closes the dialog without having to commit. When nothing has been entered by the user, the dialog is closed directly. If there is unsaved input, a confirmation dialog shows up asking users to confirm their action.
The “Save” button creates the object based on user input. By default, display the newly created object’s detail page after save so that users can see their changes.
If there’s no individual detail page of the object being created, show the parent page after saving, for example, taking reading for an equipment. Ideally, scroll to the part where user’s new changes are reflected.
Closing a create dialog with unsaved changes triggers a confirmation dialog
The navigation within the create pattern is commonly used to drill down from a list picker form cell into a value list. The animation transition of the navigation should be a push to the next screen.
The app bar title in the new screen should be consistent with the label in the list picker form cell. Replace the “Close” icon with the “Back” icon to navigate back. There is no “Apply” button in the drill down page due to all changes being auto-saved. If the search function is available, use the expandable search and show the “Search” icon in the app bar.