Search the site:

Copyright 2010 - 2024 @ DevriX - All rights reserved.

3 UX Hurdles to Overcome Before Banner Ads Optimization

3 UX Hurdles to Overcome Before Banner Ads Optimization

One of the biggest barriers for UX and ad monetization success is discovering and satisfying user requirements. When you develop your website, it’s mandatory to consider the needs of your target users. This practice would be perfect if everyone in the digital publishing space knew exactly what the users crave for in a web experience.

Badly-integrated ad units are everywhere, and they have the power to completely destroy the user experience! Most of the ads that users see online do nothing else but interrupting the user flow. There are annoying pop-ups, flashy banner ads, and auto-playing videos and when you want to grow from ad impressions and clicks, you must learn how to design your pages around them.

So, considering the fact that you can’t avoid incorporating ads on your pages, what would be the acceptable UX and how it can be coupled with advertisements for more efficient monetization dynamics? The answer lies in the perfect combination of UX experience and banner ads. However, there are several banner ads optimization obstacles on the path, as an unavoidable element of every web optimization process.

1. Banner Blindness

Banner blindness is one of the biggest hurdles for publishers! It’s the simple ignoring of banner advertisements. Think about it, you’ve probably ignored several banner ads browsing on the Internet today. You probably can’t even remember how these ads looked like, but you ignored them.

This is true because in general, people are on the Internet for a specific purpose. They are looking for information, and they’ll do everything to discover it. Nothing will distract a user that looks something specific.

Understand How People Read Websites

Let’s get one thing clear first – you can’t eliminate banner blindness! However, you can reduce its effects through careful testing of the users’ behavior when they browse your website.

It would be awesome if you knew how users will consume the content on your site in advance, right? As a result, you’d know where to place each element of your page layout and get the users to take the desired action ( noticing the advertisement and clicking on it).

To understand how people read the web, luckily, there are numerous experiments that point out to their general behavioral patterns online:

The F Pattern

The F-shaped scanning pattern is distinguishable by the following:

  • Users start by reading in a horizontal movement, across the upper part of the content area. That’s what shapes the F’s top bar.
  • Furthermore, people move down the page and read across in a second horizontal movement with a shorter area than the previous one. This shapes the F’s lower bar.
  • Concluding the pattern, users scan the content’s left side in a vertical movement. It’s a slow-moving and methodical scan that appears as a dense vertical line on an eye-tracking heatmap tool. This shapes the last element of the F-pattern, the vertical line that merges everything.

The main effects of the F-pattern are:

  • The first lines of your content collect more attention than the subsequent lines of text on the same page.
  • The first few words at the left of every sentence receive more attention than the next words on the same line.

People scan content in an F-shape because:

  • There are websites that include text that that’s not properly formatted for the web. It’s just text without bolding, bullet lists, or subheadings.
  • Users want to read faster and save themselves time.
  • Users are not interested in all of the words that are in the text, they’re after one specific nugget.

It’s just how the modern web behavior works! Most of the people would rather finish reading a text much quicker than the predicted time and move on with another task. Also, everyone looks for a quick answer from Google Search as opposed to reading a novel on a specific topic.

The Gutenberg Design

This pattern provides you with an understanding of the eye movement patterns when a visitor opens and navigates on a content-heavy page. According to the Gutenberg pattern, a content-dense page is split into 4 quadrants: primary optical area, strong fallow area, weak fallow area, and terminal area.

The Gutenberg Pattern Elements

Image Source: Smashing Magazine

The primary optical area refers to the upper left section of the page. It gets the attention first without taking the users’ intention when they visit the website. Next up, the user directs the attention towards the second quadrant (the strong fallow area) at the upper right section of the page. In most of the cases, this is where the users stop.

The subsequent section in the bottom left is the weak fallow area. In general, the users don’t pay too much attention to this section. Finally, we have the terminal area at the lower right part of the page. Now, this is the perfect spot to place your call-to-action, or in this case, the banner ad.

It’s important to realize that these reading patterns strongly exist primarily in text-heavy and evenly distributed web pages. In cases where you create your visual hierarchy, the patterns mentioned above no longer apply.

In this case, the most dominant element acts as the focal point where most eyes first lay. The eyes will be pulled next to the element that is second in the visual weight order. Each element varies in visual weights, and that will dictate the order of the visitor’s eye path.

Speaking of which, according to eye-tracking researches, website visitors spent 2.6 seconds scanning the website first before moving on to a specific section of it. The five sections that attracted most of their attention are the following:

  • Logo (6.48 seconds)
  • Main navigation (6.44 seconds)
  • Search bar (6 seconds)
  • Written content (5.59 seconds)
  • Website’s main image (5.94 seconds)

