Ads: that necessary evil we encounter every day, and to which we all believe ourselves to be immune. Whether a user ignores an ad completely or becomes annoyed with its presence is strongly related to the ad's size and placement on the page. On mobile phones, screen real estate is already at such a high premium that the position of the ad has an even greater impact on the overall user experience than on desktops.

There are two main ad-related usability problems: (1) ads can be too disruptive to the user, and (2) they can create false floors that inaccurately signal the end of content and cause users to miss helpful information.

Large Ads Limit Viewable Content

Not surprisingly, the larger an advertisement, the more disruptive it is. On a small device, a vertically large ad consumes far too much valuable space, displacing the main content. To add insult to injury, sometimes two ads get stacked at the very top of mobile pages—as sites feel compelled to advertise their mobile apps. As a result, less page content is visible upon page load, which goes against one of the principles of mobile usability: prioritize content. In the example from FineGardening.com below, only the article title and brief summary can be seen without scrolling thanks to an overly large site header and the double ad placement at the top of the page.

Screenshot from Finegardening.com on mobile showing multiple ads
Finegardening.com: Very little article content can be seen upon page load because the app ad, banner ad, and large site header consume the majority of the screen real estate.

Unlike multiple ad elements at the top of the page pushing down the relevant content, an ad at the bottom of the screen in a sticky container is less intrusive to users. This recommendation may seem counterintuitive because the ad would now remain visible on the screen at all times, but in past studies we have found this treatment to be best tolerated by users, which is good because it shows the ad is not getting in the way. Keep in mind that users tend to begin scanning from the top of the page, and resent having to scroll past a lot of chrome to get to the information they actually want to read. Thus, we need to not only consider the overall content-to-chrome ratio, but also ensure that helpful information is prioritized nearer to the top of page in order to grab people's interest and supply them with the information related to their task as soon as possible.

An additional benefit to the sticky-container treatment is that the ad is still readily available to users once they finish their task. While the user is focused on completing an activity or researching a topic, ads will be ignored because they aren't part of the goal. Assuming the advertisement is actually relevant to the user, having it available once the main task is completed increases the likelihood that the user would pay attention to the ad and possibly interact with it. (An ad is relevant when it matches the user's current goal: it is more powerful to display an ad for something the user immediately wants rather than something that just matches their general profile.)

Screenshots of ad treatment on the Washington Post mobile site
The Washington Post mobile site displays an ad in a container fixed at the bottom of the screen (left). The ad is appropriately synced with the current scroll position of the page, and completely collapses when the user reaches a display ad embedded within the page content (right).

Avoid Creating False Floors

Another main downfall of many mobile ad placements is their tendency to create the “illusion of completeness,” or a false floor, on a page. An advertisement can easily signal to users that they have reached the end of the page's relevant content. This effect is exacerbated when the ad is large enough so it is difficult to see any continuation of content below, and when the ad is placed at a point low enough within the content where it seems reasonable that no more information is available on that page. Pages on WebMD's mobile site, for example, place ads following several paragraphs of text, below links to additional resources on the current topic. Horizontal lines in the design and the presence of copyright information (which is commonly associated with footer content) further cue the user that this is the end of page, when this is actually not true: the page continues far below the ad, displaying more information and additional links to related resources.

Screenshots of WebMD.com mobile site article page containing several ads
The ad placements on the WebMD mobile site create false floors because they appear in places that could reasonably be the end of relevant content, and are large enough that they hinder the user’s ability to see content continuing down the page. (The black dashed line shows where the fold occurs on an iPhone 6 Plus, and the red dashed lines represent areas where the ad is likely to stop a user from continuing to scroll.)

If possible, only display ads at the real end of content rather than between paragraphs of text. Said one user during a recent usability study, “I don't like advertisements in between. It's distracting and gives me the impression that it's the end of the article.” Of course, we often don't have the luxury of neglecting business goals, and so if several ads need to be included on a page, putting them closer to the start of the content—following the title or intro paragraph, for example—can help avoid incorrectly signaling the end of the page. Additionally, shorter banner-style ads are less interruptive of the content than the taller square display ads.

Screenshot of ad placement on USA Today mobile site
USA Today mobile website uses a thin display ad positioned near the beginning of an article, so it is less likely to be considered a reasonable stopping point in the content. The thin rectangular size also allows the content below to be visible, encouraging the user to continue reading without being too interrupted by the ad.

When an ad is placed lower on the page amid content, consider adding additional cues to signal the user to scroll past the ad. This recommendation is especially important if the ad is large or otherwise consumes a lot of page real estate (includes extra whitespace above and below the ad, or is a small ad populated into a placeholder meant for a larger one), and blocks the user from easily seeing any continuation of content. If the user doesn't know for sure that more content exists below the ad, they may not be willing to pay the interaction cost to scroll and possibly get nothing. Simple, clear text such as “Keep Reading” or “Continue Reading Below” along with an arrow pointing down or other directional indicator placed above the ad can work well to let the user know more content is available.

Screenshot of ad design on Boston Globe mobile site
To encourage users to scroll past a large ad, a cue such as Continue Reading Below should be shown above the advertisement, as seen on the Boston Globe mobile website.

Keep in mind that this treatment merely makes the ad placement bearable, and should be considered a last resort if multiple ads must be placed on the page amidst content. In general when it comes to ads, be sure to practice restraint. Having a high number of ads diminishes site credibility: as stated by a user in a recent study, “I have deleted apps because of ads — I tend to not go to the ones with a lot of ads; I think the info is not reliable.” As expected, the most hated advertising techniques on the desktop are also hated on mobile devices; and sadly, top sins such as Covers what you are trying to see and Occupies most of the page are easier to unintentionally commit when the screen size is limited. Because of this, extra care must be taken when deciding where and how often to place ads on mobile apps and websites.

Conclusion

Ads represent a point of conflict between business needs and user needs. To minimize their impact on user experience, they need to take only a small fraction of the page area and be placed strategically so that they do not create false floors and do not stop people from discovering additional page content.