{"id":18096,"date":"2019-10-01T13:54:29","date_gmt":"2019-10-01T11:54:29","guid":{"rendered":"https:\/\/yieldbird.com\/?p=18096"},"modified":"2024-07-22T19:27:14","modified_gmt":"2024-07-22T17:27:14","slug":"best-practices-in-ad-structure-design","status":"publish","type":"post","link":"https:\/\/yieldbird.com\/research-hub\/best-practices-in-ad-structure-design\/","title":{"rendered":"What Are the Best Practices in Website Ad Structure Design"},"content":{"rendered":"\n

In this case of online advertising, more doesn\u2019t mean better. The key to success is to use appropriate techniques and products, and, most importantly, to get to know the user of your website better. Finding the right balance between UX and advertising will not only get you a group of loyal users but can also generate more revenue.<\/p>\n\n\n\n

What are the standards and limitations of online advertising?<\/strong><\/h2>\n\n\n\n


The IAB (Interactive Advertising Bureau<\/strong><\/a>), an organization that brings together entities from the interactive market, has introduced a number of quality standards for ads. These also include display ads, i.e., the most important ads from the standpoint of typical websites. <\/p>\n\n\n\n

It\u2019s worth reading the article \u201cNew ad portfolio\u201d, which describes the standard sizes and briefly distinguishes the most important requirements to which they are subject. The Coalition for Better Ads, whose members are some of the largest networks such as Google and Facebook, has introduced a number of restrictions too. This organization has distinguished several types of the worst received ads and practices that are the main reason why users install adblockers. Let\u2019s take a closer look at them before tackling this article\u2019s main topic.<\/p>\n\n\n\n

The most hated advertising techniques<\/strong><\/h2>\n\n\n\n


To find out which ones these are, I\u2019ll refer to the article written by Nielsen Norman Group entitled \u201cThe most hated online advertising techniques\u201d<\/strong><\/a> as well as the survey conducted by the Coalition for Better Ads. Both these groups came to very similar conclusions.
<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n


This graph<\/strong><\/a> should be interpreted as follows: it uses a scale of 1\u20137, where 1 means a positive feeling, and 7 \u2013 a negative one.<\/p>\n\n\n\n

As you can see, mobile ads have been rated more severely than their desktop counterparts. The ads that evoked the most negative feelings were: deceptive links (i.e. links that pretend to be content but, in fact, are ads), modal ads i.e. all kinds of pop-ups, video ads, and ads that reorganize content when loading. This was confirmed by Better Ads, which strongly advised against pop-up ads, prestitial ads (the ones that conceal the content), and autoplay ads with audio. You also shouldn\u2019t use anchor ads that cover more than 30% of the screen.

Things are very similar in the mobile environment, but one additional condition comes into play here \u2013 the ratio of ads to content can\u2019t exceed 30%. The Coalition for Better Ads came to similar conclusions, but their survey involved a much larger group of people and details.<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

The above image presents a part of the \u201cDesktop web stack rank\u201d<\/strong><\/a>.
The lowest scores were given to large sticky ads and pop-ups. <\/em><\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

The conclusions are similar when looking at the \u201cMobile web stack rank\u201d<\/strong><\/a>, but here there is also the aspect of the density of ads.<\/p>\n\n\n\n

How do users read your website?<\/strong><\/h2>\n\n\n\n


In fact, hardly anyone reads it from beginning to end. On average, only 20% of users will reach the very end of the page. Regardless of its structure, there is one main pattern for the browsing of its content. This is the so-called \u201cF-shaped pattern\u201d, which took its name from the image created as a result of an eye-tracking study.<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

The example taken from webdesign.tutsplus.com<\/strong><\/a> shows where the user\u2019s attention is focused. This provides a clue about where to place the elements that you want to highlight. And this applies not only to the advertising units themselves but also to the promoted content.<\/p>\n\n\n\n

When analyzing the F-shaped layout, another question comes to mind too \u2013 how far along does it make sense to place the ads so that they can be seen? In order to fully understand this, you must familiarize yourself with the concept of the fold. It is the line that separates the visible part of the page from the one that requires an action to become visible (e.g. scrolling). It\u2019s a purely conceptual term because the fold itself may vary depending on the device.<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

On the above heatmap, black lines mark the subsequent folds, i.e., what\u2019s in the user\u2019s field of vision. You can clearly see that the further away you move from the top fold, the less attention you get \u2013 it might be concluded that only 60% of the page\u2019s length is actually visible. The study was conducted by the Nielson Norman Group<\/strong><\/a> on a large number of websites, excluding the homepages of search engines and their results.<\/p>\n\n\n\n

Best ad sizes for desktop<\/strong><\/h2>\n\n\n\n


The choice of ad sizes for desktop seems to be almost limitless, but you should pay particular attention to the most popular ones. Putting aside the aspect of regionalism, there are a few sizes that will ensure the highest possible coverage of your resources.<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Looking at the figure<\/strong><\/a> from match2one.com, you can see what percentages of the network that they analyzed were represented by particular sizes. Using only these five, you would be able to cover 83% of your resources.<\/p>\n\n\n\n

Confirmation of what you saw above can be found in the \u201cGuide to ad sizes\u201d<\/strong><\/a> prepared by Google. The most important sizes for you should be:<\/p>\n\n\n\n