Find the “Blind” Spots

Thankfully, there are powerful eye tracking and usability testing tools that can help you assess the performance of the ad units that you place on your site. You can track your users’ optical movements and analyze them to improve the conversion rate. It’s one of the best ways to beat banner blindness.

You can collect valuable insights for:

  • The type of content that draws attention from the users.
  • The parts of your website where visitors focus on.
  • The parts of your website that visitors ignore.

These insights are pivotal in understanding the aspects that elicit banner blindness.

With the eye-tracking tool, you can generate heatmaps that show the parts of your site that get the most attention, and ignored (blind spots) ones.

An example of heatmap tracking by HotJar

Image Source: Hotjar

If the blind spots include the ad units, you need to reconsider the page layout.

Think About Your Users

Ask yourself the following questions before you decide where to position the ads:

  • What is the user trying to achieve by browsing my site?
  • What do users do when they’re browsing my site?
  • Where is their attention concentrated?
  • How can I incorporate ads without interfering with the users’ experience?
  • How can I keep my pages well-ordered and captivating?

Think like your users, and you might reconsider your ad placements. If people can quickly find what they’re looking for even with incorporated banner ad advertisements, they’ll keep coming back to your site.

You need to place your ads close to the content that your users love to consume and ensure that they can easily find the content that they’re looking for. Take expert’s advice for it!

Google advises that you place banner ads above the fold of your pages. Also, after examining 1.5 million eye-tracking fixations from hundreds of sites, Nielsen Norman Group discovered that people focus first on top of the page when they open website content.

good and bad examples of site layouts

Image Source: Google Support

Remember that when you place an ad unit on your site, you’re not allowed to illegally encourage users to click on that ad. This implies that you can’t implement an ad that mimics your content. Therefore, be extra careful how you place the rest of your page elements that are close to the ad, such as navigation buttons, video players, drop-down menus, or applications close to the ads because they might lead to accidental clicks.

example of unacceptable implementation encouraging accidental clicks

Image Source: Google Support

Even if your page layout unintentionally leads to accidental clicks, you may still receive a violation notification.

https://www.youtube.com/watch?v=G1hgq4BaaIc

As a publisher, you are also not allowed to draw unnatural attention to your banner ads. For example:

  • Flashy animations that draw a user’s eyes to the ads.
  • Arrows or other symbols pointing to the ads.

https://www.youtube.com/watch?v=p0KcKxMFxOU

You should also avoid a site layout where the advertisements push the content below the fold. With that type of layout, people can’t distinguish the content from the ads.

Few or More?

Oftentimes, you’ll find websites that are packed with ads all over the page.

A bad example of integrating banner ads on a website

Image Source: Reddit

People can only pay attention to a certain amount of ads per day. If that’s true, why would you want to shower them with advertisements?

You should never put the UX in second place! If you want a profitable digital publishing business, you need to make the user experience great again!

Instead of inserting as many ads as possible, you need to have a minimal number of ad units and focus on optimizing them for maximum potential. You need to place ads that users want to see and insert them on the places that they want to see.

Ensure that each of the ads is in context with your content. If an ad meets the users’ desire, they will click on it. When an ad is relevant to the content, it’s more likely that it would meet the visitor’s desire or need, which made them open your URL in the first place.

Same as with content, quality is much more important than quality. Even if you want to serve more ads on your pages, you need to reinvent your page layout and figure out new ways to serve ads.

2. Impulsive User Requirements

users browsing on the internet

For the users, there will always exist an ad that interrupts a task and requires them to take specific action to avoid it. In most of the cases, ad placements also hide the content of interest and even worse, ads become genuinely unpredictable.

When you place an autoplay video ad, you practically violate the users’ expectations about your content. It stops them from scrolling the content and it adds additional steps for them such as locating the video and closing it.

The more user expectations you breach, the greater the probability that the user will dislike the ads on your page. On that note, the fewer expectations you violate, the greater the chances are for an ad to be tolerated.

If you want to drive more engagement for the ad units on your site, you need to meet the expectations of the users, while providing positive UX at the same time. The following guidelines may help you host less intrusive advertising experiences for the users:

Ensure That You Have Your Users’ Consent

Pretend that you’re hosting an exclusive event. What if some of the ad units are undesirable guests? You wouldn’t want them to ruin the entire party, wouldn’t you? Let the user decide when to listen. Don’t use auto-play audio or video. Don’t use intrusive ads to make the user’s main tasks difficult. Allow the advertisements to present themselves to the users so that they can see and interact with them when they feel like it.

Don’t Postpone the Content Delivery

