Components

Messages

Messages to the user as system feedback can be delivered as block message with a longer explanation. The block messages, predominantly used in top or banner positions in the view are defined on this page. Or as inline message directly to a user input widget. For inline validation messages, see designing text inputs.

Block message of neutral type visual example

Using messages

Messages must include a descriptive text or a combination of text and an icon. Accessibility note: An additional icon adds a point of recognition for color blind users.

Designing

Message text
Message text should provide clear and short as possible feedback to the users and possibly provide next steps if available.

Icon
Icons simplify user recognition and provide ability to shorten message text. Icons are limited to default pre-collection of each message type to ensure recognition.

Types

Neutral or notice message

Block message of neutral type, visual example

Neutral or notice block messages provide general user feedback. Accompany the message by the 'infoFilled' icon.

Error message

Block message of error type, visual example

Error type feature the strongest visual priority of all system messages. Use to alert the user for immediate attention only needs. Accompany the message by the 'error' icon.

Warning message

Block message of error type, visual example

Warning type provide important messages the user should be cautious about. Accompany the message by the 'warning' icon.

Success message

Block message of error type, visual example

Success type deliver feedback of a successful user interaction like publishing an article. Accompany the message by the 'success' icon.

Coding

See OOUI's demos section of messages.