7 UI/UX Design Elements That Can Boost Your Email Conversions
Some users also prefer getting text-only emails (or in some cases, their email clients only support text emails). This is why a majority of marketers prefer using a combination of plain text and HTML emails.
Keep in mind that email is a passive push channel. Once users have signed up for your newsletter, they don’t have any control over how and when they receive communication from you. This is unlike a website where a user has to actively click a link or type in a URL to reach your website.
All these usage preferences impact UI/UX principles for email when it comes to conversions:
1. Email open rate is critical
Your email is competing with dozens, even hundreds of others in a user’s inbox. Before you can even dazzle them with your brilliance, you have to first ensure that they click your email.
Subject lines become a vital weapon in this fight. A crisp, clear subject line with an enticing promise gets users to open your email.
I understand that this comes under the purview of copywriting, but it is so important to conversions that it deserves a mention here.
Testing is crucial for subject line success. Two subject lines are good, five are better. Brainstorm dozens of lines, run them through a A/B testing regimen, and create a project dashboard to track open and click-through rates.
(Image source: MIDINation)
Do this for multiple sets of subject lines until your open rates at least match, if not surpass industry benchmarks.
2. Mobile users are the top priority
The inevitable march of mobile is nearly complete; nearly three-fourth of all users read emails on their smartphones over desktops.
The younger your audience, the more the mobile-desktop split will be in favor of mobiles.
Designing emails for mobiles poses several UI/UX challenges:
- Mobile users might be on limited data connections, limiting your ability to use multimedia in emails
- Mobile screens have limited screen real estate, forcing you to design shorter emails
- UI elements have to be larger to improve touch-friendliness
Since you can’t really control how and where users open your emails, you have to adopt responsive, but mobile-first design. Any design element you choose should look good on both desktop and mobile, though mobile should get top priority.
3. Design for clarity
Email exists in a different context than a web landing page. You’re not just competing against other websites; you’re also competing against hundreds of unread emails and, on mobile, countless notifications.
Given these constraints, you have limited time to grab your audience’s attention. Every email you design has to make its purpose clear right from the subject line. Any pixel that doesn’t relate directly to your offer is a pixel wasted.
This focus on clarity manifests itself in countless ways. Your emails must follow an information hierarchy, your CTAs need to be clear, and your copy must be succinct. Any link you add must be easy to follow – lest you trigger spam filters.
For example, notice how Freshbooks uses an ‘inverted pyramid’ information hierarchy in its newsletter:
(Image source: CampaignMonitor)
This makes it easy for readers to understand your value proposition without digging through paragraph after paragraph of text.
While following UI/UX design principles is important, you can also boost your results by using conversion-focused UI elements.
I’ll cover some of these UI elements in the next section.
1. Large CTAs
CTAs are easily the most important element in any email – it is, after all, what you want people to click/tap on.
Your CTAs should be large and clearly visible on any conversion-focused collateral – email, landing pages, etc. The narrow constraints of email design, especially on mobile, demand that the CTA be:
- Easy to identify as a CTA through clever use of colors, shadows, and text
- Accompanied by easy to follow text
- Placed in strategic locations throughout the email, such as ‘above the fold’
For instance, note how this email uses an easy-to-spot, page-spanning CTA. You couldn’t miss it even if you tried:
(Image source: ReelGood)
2. Animated GIFs
If you want to show your product in action – always a positive a conversions – it is tempting to throw a video into your emails.
Video doesn’t convert nearly as well in emails as it does on webpages. For starters, a lot of your users might be reading your email on mobile devices. Opening a video on mobiles consumes data, creates noise, and often takes users away from their email client.
As the NN Group quotes a participant in an email usability study:
“I probably wouldn’t watch this. It’s a video, not text. I expected an article, not a video. With video, you have to watch the whole thing. Even if it’s just a minute, I’m not into watching video. And if I was on the phone, I couldn’t watch it. I wouldn’t want to watch it on my phone, anyway.”
But there is a workaround to using video in your emails: animated GIFs.
Animated GIFs can show your product in action without forcing users to watch an entire video. It might not have the production qualities of video, but it consumes less data, doesn’t have any audio, and can be used on any device or email client.
For example, this email shows different design variations for a piece of jewelry via animated GIFs:
(Image source: MonicaVinader)
3. Clear value proposition
What is your email really about?
If readers can’t answer this question within seconds of opening your email, they’ll likely press the back button.
A clear and upfront value proposition should be the first thing you add to any email. Make it visible as soon as someone opens your email, right after your brand assets (such as your logo).
For example, this email from Uber makes it clear that it is all about the ride pass program:
Try structuring your emails around this value proposition. Adopt the reverse pyramid information hierarchy I mentioned earlier. Every element you add to the email should reinforce it in some way.
4. Directional cues
You can’t talk to your users and tell them what to focus on in your emails, but you can guide their attention with directional cues.
Directional cues are design elements that nudge the reader in a particular direction. These can be subtle, such as a faint line running across the page, or they can be bold, such as an arrow pointing to a CTA.
The purpose of these cues is to guide the reader’s gaze as he/she scrolls down the email.
Here’s an example of an overt directional cue pointing straight to the CTA:
(Image source: Loft)
Here’s a more subtle example from Chanel. Instead of an arrow, this email uses a graphic that gently points downward towards the CTA. The reader’s eyes would naturally trace the direction of the graphic and notice the CTA.
(Image source: Chanel)
Try to use directional cues for any element you want to draw attention to. This can be a CTA, a discount coupon, a new feature, or an offer.
5. Contrasting color CTAs
I talked about using large CTAs that dominate the screen and grab the reader’s attention.
However, size is not the only way to make your CTAs pop. You can also use contrasting colors to help them stand out in any email.
For example, this CTA uses a bold orange color that contrasts completely against the dark blue of the background. This acts as a visual cue for readers to pay attention to the CTA.
(Image source: Harrys)
Colors on the opposite end of the color wheel, i.e. complementary colors, tend to work best as the CTA and background.
Try using this tool to look up your brand’s dominant color. Use its complementary color on the color wheel as either your background or your CTA.
7. Use irrelevant links sparingly
Sometimes, removing a UI element can boost conversions more than adding one.
This is particularly true when you’re dealing with action-focused emails (such as a sale offer) vs information-focused emails (such as an email about new launches).
It can be tempting to add links to your blog, Twitter feed or Instagram page in action emails, but all they do is eat into your share of CTA links.
Brands are particularly guilty of adding social media links in their email footers.
Conclusion and Over to You
There is no quick panacea to email conversions; you have to follow sound UI/UX design principles and use the right UI elements.
While the email design guidelines will vary from brand to brand and email to email, using the above UI elements can help you boost conversion rates. Try a split test with these UI elements and measure the impact on your core metrics.
I’m sure it will be positive!