Design Pattern Library: Broadcast messages
Problem
(What’s the problem that this pattern solves? Why is it worth solving?)
Users with admin permission need an efficient and prominent way to deliver critical messages at the global level to their members.
For example, an admin wants to announce that their platform will experience downtime during a specific period. Broadcast messages provide a solution for this case.
Solution
(What’s the solution? Why is it like that? What are the benefits?)
Broadcast messages are always located at the top of the page. They use a background color that matches the available theme colors but stands apart to ensure users notice the information.
Example(s)
(One or more images showing the UX pattern. They don’t have to be in GitLab.)
When there is only one system message
- A user can click the "Close" button to dismiss the broadcast message.
When there are 1+ system messages
- Broadcast messages stack. It is a rare usecase to have multiple broadcast messages.
When there is only one broadcast message | When there are 1+ broadcast messages |
---|---|
Mobile
- The "Dismiss" button should be displayed in text on mobile. The buttons are sticky to the bottom of the broadcast message area.
Links style in the messages
- The links are underlined.
- When the mouse is over the link, the cursor will be a "Hand".
Default | Hover |
---|---|
Usage
(When do you use this pattern? And how?)
Broadcast messages are used to prominently convey crucial information to users at the global level.
Background colors
-
$color-700
or$color-800
- Examples:
#4B4BA3
($indigo-700
) /#393982
($indigo-800
)
Dos and dont's
(Use this table to add text and code samples describing what’s ok and not ok.)
- Broadcast messages should be at the global level, so it should always be placed above the main navigation bar.
|
|
---|---|
- Broadcast messages should be dismissable whenever users don't want to see them again.
|
|
---|---|
- The background colors of broadcast messages should contrast with the application. However, they should not be overly prominent to the point where they stand apart from the available theme colors. (We will limit the choices of the background color applied to broadcast messages in https://gitlab.com/gitlab-org/gitlab-ce/issues/48134) We suggest choosing
$color-800
or$color-700
in our Design system.
|
|
---|---|
Related patterns
(List any related or similar solutions. If none, write: No related patterns)
Links / references
Pattern checklist
Make sure these are completed before closing the issue, with a link to the relevant commit, if applicable.
-
Ensure that you have broken things down into atoms, molecules, and organisms. -
Check that you have not created a duplicate of an existing pattern. -
Ensure that you have used the proper method for creating the pattern depending on the complexity. Atoms and molecules are symbols, organisms are groups. -
Make sure that typography is using text styles. When applicable used shared styles for colors. -
QA check by another UXer -
Add changes to the pattern library -
Create issue that includes any new or updated guidelines to the Design System: https://gitlab.com/gitlab-org/design.gitlab.com/issues/140 -
Add an agenda item to the next UX weekly call to inform everyone (if new pattern, not yet used in the application)
/cc @cperessini @dimitrieh @hazelyang @jkarthik @pedroms @sarrahvesselov @sarahod @tauriedavis @katokpara @mlatin