Tuesday, June 23, 2020

How To Test A Design Concept For Effectiveness

Most of us are reasonably comfortable with the idea of carrying out usability testing on a website or prototype. We don’t always get the opportunity, but most people accept that it is a good idea.
However, when it comes to a design concept, opinion is more divided. Some designers feel it undermines their role, a view that seems to be somewhat backed up by the famous “Forty Shades of Blue” episode, where Google tested which one of forty shades of blue to use for link color.

It is a position I can sympathize with, and testing certainly doesn’t tell us everything. For example, it cannot come up with the right solution, only judge a design that already exists. Neither is the kind of obsessional testing demonstrated by Google healthy for morale, or most companies bottom line.
That said, in this post, I want to explore some of the advantages testing design concepts can provide to us as designers, and demonstrate that we can do it cheaply and without slowing down the delivery of the overall project.
Let’s begin by asking why a designer might favor testing of their design concepts.

Why You Should Embrace Testing Design Concepts

Every designer has stories of being caught in revision hell. Endlessly tweaking colors and adjusting layout in the hopes of finally getting sign off from the client.
It’s not always like that, but every project is a gamble. Will the client, sign off immediately, or will you end up with a design concept named “Final-Version-21.sketch”? And that is the problem; you just do not know, which makes project planning and budgeting extremely difficult.

Testing Makes the Design Process Predictable

People tend to consider testing a design as a luxury that a project cannot afford. They see it as too time-consuming and expensive. However, in truth, it brings some much-needed predictability to a project that can, in many cases, make things quicker and cheaper.
Yes, if everything goes smoothly with design sign-off, design testing can slow things down and cost a little money. But, that rarely happens. Usually, a design goes through at least a few rounds of iteration, and occasionally it has to be thrown out entirely.
Rarely is this because the design is terrible. Instead, it is because stakeholders are unhappy with it.
By contrast, testing creates a framework for deciding whether a design is right, that is not based on personal preference. Some quick testing could approve a design without the need for further iteration or at worse would lead to some relatively minor amendments if the designer has done their job.
In most cases, this proves faster and less expensive than an endless discussion over the direction. However, even when it does not, it is more predictable, which improves product planning.
Testing also has another related advantage. It changes the basis upon which we assess the design.

Testing Encourages the Right Focus and Avoids Conflict

The design has a job to do. In most cases, it has to connect with a user emotionally, while also enabling them to use the website as efficiently as possible. Unfortunately, most design is not assessed on this basis.
Instead, we often evaluate a design on the simple criteria of whether or not the client likes it. It is this conflict between the role of a design and how it is evaluated that causes disagreements.
By carrying out testing on a design, you refocus the stakeholders on what matters because you build the test around those criteria instead.
That has another advantage as well. It helps avoid a lot of the disagreement over the design direction. That is especially true when many people are inputting on the design.
Because design is subjective, the more people who look at it, the more disagreement there will be. The way this is typically resolved is through a compromise that produces a design that pleases nobody and is often not fit for purpose.
Testing provides an alternative to that. It leads to less conflict between stakeholders and also ensures the integrity of the design, which ultimately leads to a better product.

Testing Improves Results

By using testing to avoid design by committee and focus stakeholders on the right assessment criteria, it almost guarantees a better design in the end.
However, there is another factor that ensures testing produces better design; that is the fact that we, as designers are not infallible.
Sometimes we misjudge the tone of the design or the mental model of the user. Sometimes we fail to spot how an image undermines the call to action or that the font is too small for an elderly audience. Testing helps us identify these issues early, while they are still easy to fix. Updating a mockup in Sketch or Figma is a lot easier than on a working website.
So hopefully now you see that design testing is a good idea for all parties concerned. The next question then becomes; how do we carry out design testing?

How to Implement Design Testing

Before you can test how well a design concept is working, you first need to be clear about what you are testing. Earlier I said that a design had two jobs. It had to connect with users emotionally and enable people to use the site as efficiently as possible.
With that in mind, we want to test two things:
  • The brand and personality of the design, which is what dictates whether a design connects with the user emotionally.
  • The usability and visual hierarchy, which enables people to use the site more efficiently.
It is important to note as well that for the sake of this article, I am presuming all we have is a static mockup of the design, with no interactivity.
So, let’s start by looking at how we test brand and personality.

Test Brand and Personality

