Informational Components

Messages and alerts are used when the user should be notified of an event, such as when an action was successfully - or unsuccessfully - completed, or when an action they are about to submit may cause an error. Some messages should also offer the user more information about any application errors they encounter, and allow them to send it to support.


Tooltips and Contextual Information Icons

Tooltips are often activated when a user hovers over an item they would like more information or clarification about. Sometimes, this can be as simple as listing the associated name of a button or icon. Tooltips should be short and succinct.

Particularly for terms and fields that you suspect a user will need more information about - such as if it's a new requirement, or the terminology is not well known - a contextual information icon is useful. It is generally placed to the right of the term or field, and hovering or clicking on it should reveal a hover that provides additional information.

sp1gv-info-tooltips

Activity and Processing Indicators

Activity indicators help alert the user that there are background activities or processes occurring in the application. If it is known that a process may take more than a second, it is useful to include an activity indicator so that the agent doesn't wonder if the application has frozen or "broken."

sp1gv-info-progress-lowerright02 sp1gv-info-progress-lowerright01 sp1gv-info-progress-processing

Progress Indicators

A progress indicator (or progress meter) provides feedback to the user that a potentially long-running operation is underway. The progress bar shows the percentage of completion and should be used when an operation takes more than two seconds to complete, and when a task is determinate - that is when it has a well defined duration or a predictable end.

Use a label to show the progress value, or to describe the process taking place, or to indicate that the operation has been interrupted. A label is optional, but recommend.

To describe the process taking place, use a gerund (an –ing verb), e.g. ‘connecting’, ‘downloading’, or ‘sending’.

To indicate that progress is paused or has encountered an exception, use past participles, e.g. ‘paused’, ‘download failed’, or ‘canceled’.

sp1gv-info-progress-progressbar

Notifications

Smartpoint uses different styles of notifying the user of information and events, depending on the context.

Application Notifications

This example shows an application error notification. The error notification explains to the user that an error has occurred, and the attached message is relevant, actionable, brief, clear, and courteous.

sp1gv-info-notification-example01 sp1gv-info-notification-example02

"Bar" Style Notifications

The notification bars are useful to quickly alert the user of an event or problem. It should be short, succinct, and specific. It should also be used when we don't want the user to be diverted away from the content they were using when the notification was displayed. The fields that cause the notification to occur are also bordered in the corresponding color to help quickly point out where the error is originating from.

Below are examples of the different types of bar style notifications.

Errors

This example shows an error notification. Often, errors relate to problems with data and data input, or faulty processing.

sp1gv-info-barnotifications-example
sp1gv-info-barnotifications-error

Alerts and Warnings

A warning is not necessarily an error, and should let the user know that an action may cause an error, or alert them to information they wouldn't know about their action otherwise.

sp1gv-info-barnotifications-alert

Success Confirmations

Success notifications, or confirmations, are useful for letting the user know that their action, such as submitting a report, was completed successfully.

sp1gv-info-barnotifications-success

Message Boxes

Smartpoint utilizes pop-up message boxes for a variety of uses, and they have a range of styles depending on the context for their appearance. They are useful for asking a user for confirmation of an action.

sp1gv-info-messagebox-question sp1gv-info-messagebox-noicon sp1gv-info-messagebox-info sp1gv-info-messagebox-error sp1gv-info-messagebox-alert

Static Pop Ups

These types of modal windows are used to provide otherwise static information; they simply display relevant information - usually by clicking on an item - and the level of interaction is generally limited to closing the window once the user is finished viewing it.

sp1gv-containers-infomodal