Frequent app functions¶
Common actions¶
Many applications share common actions and associated icons. For example for actions triggered by buttons, action links or menu entries.
| Action | Icon | Description |
|---|---|---|
| Create | Creates a new object or entity, which gets persisted on completion. For example, create a new user account. Use Duplicate when a user wants to start using an existing similar object. | |
| Add | Adds or assigns an existing object to a group or selection. For example, adding a user to a group. | |
| Delete | Deletes an object permanently. If needed, warn users before deletion. For example, remove a user from a group. | |
| Remove | Removes or un-assigns an object from a group or a selection. | |
| Edit | Opens an object's edit mode, enabling changes to be made. This triggers a state change in the current context or directs the user to a different screen or modal to change data or values. Edit mode can be exited using Save or Cancel. | |
| Save | Persists changed data permanently. Mainly used for application entities like saving the user name change. Use Apply to confirm a view or filter change. | |
| Apply | Applies changes or changed setting temporary. | |
| Cancel | Stops current action and returns to previous context. Warn users about potential data loss if significant unsaved changes exist. Use a Secondary or Tertiary button to cancel actions. | |
| Copy | Copies the selected objects to a temporary memory, e.g., clipboard. The object can be pasted later. | |
| Paste | Inserts the data from the temporary memory (e.g., clipboard) to a form or other component. | |
| Duplicate | Creates new identical instances. The duplicate must have a different name. Use the following naming conventions: Copy of {{originalName}} as the default name and Copy {{count}} of {{originalName}} for any existing default name. | |
| Clear | Removes data from fields, deselects options or resets controls. E.g. see Search Bar. | |
| Reset | Reverts values back to default or previous state. | |
| Refresh | Reloads a view of an object, list, or data set. | |
| Close | Exits the current context (without saving) (see Modals). |
Best practices for actions¶
- Assign the most important or likely action to the primary button, but use only one per screen
- Use secondary or tertiary buttons for other actions based on their significance
- Define the representation or hide the action, if the user does not have the required permissions (e.g. disable button)
- Inform user about financial or legal restrictions and implications (e.g. binding offers, fees, …)
- Show a Progress Indication matching to the use case and expected duration
- Provide bulk actions if many objects are possible in a specific context
Restoring behavior of items¶
- Be clear on deleting, removing, creating and adding
- Create goes hand in hand with Delete, it usually means it cannot be restored
- Add goes hand in hand with Remove, it usually means it can be restored
- Do not use Delete and Remove as synonym
Do's¶
- Create a chart and delete a chart
- Add a sensor to a chart and remove a sensor from chart
Don'ts¶
- Create a chart and remove it
- Add a sensor and delete the sensor
Overview¶
Analytics¶
Detail view¶
Device properties¶
Do's¶
- Product name
- Tag
- Manufacturer
- Type
- State
- Article number
- Serial number
- Installation date
- HW version
- FW version
- SW version
Upload¶
Do's¶
- Drag a file here or select a file
- Drag files here or select files
Don'ts¶
- Drag and drop here or browse
Comments¶
Do's¶
- Write comment
- Write comment and approve
- Write comment and reject
- Write your comments here
Don'ts¶
- Write a comment
Grid and list actions¶
Do's¶
- Group
- Sort
- Filter
- Edit columns
- Search by XY
Notifications¶
Except where otherwise noted, content on this site is licensed under MIT License.