The design and anatomy of push notifications in 2020

Posted on UI/UX

Push notifications have been around for over 10 years. They first appeared in iOS in 2009 and were quickly added to all major mobile operating systems. Then, in 2014, web push notifications came along.

As of today, push notifications are supported in Apple iOS, Google Android, Huawei Android, Amazon Echo, macOS, Windows, Chrome, Safari, Firefox, Edge… The list goes on.

Unfortunately, every platform has its small differences… It can be difficult to figure out exactly what is included in a push notification. how many lines of text need to? how many images? What are character restrictions? How it looks in others operating systemsthat you don t have access to?

In this article, I will try to help you navigate the design of push notifications by analyzing their anatomy. And, if you are a designer, then it will come in handy for you this push notification UI kit for Figma…

Chrome web push notifications for macOS

Chrome push notification for macOS
Upcoming Workshops

  1. Browser Icon
    Chrome icon. It cannot be changed.
  2. Heading
    Limited to 20-40 characters.
  3. Domain
    The site to which the user is subscribed. It cannot be changed.
  4. Content
    Limited to 20-80 characters.
  5. Icon
    192 × 192 or more. Files in PNG, JPG, GIF formats (not animated).

Please note that the character limit is dependent on the presence of the icon and the characters used. Chrome for MacOS also has support for two action buttons.

Firefox web push notifications for macOS

The design and anatomy of push notifications in 2020
Firefox push notification for macOS
  1. Browser Icon
    Firefox icon. It cannot be changed.
  2. Heading
    Limited to 20-40 characters.
  3. Domain
    The site to which the user is subscribed. It cannot be changed.
  4. Content
    Limited to 20-80 characters.
  5. Icon
    192 × 192 or more. Files in PNG, JPG, GIF formats (not animated).

Please note that symbol limits depend on the presence of the icon and symbols used.

Safari web push notifications for macOS

The design and anatomy of push notifications in 2020
Safari push notification for macOS
  1. Icon
    It is installed once and cannot be changed for a single message. It should be 256×256. Files in PNG, JPG, GIF formats (not animated).
  2. Heading
    Limited to 40 characters.
  3. Content
    Limited to 90 characters.

Please note that there is no browser icon in Safari. The domain is also not displayed.

Chrome Web push notifications for Windows

The design and anatomy of push notifications in 2020
Chrome push notification for Windows
  1. Banner image
    360 × 180 or 2: 1 aspect ratio. In PNG, JPG, GIF (not animated) formats.
  2. Icon
    192 × 192 or more. Files in PNG, JPG, GIF formats (not animated).
  3. Browser
    Cannot be changed.
  4. Action buttons
    Supports up to 2 action buttons
  5. Heading
    Limited to 60 characters.
  6. Content
    Limited to 120 characters.
  7. Domain
    The site to which the user is subscribed. It cannot be changed.

Windows offers most of the screen space for displaying the banner and icon.

Firefox web push notifications for Windows

The design and anatomy of push notifications in 2020
Firefox push notification for Windows
  1. Heading
    Limited to 40 characters.
  2. Icon
    192 × 192 or more. Files in PNG, JPG, GIF formats (not animated).
  3. Domain
    The site to which the user is subscribed. It cannot be changed.
  4. Content
    Limited to 140-190 characters.
  5. Settings
    Cannot be changed.

Chrome Web Push Notifications for Android

The design and anatomy of push notifications in 2020
Chrome push notification for Android
  1. Badge
    72 × 72 or more. Should be white with a transparent background. In PNG format.
  2. Heading
    Limited to 50 characters.
  3. Body
    Limited to 150 characters.
  4. Large image
    1024 × 512 or 2: 1 aspect ratio. In PNG, JPG, GIF (not animated) formats.
  5. Browser
    Can t be changed.
  6. Domain
    The site to which the user is subscribed. It cannot be changed.
  7. Time stamp
    When the message was delivered.
  8. Icon
    192 × 192 or more. PNG, JPG, GIF (not animated).

Mobile push notification, native Android notification

The design and anatomy of push notifications in 2020
Android native push notification
  1. Small icon
    24×24 – 96×96 to fit devices of all sizes. Should be white with a transparent background. In PNG format.
  2. Heading
    Limited to 50 characters.
  3. Main text
    Limited to 150 characters.
  4. Large image
    1440 × 720 or 2: 1 aspect ratio. In PNG, JPG, GIF format (not animated).
  5. Action buttons
    Supports up to 3 buttons.
  6. Application Name
    Cannot be changed.
  7. Time stamp
    The time the message was delivered.
  8. Icon
    192 × 192 or more. In PNG, JPG, GIF format (not animated).

Native mobile push notification, iOS notification

The design and anatomy of push notifications in 2020
Native push notifications for iOS
  1. Application Icon
    Uses the default application icon and cannot be changed
  2. Rich Media
    1024 × 1024 or 1: 1 aspect ratio. In the formats PNG, JPG, GIF, MP4, MP3, WAV.
  3. Heading
    Limited to 25-50 characters.
  4. Message
    Limited to 150 characters.
  5. Application Name
    Cannot be changed.
  6. Settings
    Cannot be changed.
  7. Action buttons
    Supports up to 4 buttons.

iOS also has subheading support. Please note that unlike Android, iOS does not currently support web push notifications.

Free set of push notifications for Figma

If your project uses push notifications, check out this free Figma design file.

The design and anatomy of push notifications in 2020

UI kit of push notifications for Figma

Useful resources for push– notifications:

Leave a Reply

Your email address will not be published. Required fields are marked *