Users don’t want slow-loading pages and delayed content delivery due to the advantage of ad impressions. Before you show them more advertisements, wait for them to browse around your page and find something that interests them. After you gain their trust, you can present them with more ads.

Balance User and Business Priorities

Stakeholders can, and they should demand ad conversions from your site. However, it’s your job to balance things out between the business and user priorities. You shouldn’t create a sense that the ad revenue is more important to you than what the user is trying to achieve on your site. In UX, user goals always come first before business goals.

Reduce Obtrusive Surprises

Unpredictable web interactions can diminish the trust that users have in your site. A creative design can sometimes be uncomfortable for users. Which is why you need to ensure that you’ll win over you readers with easy-to-locate content and your advertisements. If people know that they can find what they’re looking for on your page, they’ll get a feeling of cognitive ease, and will be able to trust more in the ads that you present them.

3. Incorporating Banner Ads for Mobile

user browsing on the internet on a smartphone

The evolution of mobile banner advertising goes hand in hand with the evolution of smartphones.

Today, mobile ads are dominant in the digital advertising world, and incorporating them into your page layout is a no-brainer. According to eMarketer, mobile ad spend will beat TV in the ad market and it will take up to 69.9% of all digital advertising. Both users and advertisers are heavily interested in mobile with each passing year.

As a publisher, you need to focus on making banner ads work for the mobile version of your site. You need to ensure that you’ll have the right ad sizes/formats, better CPMs, viewability, and higher engagement rates.

The objective is a good user experience across all mobile phone screens, network technologies, and data bandwidths. All mobile banner ads must be clickable by the end-user and may be followed by a text tagline advertisement that emphasizes its clickable character.

On smartphones, the screen real estate is so precious that ad positions and sizes can have a serious impact on the overall mobile UX. When it comes to mobile UX, there are two major usability issues that banner ads can cause:

  • ads can be too disruptive for the users,
  • and can create false floors that signal the end of content wrongly

The bigger the ad, the more intrusive is for the users. On a smartphone, a vertically large ad takes way too much space from the main content. Consequently, less page content is visible when the page loads, which is against one of the major principles of mobile usability: Content Prioritization.

Another huge failure of mobile ad placements can be the tendency for creating a false floor on a page. This effect is increased when the ad is large enough, so it’s hard for the users to see if the content continues below the ad.

If you must include multiple ads on your page, by placing them closer to the beginning of the content, you’ll have a better chance to evade wrongly indicated false end of a page. By using shorter banner ads for mobile layouts, your ad experience will be less intrusive than using a tall square display ad.

Examples of banner ads that are integrated in the content

Image Source: Bannersnack

In addition to the above, here are the most intrusive ads that you need to avoid on mobile layouts:

  • Pop-up Ads: Avoid pop-ups that cover the entire content, especially pop-ups that include a countdown timer that must expire before the ad can be dismissed.
  • Ad Density Greater Than 25%: Ads that take up more than 25% of the vertical height of the content are disruptive, irrespective of the ad type.
  • Auto-Playing Video Ads: When sound or video is played automatically on a website, combined with an ad, is among the worst user experiences. It pushes the users to close the page entirely, especially when they browse in public places.
  • Prestitial/Interstitial Ads: Advertisement that is displayed before the main content is loaded. On mobile devices, it’s extremely intrusive for users because the ads must be dismissed before content can be viewed.
  • Flashing Animated Ads: Animated and flashing colors are considered extremely distracting.
  • Postitial Ads: These ads show up over the content when the users want to leave a page, breaking the users’ flow in the process.
  • Auto-Expanding Ads: Ad units that expand and cover the main content area.

Best Mobile Banner Ad Sizes

When it comes to mobile banners, the best ad unit sizes that you should use for your site are:

  • 320×250
  • 320×50
  • 300×50

Of course, there are ad sizes that are in greater demand, and by using them, you’ll have better chances for better fill rate and eCPM. As recommended by Google, the following are the most common mobile ad formats:

  • 300 x 250 – Inline rectangle
  • 320 x 50 – Mobile leaderboard
  • 320 x 100 – Large mobile banner
  • 250 x 250 – Square banner
  • 200 x 200 – Small square banner

Banner ad sizes for mobile that are recommended by Google

Wrapping Up

Bottom line, advertisements will always bring risks of frictions between business and user goals. If you want to reduce those risks from a UX perspective, you need to think strategically about banner ad placement on your website.

Of course, there will always exist hurdles that you need to overcome before banner ads optimization, especially when you want to implement banner ads and UX changes on your website.

With continuous testing and tweaking, you’ll keep your readers delighted and consequently, enhancing your ad revenue should become more effective at every stage of your business digital publishing business.