Before somebody is willing to act on a website, they have to trust that website. Users have to form a positive first impression.
In a study published in the Journal of Behaviour and Information Technology, they found that the brain makes decisions in just a 20th of a second of viewing a webpage. What is more, these decisions have a lasting impact.

In that length of time, the user is judging the website purely on aesthetics, and so we need to ensure those aesthetics communicate the right things.
We have three ways we can test this, but let’s begin with my personal favorite.
Semantic Differential Survey
A semantic differential survey is a fancy name for a simple idea. Before you begin designing, first agree on a list of keywords that you want the design to signal to the end-user. These might be terms like trustworthy, fun or approachable.
Once you have created the design, you can now test whether it communicates these impressions in the user by running a semantic differential survey.
Simply show the user the design and ask them to rate the design against each of your keywords.

The great thing is that if the design rates well against all of the agreed words, not only do you know it is doing its job, it is also hard for stakeholders to reject the design because they don’t like some aspect of it.
You can use this method to ascertain the most effective approach from multiple designs. However, there is a much simpler test you can also adopt when you have more than one design concept.
Preference Tests
A preference test is what it sounds like. You simply show several design concepts to users and ask them to select which approach they prefer.
However, instead of just asking users to select which design they like most, ask them to select a design based on your keywords. You can ask users to select which design they feel best conveys the keywords you chose.
You can also apply the same principle of comparison to your competition.
Competition Testing
You can run precisely the same kind of preference test as above, but instead, compare your design concept against competitors' websites. That will help you understand whether your design does a better job of communicating the desired keywords compared to the competition.

The advantage of both types of preference testing is that it discourages stakeholders from adopting a pick-and-mix approach to design. In other words, it encourages them to compare designs in their entirety, rather than selecting different design elements from the competition or different versions, and asking you to combine them into a Frankenstein approach.
By combining both semantic differential surveys and preference testing, you can build up a clear picture of whether a design’s aesthetics are communicating the right impression. However, we still need to ensure it is usable and that people can find the information or features they need.

Test Usability and Visual Hierarchy

A website can look great and give the user the right feel, but if it is hard to use it will have still failed to do its job.
Once you have a fully built website or even a prototype, testing for usability is easy by combining A/B testing (quantitive) with usability testing (qualitative).



However, when all you have is a static mockup of the design, it can appear harder to test. Fortunately, that impression is incorrect. What is more, it is worth testing at this early stage, because things will be much easier to fix.
We have two tests we can do to ascertain usability. The first focuses on navigation and the second on visual hierarchy.
First-Click Tests
An influential study into usability, by Bob Bailey and Cari Wolfson, demonstrated the importance of ensuring that the user makes an excellent first choice when navigating your website. They proved that if users got their first click right, they had an 87% chance of completing their task correctly; however, if they got it wrong that dropped to just 46%.
Fortunately, we can test whether users will make the right first click using an imaginatively named “first click test”.
In the first click, test users are given a task (e.g. “Where would you click to contact the website owners?”), and then they are shown the design concept.
The user then clicks the appropriate place on the concept that they believe is correct, and the results are recorded. It is that simple.

The advantage of running a first-click test from the designers perspective is that it can resolve disagreements about information architecture by demonstrating whether users understand labeling and the site’s overall structure.
However, usability isn’t all about clicking. It is also essential that users spot critical content and calls to action. To test for that, you need a 5-second test.
5-Second Tests
Research seems to indicate that on average, you have about 8 seconds to grab a users attention and that many leave a website within 10 to 20 seconds. That means our interfaces have to present information we want users to see in the most obvious way possible. Put another way; we need to distinguish between the most important and less important information.
Testing this kind of visual hierarchy can be achieved using a 5-second test.
Usability Hub describe a five-second test in this way:
“A five-second test is run by showing an image to a participant for just five seconds, after which the participant answers questions based on their memory and impression of the design.”
It is important to note not only whether users remembered seeing critical screen elements, but also how quickly they recalled those elements. If users mention less essential elements first, this might indicate they have too much prominence.
The great thing about a 5-second test is that it can reassure clients concerns that a user might overlook an interface element. Hopefully, that will reduce the number of “make my logo bigger” requests you receive.
As you can see, testing can help both improve your designs and make design sign off less painful. However, it may be that you have concerns about implementing these tests. Fortunately, it is more straightforward than you think.

Who and How to Test?

The good news is that there are some great tools out there to help you run the tests I have outlined in this post. In fact Usability Hub offers all five tests we have covered and more.

