‍

Email UX and UI Best Practices

You read emails everyday, but have you ever thought of emails as landing pages? In essence, they’re hardly different.

Emails are intent-driven messages to service the user’s customer journey. 

It is precisely for this reason why emails are so powerful. You’re sending thousands of highly targeted, personalized landing pages, each with highly segmented audiences, to provide value in their customer journey with your business.

As such, it’s important for designers and marketers to go through the same rigorous process when designing for email, as they would for any other digital entity. Namely, they should design for UX, UI and Accessibility.

‍

UX and UI solve different problems, but both are core to a great email experience

For those who are not familiar with terminology, UX refers to the user experience. UXers think holistically about the customer and guides the user through well-designed journeys. 

This is no different than designing for emails. For example, the strategy of how you want to direct user attention for a newsletter will be very different from a new product email. How does the user engage in the customer journey within your sales funnel and does the email correctly provide value for the customer at a particular pain point? 

There is much overlap between UX and content strategy. To put it briefly, both verticals are keenly focused on the user journey and attempt to deliver value for the user. For content strategists, it’s delivering value from a content perspective. For a UXer, it’s delivering value from a user-centric perspective.

At the end of the day, UX is about delivering maximum value to your customers with as little friction as possible.

On the other hand, UI refers to the user interface and is related to the physical elements such as buttons, text, headings, images, colors, etc. UI designers are masters at their crafts, knowing the in-and-outs of design tools such as Sketch or Photoshop. 

Pure graphic designers tend to have a greater focus on UI rather than UX. An excellent designer should have a good understanding of both and a mastery in at least one.

Accessibility rules define how users should interpret your email if they have an impairment. Email accessibility can be very critical as there are laws governing how digital information should be transmitted.

Although your target audience may not necessarily be impaired (let’s say your audience is into extreme sports), accessible design is great design in general. 

If a person with an impairment can easily interpret, understand and navigate through your email, then a normal user will also capture the information with ease.

‍

UX Best Practices for Email

‍

1. Think holistically - Apply the same storytelling and design elements you would on other digital properties

Stick to the same branding guidelines and design standards for emails as your other digital properties. 

For users who are already familiar with your digital ecosystem, there’s a good chance they have an established mental model of your website. The key is to be consistent and align your design to the mental model of your personas. 

If you’re creating a new brand, understand your personas intimately before thinking about design. Once you’re ready to kick off design, look to create a design system to keep track of UI elements across the digital assets. What we’re doing here is to promote consistency so if a user enters your site again, they’ll have a mental model mapped out—taking away the learning and aspect. We’ll talk more about design systems in the UI section.

‍

Dive into your customer journey, user personas and segment them accordingly

Personas should be anchoring points when forming your solution space:

• How does your persona normally interact with technology?
• How does your persona normally engage with emails?
• What time of day do they check emails?
• Are they likely to be engaged with my brand from the start?
• Is it on the phone or computer?
• Where in the persona’s customer journey can you provide the most value through an email?

Create all the personas your brand might influence. Then, map the persona to customer journey touchpoints and understand where different platforms play a role (in our case, we’ll be focusing on email). Also, try to think about pain points that particular persona may have in your customer journey. This can help you catch hidden pain points. 

Tying this back to email, think about methods how email may alleviate a problem or create opportunity. 

‍

Establish Credibility

‍

Using a style that’s familiar allows users to establish the credibility they already have with your business. Many users are very aware of scam emails out there to steal their personal information. It makes sense for some users to be cautious of emails. Thus, leverage all the credibility you have! 

Ensure call-to-actions (CTA) have clear intent and message, and use no more than 6 words. 

Make messages clear and unambiguous. Use the same branding, colors and fonts everytime. It might seem boring, but this establishes trust—and it goes a long way.

‍

Expectation

‍

Align your email to your customer’s expectation. This is especially true for transactional emails over marketing emails.

For example, if your user has just finished purchasing a product, what is the necessary information they should receive and how should it be presented?

Similarly, if a user signs up for your newsletter list, what do users expect in a welcome email? 

When subscribing to a poop-themed paraphernalia company, customers are probably going to expect a relaxed and whimsical tone vs. a rigid, formal welcome email for life insurance to say the least.

‍

Consider Transactional vs Experiential experiences for email

Experiential journeys in UX according to uxdesign.cc:

“a fan of your brand, be inspired by your website or the content you display, or because she likes to be fully engaged with your brand, or simply wants to reduce the number of options/brand to choose from.”

These can be emails with content to engage your most loyal users via segmentation, such as a newsletter or the upcoming release of a new product line. Additionally, this may be content for newcomers who’ve just subscribed to your email list. 

Experiential emails should inspire and/or engage your audience. The better the personalization and segmentation, the better the analytics will appear.

To accomplish this, try to find out what works best with your audience and engage them with targeted content. For example, if you own a company that sells drones to hobbyists, perhaps provide videos or stories of drone racing competitions to the segment that has purchased a particular style of racing drones.

Transactional journeys are easy to understand:

“very straightforward and one-sided: the customer comes to you to buy the product or service he has decided to purchase”

These are emails sent to the customer that should be clear-cut, and the user should have no difficulty understanding what the content is about. Ideally, their expectations from reading the subject line should be aligned with the contents of the email.

Examples of this may include purchase confirmation emails, email verifications for double opt-in, lost passwords, etc. 

Transactional emails should give your users a sense of security and trust in your company.

Designing transactional emails should make good use of information grouping. Make sure similar information is clustered. Provide clear spacing between groups of information.

Think about context when designing email automation flows

‍

Although email flow templates are a good place to start, they don’t account for context.

For example, a user who has abandoned their cart because they don’t like your item is quite different than somebody who has forgotten about the item in their cart.  

In this example, if your email automation flow was solely based on cart abandonment time, you would’ve captured both audiences and your abandon cart email would only be half as effective.

Design with mobile users in mind

‍

About half of all users open emails on their phone. 

Thus, it’s important your email is responsive, renders correctly on all devices and loads quickly. 

Test and optimize like a scientist

‍

This is a given, but a great UXer realizes what they don’t know. Always ask for feedback and importantly, learn how to separate the noise from what really matters. 

UI Best Practices for Email

‍

Design Systems

‍

A design system is a set of patterns, colors, typography and design elements that are used consistently throughout your digital ecosystem. 

A good design system will automate many tasks for you. If the branding team decides to change the primary font of the brand, then the font change propagates everywhere—including emails.

Design systems can be something as simple as an excel document to keep track of UI elements (although I don’t recommend it).

A design system promotes consistency, reduces design maintenance costs and ensures alignment between all your digital properties - including your emails.

Font Sizes for Email

‍

Don’t make user’s struggle to read. Text should be legible on all devices.

Here’s a quick example on mobile:

As you can see, 11pt font is too small. 12pt font is better, but can still pose trouble for people on smaller screen sizes. 14pt and 16pt font sizes are perfectly legible. 

How you choose which font depends on the amount of content in your email and how heading and body content is structured. For example, if you’re choosing a newsletter with lots of content, don’t be afraid to use a 12 point font size (the absolute minimum). However, if content is sparse on a page, then a bigger font size can be used to direct user attention via a quick glance.

For a complete understanding of font size guidelines, resources like this can get you started.

‍

Custom Fonts

‍

Your brand may be using a custom font that isn’t supported by the user’s email client. If you choose to use a custom font for your email, always select a backup font (2 backup fonts would be even better).

This will give you breathing room so that if the email client cannot render on a browser, you can choose a safe backup font that’ll look relatively similar.

Which fonts do email clients support? That’ll depend on the client. Annoyingly enough, they all support a different set of fonts...

If you’re looking for a safe font, any of the default fonts on your email service provider should be safe.

CTA (Call to Action) Sizes for Target Areas on Mobile

Buttons, CTAs and links in your email should have a large hit area for users. If the hit area is defined too small, user’s may have trouble tapping on the CTA or unintentionally selecting the wrong link.

Microsoft recommends a target touch size of 34px with the minimum being 26px. Apple goes even larger and recommends 44px tall and 44px wide. 

‍

Responsive Approach

Lastly, make sure your email is responsive! Responsive design allows for your digital interface to fit in whatever environment it is in. So, if the user shrinks their browser size, your webpage (or email) should automatically resize. 

However, this doesn’t mean you need to design hundreds of email templates.

The standard email width is 600px. 

Start with that size as a template to get started.On mobile, the email contents will flow down and images will resize. On larger screen sizes such as Desktop and Tablet, usually email marketers will fill in the background with a color that’s not overbearing (such as light grey).

Accessibility Best Practices for Email

‍

Why is accessibility important? 15% of the world’s population experience some sort of impairment—whether it’d be cognitive, auditory, physical, neurological or visual. Not only does accessible design allow all people to access your emails, but it can also be part of the law. 

Yep, emails also need to be accessible according to the American Disability Act.

Lastly, an accessible email is good design in general. If a user with an impairment can easily interpret information from your email, then a non-impaired user would find the task just as easy, if not easier!

‍

Color Contrast

‍

Even if you’re not visually impaired, you may have trouble reading the text on the left. As part of WCAAG guidelines, it’s important to take color contrast into consideration.

If you’d like a definitive answer on whether your color contrast ratio is appropriate, you can put your color inputs here to see if they meet guidelines.

Structured for the Screenreader 

A screenreader is a tool that reads text to users - it’s immensely helpful for users with visual or physical impairment.

Headings are often used by screenreaders to create structure and hierarchy. In turn, users can quickly navigate between sections.

Well-specified headers are not only a good practice for accessibility, but can help your readability and SEO if you choose to re-host your emails on a website (newsletters are a good example).

‍

Alt Text

‍

Lastly, alt text is displayed to users if the browser cannot render the images. For visually impaired users, alt text can serve as a description of what the image is. 

Use alt text in images whenever possible, as it is one of the significant factors in SEO.

Conclusion

‍

Implementing these UX and UI best practices in your emails will take some time to configure, but the results you see will be well worth the effort. 

Remember, good UX and UI is always framed from the user’s point of view and how we can add value to the customer journey. Emails are no different and should be designed with the user in mind. Best of luck on your email goals!