Feedback - action needs reaction

Summary

It is very important to keep the user informed about the current status of the system. But it is also about guiding the user and preventing errors. Each type of feedback has certain characteristics or advantages and is therefore more suitable for some use cases than others. For the user experience it is important to use the right type of feedback to inform the user in the best possible way. In order to understand for which use case the respective type of feedback suits best, it is important to understand the advantages of each type.
(There is also a dedicated styleguide page for each feedback type).

Alert

Alerts are rather discreet. The information they contain is more of a tip or hint, but not required to complete a task. They also fit well into the layout of the page, which is one of the biggest advantages of this feedback type. Alerts can always be displayed at exactly the point where the user is currently taking action. The component in which the alert is or appears changes little or not at all. This means that the user is not interrupted in his or her workflow.
Alert

In case an alert is displayed after an action has been performed, it should be in the user's view. If necessary, the scroll position must be adjusted.

Signs for the use of alerts

• The layout of the page should remain the same so that the user does not get lost.
• It is rather additional information that is not absolutely necessary to finish a task.
• The initial state of a section where items can optionally be added by the user.
• You want to present information in more detail and more prominent than in a tooltip.

Empty State Images (ESI)

ESIs interrupt the user's workflow and attract a lot of attention. An ESI can fit into the layout of the page, but in some cases it can also overwrite the entire layout of the page. It is therefore especially important that they clearly signal to the user what is happening, why it is happening and what the next action is. The great advantage of ESIs is that frustrations or errors can be mitigated. Furthermore, the user is motivated to take action and it is always a good opportunity to enhance the user experience.
Empty State Images (ESI)

Signs for the use of ESI

• There is nothing to display. Either by restrictions in the search/ filtering, or simply because there are no items yet.
• The missing content is essential for the successful completion of the user's task.
• You want to draw attention to an object.
• A message that is disappointing for the user should be "nicely wrapped".

Growl

A growl notification is very noticeable, but barely interrupts the user's workflow. On the one hand, because the lifecycle of a growl is limited and it disappears even without any user action, and on the other hand because the layout of the page is not affected. This is also the biggest advantage of growls. Their independence from the current view. So if the view changes or a modal is closed, growls are the right choice.
Growl

Signs for the use of growls

• A general message is sent from the platform, which cannot be assigned to any element on the page.
• If the view changes after the completion of an action (e.g. by scrolling, closing a modal, navigation back or the like).

Modal

Modals capture user attention and prompt decision-making or system interaction. They are well suited for presenting tasks with limited screen estate, ensuring the users understanding and efficient task completion.
Modal

Signs for the use of modals

• There is an information that is so important that the user must see it.
• Breaking down complex tasks into smaller steps.
• In the case of a destructive action, to make sure that the user has not accidentally taken an action that he might regret later. Two of the most common cases where data can be lost are:
  1. The user clicks the delete button. (Attention: We distinguish between delete (gone for good use modal) and remove (can be easily recovered)
  2. The user has unsaved data in a form and navigates somewhere else or tries to reload the page