You simply create your test and then share the website address they give you with users.
Of course, finding those users can be challenging, so let’s talk about that.
When it comes to testing usability, we do not need many users. The Nielsen Norman Group suggests you only need to test with five people because beyond that you see diminishing returns.



These users can be quickly recruited either from your existing customer base or via friends and family. However, if you want to be a bit pickier about your demographics, services like Usability Hub will recruit participants for as little as a dollar per person.
Testing aesthetics is trickier because as we have already established design is subjective. That means we need more people to remove any statistical anomalies.
Once again, the Nielsen Norman Group suggest a number. They say when you want statistically significant results, you should look for at least 20 people.
It is also worth noting that in the case of aesthetics, you should test with demographically accurate individuals, something that your testing platform should be able to help you recruit.
Although that will cost a small amount of money, it will be insignificant compared to the person-hours that would go into debating the best design approach.
There is also often a concern that it will take a long time. However, in my experience, you can typically get 20 responses in an hour or less. When was the last time you got design approval in under an hour?

Worth a Try

Testing a design concept will not solve all your designer woes. However, it will lead to better designs and has the potential to help with the management of stakeholders significantly. And when you consider the minimal investment in making it happen, it makes little sense not to try it on at least one project.

Wednesday, June 3, 2020

HTML Email Guide

 

Getting Started With HTML Email

If you’re just trying to understand everything that’s happening behind the scenes of a quirky world of HTML email, Caity G. O’Connor has published a wonderful guide on how to start with email coding. The article features courses, tutorials, articles, and just general guidelines to keep in mind when building and designing emails — all in a comprehensive one-page-guide.

Alternatively, How to Code HTML Emails for Any Device is a very thorough guide on building a reliable HTML email template, and how to test it — along with a hands-on example of building a newsletter template from scratch. In general, that’s a very solid overview of everything you need to know to get started on the right foot.

Jason Rodriguez has a detailed video course on HTML Email (not free) with pretty much everything to know about them, from accessibility to troubleshooting, workflows and tools.

And if you find yourself struggling with an email issue or just looking out for some help from a community, #emailgeeks is a great starting point. It’s an invite-only Slack community with plenty of channels to discuss code, design, job openings, events and new tools and resources. You can also find many resources shared with the hashtag #emailgeeks on Twitter.

HTML Email Languages and Frameworks

Coding clean, responsive emails that provide a solid experience in all popular email clients can be a time-consuming challenge. HEML is here to change that. The open-source markup language gives you the native power of HTML without having to deal with all of the email quirks. There are no special rules or styling paradigms to master, so if you know HTML and CSS, you are ready to start.

MJML is based on the same idea of simplifying the process of creating responsive emails. The markup language is based on a semantic syntax that makes the process straightforward while an open-source engine does the heavy lifting and translates the MJML you wrote into responsive HTML. You can start out with a step-by-step tutorial through MJML.

A library of standard components saves you extra time and lightens your email codebase. And if you want to build your own, Modular Template System Guide might help, too.

HTML Email Framework Based On Tailwind CSS

Making an HTML email work across email clients ain’t an easy task. Fortunately, there are plenty of reliable tools, templates and frameworks to make it easier to get your work done. For example, Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS and advanced, email-specific post-processing. It also provides a few ready-made projects (Maizzle Starters) that you can start with right away.

MJML is based on the same idea of simplifying the process of creating responsive emails. The markup language is based on a semantic syntax that makes the process straightforward while an open-source engine does the heavy lifting and translates the MJML you wrote into responsive HTML. You can start out with a step-by-step tutorial through MJML.

A library of standard components saves you extra time and lightens your email codebase. And if you want to build your own, Modular Template System Guide might help, too.

HTML Email Framework Based On Tailwind CSS

Making an HTML email work across email clients ain’t an easy task. Fortunately, there are plenty of reliable tools, templates and frameworks to make it easier to get your work done. For example, Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS and advanced, email-specific post-processing. It also provides a few ready-made projects (Maizzle Starters) that you can start with right away.

 

Codedmails includes 60 email templates and themes, all written in MJML, and tested for compatibility. The code is all available on Github, and the templates are free to use for non-commercial projects, while MJML source files are provided for an extra charge.

Stripo, Chamaileon, Postcards, Topol.io, GoodEmailCode, Pixelbuddha and Bee Free all feature plenty of free HTML email templates, Litmus provides Responsive Email Templates for newsletters, product updates and receipts, and CampaignMonitor has a free HTML email template builder with drag’n’drop functionality.

HTML Email Feature Support: Can I Email…?

