Growl Notification

Summary

The .wui-growl-notification is one of several ways to inform about what is happening in the system. For more information about the other feedback types and when a growl should be used, see "Feedback - action needs reaction".

• Transient. If the specific growl is not defined as sticky, it will fade out after 2.5 / 4.5 seconds automatically. Hovering the growl will reset the timer and clicking it will stop the timer and pin the notification until the user clicks the closing - x.
• Stick growls. Growls from the categorie "danger" are sticky. The notification won't disappear until the user clicks the closing - x.
• Position. Notifications appear in the bottom right corner.
• 4 states. Different styles for success, info, warning and danger notifications.
• Consecutive growls. Every new growl is stacked on top of the others.

Related pages
Style guide: Feedback - action needs reaction

Growl variants

A growl notification serves two main tasks. First - and this is the more obvious task - it informs the user about the current state of the system. Second, we use the growls to guide the user. For example, if a user adds an item to the shopping list, a success growl appears with a link that redirects to that shopping list.

After creating an item and the corresponding page change (from the detail to the overview page), the growl can also help users to find the just created item again. Especially if the overview page is sorted alphabetically, the chance is quite high that the just created article disappears on the back pages. We use growls mainly for areas where there are a lot of items, to give the user the possibility to jump back to the item just created.

Growls should be used wisely and not inflationary. On the one hand, we want to avoid flooding the user with growls. On the other hand, we do not want to give the impression that every successful action is confirmed by a success growl. This could ultimately lead to a successful action being interpreted as a failure because the "expected/learned" success message is missing.

<div class="wui-growl-notification wui-growl-notification--success m-t-20">
  <div class="wui-growl-notification__icon">
    <i class="fa fa-2x wui-growl-icon"></i>
  </div>
  <div class="wui-growl-notification__message">
    <p class="sg-p">Success</p>
    <code>.wui-growl-notification--success</code>
  </div>
  <div class="wui-growl-notification__close">
    <i class="fa fa-times"></i>
  </div>
</div>
<div class="wui-growl-notification wui-growl-notification--info m-t-20">
  <div class="wui-growl-notification__icon">
    <i class="fa fa-2x wui-growl-icon"></i>
  </div>
  <div class="wui-growl-notification__message">
    <p class="sg-p">Info</p>
    <code>.wui-growl-notification--info</code>
  </div>
  <div class="wui-growl-notification__close">
    <i class="fa fa-times"></i>
  </div>
</div>
<div class="wui-growl-notification wui-growl-notification--warning m-t-20">
  <div class="wui-growl-notification__icon">
    <i class="fa fa-2x wui-growl-icon"></i>
  </div>
  <div class="wui-growl-notification__message">
    <p class="sg-p">Warning</p>
    <code>.wui-growl-notification--warning</code>
  </div>
  <div class="wui-growl-notification__close">
    <i class="fa fa-times"></i>
  </div>
</div>
<div class="wui-growl-notification wui-growl-notification--danger m-t-20">
  <div class="wui-growl-notification__icon">
    <i class="fa fa-2x wui-growl-icon"></i>
  </div>
  <div class="wui-growl-notification__message">
    <p class="sg-p">Danger</p>
    <code>.wui-growl-notification--danger</code>
  </div>
  <div class="wui-growl-notification__close">
    <i class="fa fa-times"></i>
  </div>
</div>

Timing

Growl notifications should provide users with feedback on their interactions without distracting them too much. In order for the Growl notifications to appear as unobtrusive as possible, good timing is very important. If the notifications are displayed for too long, they could disturb the user, on the other hand they should be displayed long enough for the user to see the status icon and read the text or at least start to read it.
The average reading speed for slow readers is 4 words per second. In addition, it takes about 500 ms to focus new elements on the screen. This results in two different guide values with the respective classes:

1. .wui-growl-notification__animation--fast
   after 2.5 seconds notifications fade, which takes another 2 seconds. Use this class for notifications with less than 12 words.
2. .wui-growl-notification__animation--slow
   after 4.5 seconds notifications fade, which takes another 2.5 seconds. Use this class for notifications with more than 12 words.

Notifications of the "danger"- status do not automatically fade out. They are sticky so that if a user does not observe the screen while an error is triggered, (s)he must still be able to recognize that an error has occurred.