We often get requests for layouts and designs that have proven the most effective on other sites. We've collected some best practices from performance improvements we've seen for various customers when they try different design decisions.
The primary variable affecting CTR is widget visibility. Visibility is controlled by two things:
- How discoverable is the recommendation area? Do users have to scroll for a long time before they see the recommendations? We cover suggestions for better discoverability in our article on Increasing CTR - Widget Placement.
- How noticeable are the recommendations compared to the content around it? Are they potentially being mistaken for another set of ads? This is much more subjective, and testing different designs to see how they impact CTR will be a helpful next step for optimizing performance.
In this article, we'll discuss recommendations for making sure recommended items are noticeable within the design of your page.
Widget Display
Should items be in a grid? A single column? What about infinite scroll?
All of these options can work, and their effectiveness depends on the content on your site. General UX best practices are to give people choices - but not so many that it becomes overwhelming! We've found that changing from a set number of items to an infinite scroll usually has no meaningful impact, but for example going from only 3 options to showing 6 - 9 choices can boost CTR.
The single best thing you can do for Widget Display is to make sure they don't look like ads. The simplest ways to differentiate are shape and size.
In the example on the left, the recommendations are the same square shapes as the ads, and may blend together for a user who is focused on content further up the page or scrolling quickly. In the example on the right, the recommendations are significantly larger and a completely different shape than the ads above them.
Color and spacing are also effective ways to differentiate recommendations from the rest of the page and make them more noticeable than surrounding content. Highlighting with a brand-specific color in particular, as a border or section background, signals users that the content being recommended in that area is yours, and that if they click they won't be leaving your site. More padding or margins around the recommendation area to offset it from the content also signals that the items on display are important because they are being privileged with more space on the page.
Single Item Display
How each item in the recommendation area is displayed is also a contributing factor to the CTR of a particular widget. Across all of our customers, the two most important best practices we've discovered are:
- A large, clear image
- The full title of the article displayed
Other information, such as the category the item belongs to or topic keywords, can be useful but we have not yet seen a test demonstrating a statistically significant positive lift by including that type of information. Increasing image size, however, has shown clear improvement in CTR performance across multiple customers and site types.
Below are some example items from our customers to give you some ideas:
