Unfortunately, the prolific use of the right rail (also known as the right-side column of webpages) by website creators to feature advertising has forced users to train themselves to avoid looking in this area. Does this mean you should abandon the right column? No.
The right-hand side of the page consumes maybe 20% of your available pixels: the most precious resource in computers. It can serve many significant and practical purposes. It’s a place to feature secondary content—to recommend or extend the user journey to other areas of your site. Not everything on your site should have the same level of prominence. Think of the sidebar as a knowledgeable customer-service agent: she doesn’t need to take center stage, but is there and ready to help when the customer needs it. Designing this space well can have a profound impact on usability and how well your content is noticed.
Right-rail design is one of the topics covered in more detail in our course on Web Page Design: for now, here are 4 tips for gaining better ROI from this part of your pages.
1. Don’t design content to look like banner ads. A clean sidebar design garners trust.
Users are extremely goal oriented. They look for information they care about and ignore anything others want to push on them. In fact, users have evolved an active system of self-defense against ads. That’s because on the web they are constantly barraged with attempts to capture their attention and divert it from their own goals. Users dodge even the most obnoxiously “loud” banners by training their eyes to avoid this attack on the senses.
Banner blindness has expanded beyond the deliberate act of not looking at banners to encompass avoidance of anything that usually signals irrelevant information or advertisements. People disregard colorful boxes in the margin of the page because such graphical treatments are commonly applied to ads. In fact, anything that’s overly large or colorful risks being ignored. In usability studies, we frequently observe users overlooking items they need even when these items are in plain sight. When questioned after the study, they tell us again and again, “I saw that, but it looked like an ad, so I ignored it.”
Choose a light-weight, simple visual design for the right column—one that matches the content of the site. People are more likely to trust and click on links that look like valuable content than what appears to be irrelevant advertising.
Memorialregional.com: The internal promotions share similar visual attributes as banner ads. The bright, colorful boxes deter people from looking at them. It is irrelevant whether each element actually is an ad. Since people don’t read it, they won’t ever know.
Nytimes.com: Even subtle design elements can prime people to think of ads. The gray box, icon, and fancy text style offer hints of advertising. When seen collectively they divert people’s attention.
2. Postion content away from the banner ads to avoid "guilt by association."
People rely on visual patterns to help them determine the relationship among different chunks of information on the page. Humans have limited cognitive resources, so they take shortcuts. This is how the human mind works. We know from gestalt design principles that people perceive elements that are placed together to be related. It’s fine to feature ads on your site. People are used to it. However, whenever possible, group external and internal promotions separately, and make them look distinct to avoid any confusion.
If you want people to notice your content, keep it within their line of sight and avoid wedging it between ad-like elements where it could be associated with advertising erroneously. Users have limited time and mental resources and won’t spend them evaluating every aspect of your interface. Make the distinction between ads and content obvious.
Unicef.com: Important facts are sandwiched between brightly colored boxes that look like advertising. This information doesn’t have a chance of being read. It’s better to tone down the visual design to create a more balanced visual hierarchy. Also, while we support the use of the side columns, we suggest reserving the right rail for secondary content only; do not place primary content there if you want to ensure that people read it.
3. Feature thumbnail images only if they communicate useful information quickly.
Many site owners choose to feature thumbnails to create visual interest and attract attention. This is fine. However, if you feature images on your site, make sure to choose the right ones; otherwise they become visual noise, and, even worse, give people the wrong impressions.
You have only milliseconds to inform people of your offerings, so make each visual element count. Images should provide visual interest and serve as communication tools. When done well, thumbnails help tell the story by providing context. People appreciate images that contain useful information and balk at generic images that contain little substance.
Each image requires cognitive effort to discern, especially at small sizes, so choose them wisely. When selecting images, pick ones that supplement the content and are easily discernible in small sizes. Our eyetracking research shows that simple images, that have simple backgrounds and identifiable objects, attract more attention than busy images.
Cnn.com: These images contain too much detail to discern easily, especially as thumbnails. When people can’t make out the information quickly, they automatically dismiss the content and everything else surrounding it.
4. Feature content that is relevant and helpful.
Avoid turning the side column into a junk drawer. Have a strategy for tailored content based on users’ needs. Anticipate the user’s task and offer recommendations to match. Don’t display the same set of links or articles across different pages: it undermines the usefulness of the suggestions and trains people to avoid it. From the user’s perspective, seeing the same irrelevant list repeatedly is like speaking to an agent that doesn’t listen.
Relevant suggestions feel natural and unforced. Consider when to offer broad or narrow topics. For example, at top-level pages (e.g., homepage and section pages), people are much more open to serendipitous discovery. However, at the article level, people are more topic focused and need highly relevant content.
Tripadvisor.com: This is an effective use of the right column. The information is highly relevant to the article and the visual presentation connotes valuable content, not a pressured sale.
Npr.org: This site misses the opportunity to engage with users. None of the suggestions are remotely related to the story. Also, the top-right block looks too much like an ad, violating tips 1 and 2.
Contrary to what many website creators might think, when it comes to side columns, the less graphical it is, the more attention users will pay. Be subtle and relevant, and the right rail can provide value to your site.