We’ve been researching newsletter and marketing email usability for 15 years. In that time, we’ve published 6 versions of our report, Marketing Email and Newsletter Usability. Our most recent round of research showed big changes in newsletter design. One of the most significant changes observed was the massive shift toward visual communication in newsletters and marketing email.
Imagery Has Become a Major Fixture
Image use across email and the web in general has changed significantly in recent years. Images in web design are no longer supplementary or decorative — they have become a key fixture for many websites. This trend has trickled down to marketing email and newsletters. Our recent research indicated that newsletter recipients expect the same high-quality imagery that they encounter on the web. They strongly prefer images that can be seen at a larger scale and show detail very clearly.
Only a few years ago, newsletters used to rely on small thumbnail-sized images paired alongside text in a two-column layout. A prior version of our newsletter report included the message from Fodor’s below. This message is representative of how imagery was used in emails of the past. Compare that with the large, bold images in a current Crate&Barrel newsletter. One study participant who received this message commented, “There are four neat and simple pictures down the page that make it easy to look at. The images were really well done.”
In comparison, dense, multicolumn emails filled with tiny images were considered “cluttered” and “outdated” by users in our most recent study. One participant remarked that a University of Cincinnati newsletter was “a bit disorganized and […] there’s too much information and too many tiny pictures and random boxes in places.”
It is not enough for the images to be large. Participants in our studies also expected them to be helpful, interesting, and customized to the content. Big pictures that resembled stock photography and were not directly relevant to the content did not get positive feedback. One user who received an American Airlines newsletter remarked, “This mail was useless and clearly more like spam. I’ve never shown interest in going to New Zealand. The picture was not that great either, it’s just some generic picture of a surfer, which could be anywhere. No need for the email, it was a waste of time.
Another user, a recipient of the following marketing email from ValueMags, complained about the images used in the message, “I don't really see much of anything to draw me in. The images are unimpressive and the description is vague. This email is not attractive at all.”
Although the images in these emails from American Airlines and ValueMags were fairly large, they missed the mark when it came to communicating the unique benefits of each offer through relevant imagery.
Flyer-Style Emails Are Commonplace
Some newsletters have taken the image-based approach to an extreme: they have replaced traditional text-based content with one large graphic with text embedded in it. These newsletters resemble a traditional printed flyer or one-page advertisement.
Flyer-style newsletters are often eye-catching and can be as beautiful as a little piece of artwork. Recipients often commented on their aesthetic attributes. However, many of these flyer-style newsletters fall short when it comes to function and usability. Some of those common usability problems are outlined below:
Poor legibility. With their primary focus on visuals, many flyer-style messages use fonts and visual treatments that make it difficult for recipients to read content. One user who received an email from MAC Cosmetics commented, “I can barely read the words. Some of the writing is hard to see because of the background. Also, I wanted to see the brushes but they were not displayed well.”
Lack of typographic hierarchy. The flyer-style treatment commonly resulted in layouts that lacked a scannable typographic hierarchy for text. For instance, the message from MLB.com below used bold font for all the text rather than prioritizing information and presenting related detail with less emphasis. The various pieces of text and colors competed against each other, making the message overwhelming to read.
Too much negative space and lack of content discoverability. Many of flyer-style newsletters use empty space so liberally that users on a mobile device must swipe multiple times before encountering any text or valuable content. In the example below from Everlane, the subject line was Refer friends. Earn credit., but the entire first screen of the newsletter was a large graphic that said nothing about how to refer friends and how to earn credit. Only after the users scrolled down to the bottom of the graphic did they see information about an international referral program.
Problems with preheader text. The preheader is the text that starts the message body . Most email clients display the preheader as an extension of the subject line in the inbox view; thus, the preheader can provide additional context and details about the message. When most of the content of the email is in nontext format (as it is the case with flyer-style newsletters), that opportunity to communicate important information to users is lost.
In the example above from Everlane, the preheader in the inbox showed only the share links located at the bottom of the message. Users got no additional content in their inbox view, to help them decide whether it’s worth opening the message. It would have been better to include some information about the program in text above the graphic to create a helpful preheader.
Forgotten interaction-design principles. Flyer-style newsletters are most often of the marketing variety, utilized by retail and ecommerce stores with the primary goal of driving the user to the site. However, many make it difficult for users to interact with them. They often lack traditional clickability signifiers like coloring or button treatments for links and other calls-to-action.
It is not enough to design a beautiful flyer that looks great on a printed page. This format does not translate directly to email; it needs to be tweaked to make it useful as a user interface.
When text is embedded in an image, it’s difficult for users to understand what, if anything, is clickable: are they supposed to click the full image, anywhere on it, or on a specific piece of text?
Clickable images and flyer-style newsletters should still use clickablility signifiers. Without these cues, the page will feel like an Easter-egg hunt: users will have to hover over the image waiting for their cursor to change to a hand, or, if they don’t have a mouse, they will have to tap around the screen to find a target. And all this effort may be in vain — because some emails, like the one from Los Angeles Rams below, have no link to the site whatsoever!
In many instances, common indicators of clickability, such as color, may incorrectly suggest a link. One study participant who received a newsletter promoting a Halloween party clicked on various orange elements and logos in the message, since he thought they could be links. He learned that the entire image was clickable and anywhere he clicked would take him to the same place. He said, “There’s only one possible way to take action, which is clicking anywhere in the flyer to get more info of the party or RSVP.”
Contrast that design with Nespresso’s holiday email below. Nespresso correctly included a button in the email; when clicked, that led to the holiday limited-edition coffees. Users could also click on the various flavors featured in the email and be taken directly to the product details for these flavors.
Because there is so much inconsistency in how interactions are built across different flyer-style newsletters, it’s difficult for users to learn how to interact with these emails.
The best approach is to embed prominent calls-to-action as well as separate links to specific details within the image. All these should have the appropriate clickability signifiers and high information-scent labels to tell users where they will be taken on the site. In addition, these emails should also make the remainder of the image clickable and route users to an appropriate high-level landing page that addresses the topic or promotion as a whole. For example, in Nespresso’s email, a click on the top right corner led to a landing page about all holiday limited-edition offerings.
Conclusion
Images play an increasingly important role in email newsletters. Users expect high-quality, informational images that add meaningful content to the message. Whether you choose to design your newsletter in a flyer style or use a combination of images and text, be sure to evaluate the messages based on function, legibility, and ease of use, as well as visual appeal.
Full Report
The new edition of our full report on email marketing and newsletter usability with 199 design guidelines for newsletters is available for download.
Share this article: