31 May Best practices in UX and email design
Best practices in UX and email design
You only have 50 milliseconds to grab a user's attention in an e-mail.
The user experience (UX) of emails is often forgotten or ignored. Yet poorly designed emails can lead to lower conversions, lost revenue and an erosion of trust in your institution by your target audience. In this article, we offer you a list of the best tips for a good e-mail UX. And who better to illustrate these tips than Arenametrix customers ?
I - The important elements of an emailing campaign :
For all the points that will be discussed, your watchword will be simplicity. The most successful e-mails make it easy for the user to consume your content and react to it.
1- Campaign settings
You only getone chance to make a good first impression.
That is why you need to take care of the subject line, the preview text, the sending e-mail address, the sender name and the reply e-mail address. These elements will encourage your audience to open your e-mail.
To avoid being labelled as a spammer you can start by indicating your company name as the sender. It is possible to test different senders if this fits in with your branding strategy, but the goal is immediate sender recognition. This recognition will help build trust in your audience.
Your subject line must answer the question : Why should I open this email?. Be as brief and to the point as possible. Creating the perfect subject line and pre-header may seem difficult, but it is possible.
2 - Content
When you emphasize everything, you emphasize nothing
You have a maximum of 11 seconds to communicate your message. It is difficult to write clearly and succinctly, especially in e-mails. Let's assume that your subscribers will only skim your e-mail. Make it easy for them with these tips:
1 - Start with the bare minimum of text you need to get your message across.
2 - The optimum line length for the body text is 50 to 80 characters.
3 - Emails should have specific objectives (preferably one or two).
4 - Pay particular attention to the wording of your value proposition by explaining : Why should they click?
II - The design of your e-mail :
Design elements, from colour selection to image choice, should not be overlooked when creating your email.
1 - The choice of colours
A single watchword : contrast.
The use of contrasting colours (which means using clearly distinct colours, such as between a black background and white text) will make it easier for visually impaired people to read your message.
Contrast is also used to highlight some of your proposals in the body of an email, use it to emphasise important information that should jump out at your contacts.
Here are two good examples:
2 - The choice of images
Whether it's photos, animated gifs or icons, there are several recommendations to follow.
1 – Images are remembered better than words. Use images to complement the message of your e-mail to make the information you provide easier to process.
2 – Avoid large files and long loading times. The size of the email must be less than 100 Kb. Images should be less than 1 MB in size.
3 - If you use background images with HTML text overlay, make sure that your visual remains easy to understand. If necessary, you can work on the rendering in an image editor.
4 - It is preferable to link your visuals to redirections. Internet users expect that an illustration of a given event will lead to the presentation of the event.
5 - Many contacts in your audience may have images blocked by default. It is therefore essential to include descriptive alt text for them and for your visually impaired audience who use screen readers.
3 - The choice of typography
If your audience can't read you, why write to them?
1 - Use bold,italics and varying font sizes to illustrate the hierarchy and importance of your information.
2 - Use readable fonts that will display regardless of the email client, such as Georgia, Arial, Times New Roman and Verdana.
3 - The font size is also important. On a desktop computer, the minimum recommended size is 16px for the body text, and a maximum of 21px.
4 - Where possible, always underline links and avoid grouping them together as they can be difficult to click (especially on mobile phones). Make your links stand out for easy access!
4 - The reading course
You can make scrolling through your e-mail easy and attractive by using good design and appropriate content distribution.
1 - Using visual cues to encourage the reader to scroll through your message, such as diagonal lines, or S-curve layouts, is one way to keep readers interested. The S-curve is an approach involving a two-column layout with an image on one side and text on the other, changing sides with each new line.
2 - To determine which elements stand out most in your message, do the squint test:
What do you see when you squint at your email? Obviously not much, but the things that stand out the most (even if they are blurry) are the things your audience will see first.
III - Your e-mailing strategy :
When the amount of information in your e-mail exceeds the capacity to process it, the memorability of the information suffers. This is why you need to break up your content, fragment it and think about the hierarchy of your content:
1 - The content hierarchy
The most important point of your message should be highlighted.
1 - Your title should have the largest font size. You can put it in bold.
2 - Subheadings should be smaller than titles.
3 - Break your content into chunks: short paragraphs, bulleted lists and white space are your friends!
4 - End your message with a call to action(CTA).
2 - The call to action
Use a CTA to tell the reader what action you want them to take.
CTAs are not necessarily buttons, but they tend to be. They can encourage several online actions: clicking, reading, buying online: driving readers to an external site or encouraging them to perform an offline action.
1 – Hick's Law informs us that the time needed to make a decision increases with the number and complexity of choices. This is why marketers do not usually include multiple action options in the same email.
2 - The size of your call to action should be at least 44x44px and your button should stand out from the rest of the content.
3 - Use a filled-in button for priority CTAs. Text links are suitable for secondary CTAs.
4 - If you have your email statistics at hand, follow them closely to see which CTAs your subscribers use the most.
5 - Use HTML buttons, which work in all email clients. This way, if your subscribers block the images, they will still see your CTA.
6 - As far as placement is concerned, CTAs are usually located somewhere below your explanatory message. The simpler your message, the more acceptable it is for your CTA to be placed at the top.
3 - The overall experience
E-mail usability is as much a part of your business as your website, advertisements, social media and the rest.
E-mail marketing should be a coherent part of your overall strategy. Try as much as possible to favour its readability, accessibility and responsive content.
1 - Depending on the industry, mobile can account for at least 50% of all opens and emails that do not display correctly can be deleted in three seconds. Make sure your email templates are designed with a mobile first approach.
2 - Present key information in text rather than images, again because of image blocking.
3 - Test, re-test, and re-test your emails to ensure that all content is displayed correctly, and that your links are working.
Finally, you can send your e-mail campaign.
This article is adapted from the article Tips for Email UX and Design Best Practices written by Nout Boctor-Smith forEmail on Acid.
To help you design your e-mailing strategy and easily follow all these tips, Arenametrix Routing has a brand new e-mail editor!
Still very easy to use thanks to drag&drop, it allows our users even more freedom and flexibility in their design choices. From now on, they will be able to add numerous types of elements, work with custom themes (fonts, colour palettes, buttons, etc.) and determine the display conditions for even the smallest element, even if it is nested.
To familiarise yourself with this new editor, you can ask for help from your support manager.
Sophia Baladi
Would you like to carry out a data & CDP diagnosis of your organisation? Take advantage of 30 minutes of free consulting by reserving your slot.
Solène Jimenez
Would you like to carry out a data & CDP diagnosis of your organisation? Take advantage of 30 minutes of free consulting by reserving your slot.
Share this article with your friends!
/
/
Read more on our data & entertainment blog:
Museums: innovate through digital technology to find new sources of revenue.
Find out how to use the right digital tools to find new sources of revenue for your museum.
Museums : Guiding the visitor's journey of several sites thanks to marketing automation
ANIMIZE THE VISITOR PATH OF SEVERAL SITES WITH A REDUCED TEAM THROUGH MARKETING AUTOMATION Download the full version Animate the visitor path of several sites with a reduced team thanks to marketing automation We do not share
4 reasons for cultural venues to intensify their digital strategy
We know that the digitalisation of the economy is underway and the culture sector is no exception. However, we have noted that few cultural structures are yet equipped with the necessary tools.
No Comments