Push Notifications Best Practices: A Guide to Using Images in Push Notifications

‍

There’s no denying that images are a compelling part of any marketing strategy. A well-placed product image can convince your shoppers from just being interested in them to complete the purchase.  In fact, some of the top merchants, like Headphone Zone and Proozy, use images in their push notifications to give their subscribers more incentives to purchase. These merchants have picked up push notifications best practices to ensure that their messages are not just compelling, but even their images are optimized, with increasing click-throughs and conversions.

So let’s dive into the different images that a push notification has and how these merchants are optimizing them for maximum conversions.

What Images Does a Push Notification Have?

1. Site Icon

Just like other marketing channels, push notifications allow you to add an identifier, such as your logo, to make brand recall easier for your subscribers. Learn how you can add a brand logo for your push notifications when using the PushOwl dashboard.

2. Hero Images

If you've signed up for any app notifications, you would have seen these notifications come with attractive posters, commonly known as hero images. Hero images can be either posters or photos of the product that you can add to your notification to make it more attractive.

Is Your Push Notification Rich?

Marketers term notifications with hero images as “rich push notifications”. But do push notifications with a hero image create that much of an impact?

According to Accengage, it does. Push notifications with a hero image (rich formats) have an improved reaction rate of 25%.

This comes as no surprise since 90% of information transmitted to our brain is visual. So, images do speak louder than words!

Just like SMS marketing and email marketing, push notifications allow you to display a hero image in your promotion but this feature is limited to specific devices and browsers. Hero images are only supported by Chrome on Android and Windows. Other browsers/devices currently do not show hero images.

Let’s look at how the same notification looks on different browsers and devices:

Push Notifications Best Practices: Top 5 Rules to Create Attractive Hero Images

1. Use the right size

Just like the character limits you see on your push notification copy, browsers have a specific sizing for the hero images you include in the push notification. If you don’t create your hero images with these recommended sizes, your hero images will be automatically resized by the browser, leaving unnecessary white space around the image.

A hero image that isn’t the right size looks like this:

To ensure you are following push notifications best practices, the PushOwl dashboard has a field to allow you to insert a hero image for mobile users, ensuring that you have optimized your push notification. We recommend that you use these dimensions for the 2 devices:

• Windows: 728px (Width) x 360px (Height)
• Android: 720px (Width) x 240px (Height)

2. Optimize the text you use in the image

While we insist on sticking to only images of the product, you can add text in your image, if you’re particular. But, if you do plan to add text in your images, it’s important to keep the copy short and let your subscribers focus on the image. That’s why we recommend the length of your hero image copy to be between 30 to 40 characters.

Here’s how 2 notifications with different character length for the hero image copy look:

The tone of voice you use is just as important as the length of your image copy. If you use humor across other marketing channels, you can use this witty tone in your hero image copy as well. It’s crucial to stay consistent with your tone since it is one of the top identifiers for customers. For instance, Headphone Zone has a fun and quirky tone that they use across their social media. This tone is also used in their notifications, whether it’s a product launch notification or the abandoned cart reminders.

Further Reading: Read more about the different tones of voice for push notifications to understand which tone suits your brand.

3. Pick the right font

If you’re using text in your hero image, readability is your top priority. Pick the right font for your text by seeing which fonts are highly readable with well-spaced letters. Don’t use font formatting styles like italics since it reduces readability drastically.

These are readable fonts we recommend based on research: Gotham, Helvetica, and Futura. Feel free to pick fonts that are more suited to your brand and the website. Font types that you should avoid using on your images are cursive or handwriting fonts. While these fonts look great, they are low on readability.

While picking your font, it’s also important to ensure that you use the right color and the right size for your text. Since the hero image appears within the notification on the subscriber’s screen, ensure that your text isn’t too small. In such cases, the bigger the font, the quicker your subscriber can read it. To make it easier to read, use a text color that is in stark contrast to your image’s background color.

Resources: You can find fonts on Google Fonts, see what suits your brand, and download it for free.

4. Pick attractive images of your products

You want your customers to understand which product you are promoting within seconds of seeing your promotions. This means picking images that have only the specific product within the frame rather than an image with several products. If you’re shooting your products, a great way to add context to your product is by showing how your product is used by a customer. You can even source customer images to give your hero images a personal touch.

Resources: To pick up free images of products, use image sites like Unsplash and Pexels.

5. Use design tools and palettes when creating a hero image from scratch

Some merchants prefer to add posters as hero images instead of product images. These push notification are usually promoting a sale on the store, like Black Friday. If you want to design images from scratch, use design tools like Canva, Easil, and Stencil so that you can quickly create unique posters and add them as hero images.

Not sure about your poster’s colors? Use palette picker tools like Paletton or Canva’s color palettes to find colors that complement each other. Palette pickers are a great design hack and make designing easy, even for newbie designers!

Canva’s color palette is simple and allows you to pick up colors for your poster with ease.

Meanwhile, Paletton is a little more advanced but perfect if you have a specific color you want to stick to. With Paletton, you can add your brand color and the tool helps you find complementary colors for your poster, making it simpler to design posters that are pleasing to look at.

Further Reading: Read Hubspot’s guide to using colors in your marketing design to learn the powerful effect of color. This is also a great read if you haven’t started emphasizing on sticking to specific colors for your store marketing.

Free Resources for Hero Image Creation

Here are a few pointers for image creation:

• Create poster-like hero images easily with Canva. For an advanced design tool, choose Figma.
• Download editable designs from resource hubs like Freepik or Undraw.
• If you want to use stock images, download free images from Unsplash, Pixabay, and Pexels.

While there’s no one size fits all approach to hero images, following these push notifications best practices, and testing and monitoring the performance of your hero images can allow you to find the right kind of hero images that increase your conversions.

‍