When the user or system takes action, various messaging patterns are used to show the result or impact.
Feedback communicates the results of any interaction, making it both visible and understandable. Its job is to give us a signal that a task was concluded, or that the system is actively retrieving data or performing an operation.
It tells us if errors have occurred, and if so, what to do about them. Feedback can be attention-grabbing via modal dialog prompts or it may be as subtle as an icon badge that communicates status.
Feedback also encourages and guides users through steps in a process.
Icons may be used in feedback components. Follow these guidelines when deciding which icon to use in your messages.
Help - Click or hover to display inline help content.
Success - Action was completed successfully.
Warning - Something undesirable might occur.
Error - Something went wrong.
Forbidden - Not allowed.
Info - Additional information (either positive or negative) is available
System - Maintenance (or admin) related message.
To communicate that the system is actively retrieving data or performing an operation, use the following:
On the top bar and widgets;
On navigator buttons.
When loading the page appears in the main top bar.
Demoboard Monitor and Control
When loading or updating content on widgets, the target widget content is dimmed and the loading indicator appears on the top right.
No alarms to display.
Use an alert as feedback mechanism to communicate important, high-level information after the user takes an action. (e.g. communicate a successful process, an unsuccessful process, or a warning.)
Error, warning and success alerts usually appear on top of the page. If there are several at once, stack them in chronological order starting with the most recent on top.
Demoboard Monitor and Control
Alerts may appear in three different ways:
Remains visible until status is changed.
Remains visible until the user dismisses it with the close button. Duration doesn’t apply to this type of alert.
Remains visible until the user dismisses it with the close button or duration has elapsed, whichever comes first.
Use validation states on form controls to clearly inform the user of the result of the form fields input.
There are 3 validation states: Success, Warning and Error.
On success and warning states, this validation changes the border of the form fields to the state's corresponding color and adds an icon to their right. In case of error, useful information is added to the bottom right of the field.
When using long forms, in addition to the "Save" button on the bottom of the page, once there's any change to a form value, a floating bar with an active Save button will slide into the bottom of the window.
A prompt is a notification that requires an action from the user to proceed.
Prompts are used to communicate system-related messaging. They're used to get confirmation on destructive operations, to inform users about an upcoming maintenance or to warn that they're about to be logged out due to inactivity.
The user is given one or more options to proceed and there's no close icon. In order to dismiss prompts, the user must pick one of the options presented.
Prompts behave like modals in a way that it sits on top of a mask that obscures the rest of the UI below.
Having extensive documentation seems just natural to provide contextually appropriate and adaptive support.
The help system should have three essential qualities:
- Available without interfering. Some type of help should be available but it should remain out of the way until users need it. And when they do, it should be easy to find.
- Succinct yet descriptive, in plain language. Help messages should use only as many words as are necessary, in a style that is understandable.
- Unintrusive. It should be easy for users to return their attention to their original task after seeking help.
With these qualitites in mind, we provide four levels of help:
- Tooltips For labeling and to display helpful short sentences and information;
- Popovers Especially suited for longer sentences, HTML content or provide links to Cumulocity's guides;
- Contextual help Inserted directly in specific layouts or components;
- Guidance Step by step wizards for complex chains of operation.
Every link or button should have a tooltip providing complementary information on the action or link they provide. To use this, just add a
title parameter to each button or link.
If you need to provide complementary information immediately, by hovering an icon for example, use the custom tooltip.
Tooltips aren't suited for long content, use popovers for this purpose. Popovers are added by using a visible
button containing the icon next to its subject.
These popovers should be triggered by a click, enabling this to work across all devices.
When a large explanation is needed, the help content is displayed in the page, providing better insights on specific processes.
For brief explanations (shorter than a sentence), you can place the text underneath the field, if the explanation is lengthy, use a popover.
You can also use placeholder text to provide an example of the type of input required.
Some features have complex configuration processes. Provide a step by step wizard to guide the user through the process.