How to Deliver Web Notifications — Do’s and Don’ts of Different Placements
*This is Part 2 of the blog post series about which notifications will illuminate a visitor’s journey, where to place them on your website, and with which strategy to pair them.
Previously, I discussed which types of web notifications visitors want to encounter on their journey towards conversion. Notifications are best accepted when they encourage, help, bring value, have a personal touch to them, are delivered in real-time, and accurately predict a visitor’s behavior.
The next goal for the marketer is to figure out how to stitch the visitor’s journey together and declutter their session. We may have a stack of relevant notifications, but how do we deliver and place them so the visitor not only notices them, but also engages?
In Part 2 of the blog series around visitor notifications, I discuss where to place notifications on your website, as well as the pros and cons of those placements. I’ll let you in on the knowledge garnered from working with clients.
While creating your next messaging campaign, consider:
Modal Overlay Messaging
To be clear — by modal overlay messaging, I mean a pop-up that requires a visitor to dismiss the notification in order to proceed with their journey.
However, browsers and plugins prevent the majority of pop-ups from opening in new windows. Instead, most current pop-ups are modal overlays that open within the same window. Since they’re not really “pop-ups” in the traditional sense anymore, I will refer to them as marketing overlays in this article.
In 2004, pop-ups were the most hated online advertising technique, and much of that hostility remains today. Businesses claim that pop-up forms help to build an extensive list of prospective customers and enhance conversions. So what gives?
When done incorrectly, overlay messages annoy visitors, compromise the user experience, and fail to convert people into paying customers.
When done right, marketing overlays are a great way to engage your visitors, drive sales, build growing email subscriber lists, and generate scores of new sales leads.
So do it right.
- Don’t interrupt the visitor journey unless necessary.
If the funnel is complex and your visitor needs a light tap on the shoulder, consider a different type of overlay that I cover later in this article.
- Do consider an exit modal overlay messaging.
If you are determined to place a pop-up that needs a dismissal from the visitor, think of it as your last resort. You want your site to be well-optimized for conversions, so that most people won’t consider leaving before converting.
The challenge is coming up with an offer more unique, more convincing than everything else on your page — because ineffectual offers mean no conversion. However, if your offer delights a customer, you might expect a 3.09% conversion rate.
Hint: You’re approaching things from the right angle if you’re strategic about using exit-intent pop-ups as a safety net to reduce the number of leads slipping away. However, if you’re using them to make up for the failings of your website, then you’re doing your website an injustice. Optimize visitor journeys instead of ignoring the work that needs to be done.
Sticky Bottom / Top Overlay Messaging
Opt for a sticky bottom or top overlay — they’re less interruptive compared to the pop-up discussed earlier, and perfectly convey the message. The visitor journey continues regardless of the notification sticking to the top or the bottom of the page, which helps content on the page remain a priority.
While bottom and top overlay are a more elegant technique compared to a full overlay, there’s plenty of room for error. The notification density on the page should remain low, around 15%, in order to not appear distractive. Visitors prefer sticky notifications of around 728X90 pixels on top or bottom, while sizes like 970X250 distract them and may hurt conversions.
Consider these guidelines:
- Do use bottom and top overlay if the funnel is complex.
We’ve noticed that if the funnel is complex and involves many different steps / forms / fields, it’s easy for any visitor to get lost. A timely notification imbedded to the top or bottom of their screen will be seen as guidance to the next step. We proved this technique with one of our clients, where the audience for the campaign consisted of 2,706 visitors; 3,618 notifications were sent, and the lift in conversion increased to 6.01%.
Do greet returning visitors and show them the way.
If a visitor returns, it’s helpful to remind them where they left off, especially if they were on their way towards a conversion. They may have a different goal in mind this time, so the bottom or top notification doesn’t obligate a visitor to any action. We saw this play out wellwith one of our clients where the audience for the campaign consisted of 604 visitors; 1,214 notifications sent and the lift in conversion increased to 18.74%.
- Don’t overuse a top and bottom overlay when the purchase cycle is short.
If the sales cycle is fairly short and straightforward, with little to no choices or options, a top or bottom overlay may not be seen as guidance but rather as a distraction. We spoke with some site owners who build a short sales funnel and intentionally avoid any type of messaging campaign. Look closely at your visitor journey to understand behavior patterns to decide whether this is good placement for you.
Hint: Don’t forget to add a dismiss button to your notifications, no matter how non-interruptive they seem.
Embedded
Embedded notifications seamlessly blend into the page and can still be rich in information. When these notifications get noticed, embedded alerts promote action at high rates.
An embedded notification fills the space on your webpage, and looks and feels like a native part with an optional dismiss feature. If you want to try the embedded notification:
- Do embed notifications to gradually nurture the visitor.
Since you have your visitor’s attention, make your notification dense with information. To make it more eye-grabbing, go for contrasting colors when designing it.
- Don’t opt for this type of messaging when it comes to valuable time-sensitive offers.
Since the message is on the page when the visitor arrives, the absence of a noticeable change on the page may cause the notification to be missed, and the urgency of a time-sensitive message may be lost.
Inline Pushdown
An inline notification pushes the content of your webpage down or up depending on its position. Once the notification is dismissed, the content of the page slides back up.
Because of the F-shaped pattern of reading content, static inline ads and notifications have been in favor among users when placed on top. If the notification is contextually relevant to the visitor, they will be pleased with the information, as it’s the first thing they’ll notice.
The F-Pattern stands for the most common user eye-scanning patterns when it comes to content on your website. The pattern was popularized by NNGroup eye tracking study, which included more than 200 users who looked at thousands of web pages. NNGroup found that “users’ main reading behavior was fairly consistent across many different sites and tasks.” This reading pattern was F-shaped and had the following three components:
How can you use this knowledge when it comes to inline notifications?
- Do place the inline notification on top. Make sure there’s a dismiss option that makes the rest of the content on the page slide back. Feel free to play with width, but keep it to 40px wide to make the notification less intrusive.
- Don’t place the inline pushdown notification on the bottom of the page if you want to make sure your offer or tip to the visitor is noticed. (F-shaped pattern, remember?)
To sum up
Placement matters. When orchestrated incorrectly, website messaging is annoying. When done correctly, it engages visitors, drives sales, and builds sign up lists without compromising the user experience.
In Part 3, we’ll wrap up the series by covering how to strategize website messaging for different outcomes.
Let me know if you’d like to see these notifications in action.