A handy tool that belongs in everyone’s toolset who finds themselves wrangling HTML email — be it every now and then or regularly — is caniemail.com. Inspired by the successful concept of caniuse.com, Can I email lets you check support for 179 HTML and CSS features across 31 email clients.

 

You can enter a feature to see how well it is supported, check the feature index, compare email clients, or view an email client support scoreboard that ranks email clients based on their support. The complete data is also available as a JSON file.

A Repository For Email Bugs

Apple Mail not showing embedded SVGs, Gmail not displaying emails at full width, Outlook changing the behavior of animated Gifs — we all know how weirdly email clients sometimes behave.

 

To help you understand what’s going on when you come across bugs like these, RĂ©mi Parmentier maintains Email Bugs, a GitHub repository for weird email client behaviors. It not only makes the life of email designers easier by providing a place to discuss bugs but also tries to reporting each bug to the concerned company and fix them for good. But just in case it’s not possible, How to Target Email Clients provides an overview of workarounds to target specific email clients.

Good old HTML links can do more than what we usually give them credit for. We might be used to mailto: prefix, but actually generating the code can be quite annoying. Mailtolink.me does one thing, and it does it well: it generates the snippet for the mailto links including CC, BCC, subject line and body text.

Mailto Selection Prompt

Sometimes when you click on an email address, it might open an application that your customers aren’t really using. That’s why it’s common to copy-paste email addresses instead of clicking on the links directly. To avoid frustration on the other end, we can use Mailgo and MailtoUI.

Instead of opening a native email client, both tools prompt a modal window, allowing the user to choose one of the preferred services, or copy-paste the link. Additionally, Mailgo can address all tel links as well, allowing them to open Telegram, WhatsApp, Skype, call as default or copy the phone number — and it supports dark mode, too.

Email Inspiration

It might seem like just because HTML email feels quite ancient and outdated, so are possibilities of what we can do with HTML email. However, there are plenty of resources, blogs and podcasts featuring new email techniques — some of them often being on the very creative side of things!

Litmus Blog, CampaignMonitor blog and HTML Email feature plenty of articles and podcasts with best practices, tips, resources, and even podcasts on HTML email. And if you need a bit of inspiration for recent emails, sorted by industry, Really Good Emails and EmailLove have got your back, too.

  • You don’t need to comb through your own email inbox to find HTML email design inspiration. Email Love has rounded up a fantastic selection of inspiring emails from top companies.
  • Really Good Emails makes it easy to search for HTML email inspiration. You have the choice of exploring the collection chronologically or you can narrow down the results based on what type of email it is (e.g. coupon, free trial), what the goal is (e.g. customer rewards, thank you), the company name or category and so on.
  • Not enough? There is also HTML Email Designs and HTML Email Gallery.

Accessible Emails

With email, where do we stand in terms of accessibility? Do we announce emails properly to screen readers? What about dark mode? Accessible Email repo highlights a number of articles, tools, presentations and resources about accessibility — not only for email, but most specifically for it.

With Accessible-Email.org, you can analyze sent campaigns and check for accessibility improvements. With Dark Mode for Email Simulator, you can check how your email looks like in dark mode.

Inline CSS and Transform HTML Emails

If all you need is a clean space to transform your HTML and CSS, Alter.Email is a reliable option. With the tool, you can choose a few “transformers” — e.g. inline CSS and clean up the code, remove unused CSS, as well as format HTML and even prevent widow words. Alternatively, you can also use Postdrop which also allows you to minify and inline CSS and send a test email as well.

Remove Unused CSS From Email Templates

Writing CSS isn’t a particularly exciting task with HTML Email, scattered with !important and inline styles all over the place. To remove unused CSS from email templates, there’s Email Comb. The tool allows you to add classes and IDs you’d like to ignore, choose if you’d like to minify it and remove comments, and it shows what exactly it has removed.

Cheatsheet For Targeting Email Clients

Email clients modify and remove some of your HTML and CSS, often mercilessly. If one of the email clients doesn’t behave quite as expected, you might want to treat it separately. A cheatsheet for targeting email clients allows you to pick a target email client and at least attempt to address it directly. It might not work all the time as email clients change all the time, but it’s something that’s worth giving a try.

Everything HTML Email Resources

Thebetter.email provides a growing repository of useful email marketing resources, including people, learning sites, tools, details about email service providers, newsletters, code and interactive email resources. Hand-picked by Jason Rodriguez who’s been in the industry for years and has spent a lot of that time wading through the muck to find the good stuff.

