This is a guest post by Sharanya Manola. Sharanya is a freelance writer who specializes in creating in-depth and persuasive, long-form blog posts that bring B2B brands out of the deep, dark alleys of obscurity. She has over eight years of experience producing and managing digital content. Connect with her on LinkedIn and Twitter.
How about we talk numbers before we discuss why design is important for higher email conversion?
It’s estimated that 320 emails will be sent and received daily in 2021. What does that mean to marketers? It means you have to work extremely hard to gain your subscriber’s attention.
Now let’s assume you nail the subject line of your email. The recipient excitedly opens it but never quite gets around to taking any action. What do you think could have possibly gone wrong?
You see, people read emails on-the-go and expect them to be worth their time and attention. Simply put, an email must be pleasing to the eye as well as the mind. So unless you design for them your email will have very little value. And you can’t really blame them from opting out of receiving any correspondence from you.
To ensure you design conversion-boosting emails, we’ll look at some web design principles.
Ready, are we?
A balanced and clean design
According to the Hick’s law, the more choices you present the viewer with, the longer it will take them to reach a decision. Going by this principle, your emails too should be simple and functional because frankly speaking, pretty emails alone don’t convert. Besides no one has the time in this age of dwindling attention span!
So how do you design a functional email?
- Get rid of everything that is cramming the page, especially superfluous design elements.
- See to it that your email looks consistent with your website or it will lose its conversion scent.
- Free the header and footer of any clutter.
- Make sure each section has a heading, body text and a prominent call-to-action or CTA button.
If you consider the above points in mind, Buzz Sumo’s email is on-point. White space (discussed later in this post) is used perfectly and makes comprehension easier.
Clear visual hierarchy
Have a look at the following snippet of an AB Tasty blog post.
Have another go.
Do you notice that a simple change in formatting uproots visual frenzy from the first snippet? It becomes more readable.
Apply the same straightforward logic to your emails. Organize information in the order of its importance so that the top-ranking element draws your user’s attention the most and so on.
Let’s consider the following email from Search Engine Journal. In one glance the reader knows what the email’s about and what they should focus on first.
In case you were wondering, you can create a hierarchy using colors, too.
To perfect creating a visual hierarchy, it’s a good exercise to go through a couple of email campaigns and practice ranking information. This will help you develop a critical eye and pack a punch in your next email!
You could also take the Squint Test that is popular in the design circuit. Important elements should stand out in your blurry vision. It should look something like the screenshot below.
If squinting your eyes is too much then you can add this cool Chrome extension.
A directional cue is a visual aid that is used to draw a person’s attention to the call-to-action button on a web page. As a matter of fact, a human brain can identify these signals subconsciously and look in the direction you mean them to focus on.
There are two kinds of directional cues. The first and the most popular ones are explicit cues such as arrows (also used to prompt visitors to navigate the fold), lines and pointy fingers.
Then there are suggestive or implicit cues with a person gazing (deictic gaze) or looking in the direction of the CTA or the conversion goal. Sample the home page of the Teachable website. Where is it that you are looking?
Uncanny? Nope. It’s how our mind works! Let’s take an example. Imagine you are at a party and notice someone staring at your shoes. Your immediate reflex action will be to follow their gaze and look at your shoes! It’s also how our mind works.
Now, look at the email by Michael Kors. Both examples show how effective a gaze can be in drawing attention to the CTA.
Be careful not to go crazy using these cues. If you use too many arrows people might feel you’re jostling them. Besides, when it comes to suggestive cures make sure they fit the context and reinforce the message, not distract or dilute your efforts.
Source high-quality images
A picture’s not worth 1,000 but 60,000 words! According to a Nielson study, our brain prefers visuals and processes them 60,000 times faster than text. But we also tend to scan content and scrutinize images. Precisely for this reason, it’s wise to use message-laden, high-quality photos that are in sync with the written word on your email. With a little help coming from you, the recipient will take the required action promptly even if they don’t read everything.
The best part about using high-quality images is that they make your brand more authoritative and message more persuasive. It sounds far-fetched but it’s true. Your subscribers can sense the hard work you put in crafting the masterpiece email.
There’s a catch, though.
Don’t go overboard and plaster your email with images. It can result in visual bloating. Strive to create a fine balance and you have a winning email ready.
Meanwhile, here are some tips on shortlisting photos:
- Use images that reflect your brand personality.
- Bundle photos that give a consistent look and feel to your email.
- Avoid overused, lifeless and decorative stock photos. They are notorious and known to give readers a migraine!
- Look for positive emotions in photographs. However, as a research published in Harvard Business Review suggests, you can flout the norms as viral success is still possible “when negative emotions also evoked anticipation and surprise.”
Use of colors on CTA
Color is a powerful visual communication tool on a website. It can evoke emotions and influence attitudes of people. It can also affect the way people perceive a brand. Clearly, you can’t overlook colors in your email design, especially the CTA(s) as therein lies your email conversion success.
But is there one color that brings maximum conversions? The simple answer is: No. Although you will come across studies that suggest using red or other colors (based on your goal), you shouldn’t blindly follow them.
In fact, since visual elements can be tricky it’s best to test what’s working for you. Start by using a color on the CTA button that contrasts with the background. It creates an Isolation Effect or the Von Restorff effect. According to this color theory, the object that stands out the most gets maximum attention.
Here’s how Udemy uses color contrast in their email.
If you remember, I mentioned the Squint Test earlier. Test your email once again. If the CTA blends or clashes with the rest of the page it’s time to start over.
One, prominent call-to-action
The more, the merrier doesn’t work in the marketing world. On the contrary, as psychologists Sheena Iyengar and Mark R. Lepper found out in their famous jam study back in 2000, having too many choices can be psychologically exhausting.
You would agree, won’t you? Nothing in the world is more off-putting and agony-inducing than not being able to make a decision!
If you look at it from a conversion stance, having too many CTAs on your email can become a cause of decision fatigue. In comparison, if you stick to one CTA you don’t pressurize the subscriber instead present them with a default choice, resulting in higher conversions. Whirlpool got a 42% of CTR by reducing the number of CTAs from 4 to 1.
With respect to the size of the CTA button, bigger doesn’t always mean better. It should stand out not scream for attention if you know what I mean! Overall, the color, the size and the CTA copy should be powerful enough that it compels a click.
Negative or white space
Negative space or white space is the “empty space” that surrounds various design elements on a page.
In emails, as on websites, it directs the flow of the page by creating breaks at right intervals. This is true for longer emails such as one sent by Canva (see below). White space between each block of content makes the content scannable and improves the comprehension of the message, too.
Actually, with the right amount of negative space, an email can look more elegant and organized. It can guide the user and shine the spotlight on specific visual elements such as the call-to-action button. Take for example the following email from National Geographic.
Responsive email designs have steadily gained popularity. And as per the statistics published on Email Monday, 47% of emails are now opened on a mobile device. In fact, Google claims that about 75% of all Gmail users access their email on mobile devices.
This makes one thing clear: you cannot ignore mobile phone users. If you do, you will upset your email conversion goals.
So what exactly is a responsive email?
It’s an email that adapts to fit any screen width and contributes to an excellent user experience on mobile, improving the click-through-rates. Basically, it uses CSS media queries that act as conditions or dynamic rules. Once they detect a screen size they activate the corresponding set of rules and the email displays correctly.
Once you have your responsive email design ready, test it across various email clients as well as mobile devices. If they don’t display correctly they will be deleted within three seconds! Can’t risk that, can you?
In the end, it all boils down to designing emails that please and surprise your subscribers.
Trash those complex layouts and blocks of content that make your page look ugly busy. Guide the user in the right direction, allow key elements to hog the limelight and don’t forget to get straight to the point with simple messaging.
Above all, never stop testing as even a small design tweak can boost email conversions.
Signing off and really excited to see how you use these design principles to your advantage!