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
broadcast-message__one broadcast-message__two
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
broadcast-message__link broadcast-message__link--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.
✅ Do 🛑 Don’t
broadcast-message__one broadcast-message__dont--under
  • Broadcast messages should be dismissable whenever users don't want to see them again.
✅ Do 🛑 Don’t
broadcast-message__one broadcast-message__dont--no-dismiss
  • 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.
✅ Do 🛑 Don’t
broadcast-message__one broadcast-message__dont-color

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.

  1. Ensure that you have broken things down into atoms, molecules, and organisms.
  2. Check that you have not created a duplicate of an existing pattern.
  3. Ensure that you have used the proper method for creating the pattern depending on the complexity. Atoms and molecules are symbols, organisms are groups.
  4. Make sure that typography is using text styles. When applicable used shared styles for colors.
  5. QA check by another UXer
  6. Add changes to the pattern library
  7. Create issue that includes any new or updated guidelines to the Design System: https://gitlab.com/gitlab-org/design.gitlab.com/issues/140
  8. 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

Edited by Pedro Moreira da Silva