Email Marketing Resources

If you need to dive deep into the trenches of HTML email, best practices and email marketing, CampaignMonitor Guides and Mailchimp Guides have plenty of resources to get started. Indeed, some of them will be product-specific, but they’re also more general guides around best practices for sending emails, design guides, delivery tips, anti-spam requirements and plenty of other topics along these lines.

Oracle Email Marketing Trends

Email Marketing Resources

If you need to dive deep into the trenches of HTML email, best practices and email marketing, CampaignMonitor Guides and Mailchimp Guides have plenty of resources to get started. Indeed, some of them will be product-specific, but they’re also more general guides around best practices for sending emails, design guides, delivery tips, anti-spam requirements and plenty of other topics along these lines.

And if you are looking for ongoing trends in email marketing, Oracle’s Email Marketing Trends includes plenty of videos around email deliverability, modular email architecture, email accessibility and also email marketing.

Dark Mode In Gmail And Outlook

We’ve all got used to the dark mode in many apps and websites out there, but what about dark mode support in HTML email clients? We could, of course, serve the same email to all subscribers, but if you are used to dark mode on your operating system, a bright email might rather be offputting and encourage abandonment.

The Developer’s Guide to Dark Mode in Email highlights some of the important guidelines to keep in mind when you are building a dark mode version of your HTML email. It explains how to target dark mode, how to deal with images and general browser support (which is pretty good!).

And if you are looking for ongoing trends in email marketing, Oracle’s Email Marketing Trends includes plenty of videos around email deliverability, modular email architecture, email accessibility and also email marketing.

Dark Mode In Gmail And Outlook

We’ve all got used to the dark mode in many apps and websites out there, but what about dark mode support in HTML email clients? We could, of course, serve the same email to all subscribers, but if you are used to dark mode on your operating system, a bright email might rather be offputting and encourage abandonment.

The Developer’s Guide to Dark Mode in Email highlights some of the important guidelines to keep in mind when you are building a dark mode version of your HTML email. It explains how to target dark mode, how to deal with images and general browser support (which is pretty good!).

HTML Email Development IDE

If you spend quite a bit of time with HTML email, you might want to use a dedicated HTML Email editor. Parcel is just that: a code editor built specifically for coding and designing emails. It provides live previews, so you can see in real-time what you are building, and it also has accessibility features out of the box, so you can check accessibility issues while you are building or designing the email. Plus, the tool also allows you to collaborate with your team and run email tests directly from the tool.

Alternatively, you can also take a look at Mail Studio, a sophisticated desktop application (for Windows, macOS and Linux) that combines visual and code editing in one email IDE.

The app comes with a library of components, from headings to navbars and accordions, a couple of responsive email templates, Google Fonts integrations, built-in Sass support, command palette, collaboration tools, email previews and even integration with email service providers such like MailChimp, Campaign Monitor and Sendgrid. Figma integration is supposed to be coming soon.

Generate A Full-Page Email Preview

If you need a full-page preview of your HTML Email, Emailpreview.io might be just what you need. You can copy/paste HTML, or import an EML file that you’ve just received, and the tool outputs a fully rendered image of your email. You can choose the device width as well. A helpful little tool to keep nearby.

Mail Tracker Blocker

Most marketing emails include trackers in HTML email, so they can track how often, when and where customers open emails. MailTrackerBlocker acts pretty much as an ad-blocker for browsers, but works with email clients. The tool labels who is tracking customers and removes tracking pixels before they can be displayed, so you can still load all remote content and keep your behavior private. Currently only available for Apple Mail on macOS 10.11 - 11.x (shoutout to Jeremy Keith!).

Making Email Better

Overflowing inboxes, spam with backlink requests, people emailing you on a Friday afternoon and following up on Monday morning — there are a lot of things that make dealing with email unpleasant. However, since there is no getting around email, there’s only one solution: Let’s improve the situation together. With that in mind, Chris Coyier is running “Email is Good”, a site about email productivity.

“Email is Good” takes a look at things that make emails annoying, tips and ideas on how we can do better, as well as little anecdotes that everyone can relate to. A great opportunity to reflect on how each one of us deals with email and the reactions that our email habits might provoke on the recipient’s side.

Wrapping Up

We probably have missed some important and valuable techniques and resources! So please leave a comment and refer to them — we’d love to update this post and keep it up-to-date for us all to be able to get back to it and build HTML email better and faster.