Introduction
Recommendation Area Guidelines
Image & Text Guidelines


Introduction

About This Document

This document outlines the UX guidelines to avoid accidental CTRs for widgets. This document additionally lays out the guidelines for images & text used in widgets.

 

Recommendation Area Guidelines

Non-clickable areas in the recommendation area 1, 3

A At least 20px “safe zones” from top/bottom & left/right edges of the mobile screen

B At least 20px of vertical/horizontal spaces between clickable areas of two recommendations

C 3% of the left and right edges of the recommendation area (unless this is covered by A or B)

D 5% of the top & bottom edges of the recommendation area (unless this is covered by A or B)

 

Time Delay Guidelines 2, 4

The click will not count if the action taken by a user is less than a second after the widget is visible.


1 From Google’s article “Better click quality on display ads improves the user and advertiser experience”: “Blocking clicks that happen close to the image edge: On mobile image ads, we’ve identified the image border as an area prone to accidental clicks when users are trying to click or scroll to adjacent content. Now, they must click on a more central part of the image to navigate to an advertiser’s website or app..”

2 From Google’s article “Better click quality on display ads improves the user and advertiser experience”: “Adding a clickability delay: Ads will only become clickable after they’ve been onscreen for a short period of time. This gives users enough time to examine the content of an ad and helps eliminate accidental clicks from users who didn’t expect to see an ad.”

3 From Google’s article “Preventing accidental clicks for a better mobile ads experience“: “Not surprisingly, we found super-fast clicks on ads to provide little to no value to advertisers. That’s why we ignore fast clicks that we detect to be accidental immediately upon ad load. Rather than our ads causing surprise low quality clicks, users can continue on uninterrupted.”

4 From Google’s article “Preventing accidental clicks for a better mobile ads experience“: “Not surprisingly, we found super-fast clicks on ads to provide little to no value to advertisers. That’s why we ignore fast clicks that we detect to be accidental immediately upon ad load. Rather than our ads causing surprise low quality clicks, users can continue on uninterrupted.”

 

The images below illustrate the clickable & non-clickable areas on a recommendation:

image-with-headline

image-with-header-on-bottom

headlineonimage

large-image-with-headline-on-bottom

text-only

Image & Text Guidelines

The images below lay out the guidelines for images and text for a recommendation:

 

Footer: Image with headline

A Image Width
spacer-Minimum: 20% of the recommendation area width
spacer-Maximum: 50% of the recommendation area width

B Image Height
spacer-Minimum: 95% of the recommendation area height
spacer*image height should NOT be bigger than the image width

C Recommendation Text Size
spacer-Minimum: 12px
spacer-Maximum: 16px

D Source Text Size
spacer-Minimum: 9px
spacer-Maximum: 10px

image with headline on right


Footer: Image with Headline on Bottom

A Image Width
spacer-Must be 100% of recommendation area width

B Image Height
spacer-Minimum: 60% of the recommendation area height
spacer-Maximum: 100% of recommendation area width

C Recommendation Text Size
spacer-Minimum: 12px
spacer-Maximum: 16px

D Source Text Size
spacer-Minimum: 9px
spacer-Maximum: 10px

image with headline on bottom


Footer: Headline on Image

A Image Width
spacer-Must be 100% of recommendation area width

B Image Height
spacer-Minimum: 33% of the image width
spacer-Maximum: 100% of the image width

C Recommendation Text Size
spacer-Minimum: 12px
spacer-Maximum: 16px

D Source Text Size
spacer-Minimum: 9px
spacer-Maximum: 10px

headline on image


Footer: Large Image with Headline on Bottom

A Image Width
spacer-Must be 100% of recommendation area width

B Image Height
spacer-Minimum: 33% of the image width
spacer-Maximum: 100% of the image width

C Recommendation Text Size
spacer-Minimum: 12px
spacer-Maximum: 16px

D Source Text Size
spacer-Minimum: 9px
spacer-Maximum: 10px

large image with headline under


Footer: Text Only

A Recommendation Text Size
spacer-Minimum: 12px
spacer-Maximum: 16px

B Source Text Size
spacer-Minimum: 9px
spacer-Maximum: 10px

text only