Badge

The Badge pattern allows users to be informed about events that occur, associated with an application. Badges highlight recent activity by visually marking new content. There are several implementations of this pattern. For example, placing a numbered badge on the label was popularized by iOS but can be seen in many other apps now such as LinkedIn, Facebook or Quora. Twitter does this as well for the notifications button but also has a small dot on top of the timeline icon to indicate new activity in a more subtle way. Another way to display notifications is with a banner that drops down within the app to show new activity. The Facebook app does this as well, showing a small popup when there are new items in the newsfeed.These events may include: new messages, calendar events, data updates, status changes, etc.

There are two variations of badges described in this pattern:

• Application Badge: This is scheduled by an app and delivered by the OS on the same device, regardless of whether the app is currently running in the foreground. For example, a calendar or to-do app can schedule a local notification to alert people of an upcoming meeting or due date.
• System Badge: This is sent by an app's remote server to the a Push Notification service, which pushes the notification to all devices that have the app installed. For example, a game that a user can play against remote opponents can update all players with the latest move.

Appearance

Appearance characteristics for this pattern.

• Positioning: A small badge that appears on top of an icon, right of a list item, homescreen icon, or some other location.
• Count Badges: The badge could have a number, that indicates the number of pending notifications
• Status Badges: The badge could have a status icon (such as an exclamation point), that indicates the current status of an item.

Behavior

Common behaviors for this pattern.

• Duration: Badges should only appear if they are pending review by the user. The notification badge, message or indicator should disappear if the user has reviewed the notification.
• Animation: Optionally, display an animation on the badge or message when a notification arrives.
• Sound: Allow the user the ability to control whether a sound is played when a new notification is received.
• Dismissing: Badges can either be time sensitive or be dismissed by users.

Usage

Usage guidelines for this pattern.

• Keep badge contents up to date with count.
• Do not send multiple badges for the same event (increment the count).
• Status Badges should have clear meaning.
• Use a sound, that users can choose to hear when a badge displays.
• Navigate to the correction location, when linking from the badge.

Related

• Used On: Phone, Tablet
• Also Called: Count, Notification
• Related Components: Image, Link, List View
• Related Patterns: Drawer, Navigation Bar
• Resources: None