Feedback and help

Feedback and help

When the user or system takes action, various messaging patterns are used to show the result or impact.

Feedback

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

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.

System activity

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.



When loading or updating content on widgets, the target widget content is dimmed and the loading indicator appears on the top right.

Active, critical alarms

No alarms to display.

Alerts

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.)


Well done! You successfully read this important alert message.
Heads up! It's good that you read this, but it's not super important.
Warning! Better check this, this is not looking good.
Maintenance mode System on scheduled maintenance.
Oh snap! Something went wrong.

Positioning

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.


Could not find managed object with id '43100001' in database! more



Alerts may appear in three different ways:

Sticky

You don't have permissions to access this content

Remains visible until status is changed.

Dismissible

Could not find managed object with id '43100001' in database! more

Remains visible until the user dismisses it with the close button. Duration doesn’t apply to this type of alert.

Temporary

Done! All changes saved successfully.

Remains visible until the user dismisses it with the close button or duration has elapsed, whichever comes first.

Validation

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.

(success)
(warning)
@
(success)

Long forms

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.

Prompts

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.

Help

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.

Tooltips

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.


tooltip example 1
tooltip example 4

Popovers

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.


popover example 1

Contextual help

When a large explanation is needed, the help content is displayed in the page, providing better insights on specific processes.


contextual example 1


Input help

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.


A short block of help text.

Guidance

Some features have complex configuration processes. Provide a step by step wizard to guide the user through the process.

Step 1


Step 2


Step 3