Notifications

Whether something goes wrong or just the way you wanted it to, your users will want to know. It’s really bad to show an uninformative message, but if you don’t show a message at all, you can be sure that users will stop using your application.

Tone of voice

We provide “tones” for four common situations:

Info messages let users know that something happened in the system that wasn’t out of the ordinary or unexpected and usually isn’t tied to user interaction like, “Verify your e-mail to unlock all features”

Success messages make it obvious to users that their interaction with your application was successful.

Warning should appear when users are about to do something that is destructive or when the result of an action is unexpected, but isn’t an error.

Danger or error messages are used to inform users that something went wrong, and help them out.

Critical messagse should be used when there is a critical situation that needs immidiate action.

Available modifiers for tone are:

kx-notification--info kx-notification--success kx-notification--warning kx-notification--danger kx-notification--critical

In addition we provide a neutral tone if no modifier for tone is applied:

Neutral text

The type-modifier is a class applied on the parent element:

<div class="kx-notification kx-notification--success kx-flex kx-align-items-start kx-justify-content-start">
<div class="kx-notification__content kx-flex kx-flex-wrap kx-align-items-start">
    <div class="kx-notification__body">
        <p>Well done! You deserve a raise!</p>
    </div>
</div>
</div>

Types of notifications

Block

By default, all notifications appear as block messages, as shown above. These are great for giving the user contextual feedback regarding their interactions with the application. E.g. A message appears after the user has saved recent changes.

Banner

An alternative type of notifications is the banner. It should always be placed above the header. The text in a banner is centered. Notifications used as banners also appear more saturated in color.

New VR-experience has arrived. Try it out!

We’re completely operational, and all our systems are functioning perfectly.

Our systems are experiencing connectivity problems. Slow responses may occur.

Oh no! It seems we lost connection with the server.

To make a notification a banner, add the class kx-notification--banner to the parent block:

<div class="kx-notification kx-notification--warning kx-notification--banner kx-flex kx-align-items-start kx-justify-content-start">
    <div class="kx-notification__content kx-flex kx-flex-wrap kx-align-items-start">
        <div class="kx-notification__body">
            <p>Our systems are experiencing connectivity problems. Slow responses may occur</p>
        </div>
    </div>
</div>

Guidelines using banners

• Use a notification banner when a message has service-wide implications.
• Never use a banner for messages specific to one page. Instead, use a default block notification below the page title.
• Never stack two or more notification banners adjacent to one another.
• Display an “x” button to dismiss notification banners, such as notification of uptime/downtime in the service.
• Avoid using an “x” button for messages that are promoting important changes in design or experience.

Editorial Tips for banners

• Limit banner messages to no more than 100 characters.
• Use friendly conversational language.
• Avoid using language that sounds like a robot or computer speaking.
• Avoid content such as lists or long form text that wraps a banner message in wide viewports.

Inline

The last type of notification is very similar to the block-type. It uses slightly less padding and smaller text. This type is perfect for micro-copy and contextual feedback in for example a form-context.

Save, and come back later?

Email is valid

You have unsaved changes

Password is too short

Notifications with icon

Icons help convey the message faster. A check mark (tick) usually means that something was done successfully. Combining colors and icons can even help users that don’t speak the language, or users with disabilities, comprehend what your app is trying to tell them.

Notification block with icon

Notification block with icon

Notification block with icon

Notification block with icon

Notifications with title

Notification Block Title

Notification text

Notification Block Title

Notification text

Notifications with title & icon

Notification Block Title

Notification text

Notification Block Title

Notification text

Dismissable

Notification Block Title

Notification text