Nano-brewed interactions: The ‘mailto:’ link
Small batch no. 001
The point of this series is to highlight the little things — those subtly annoying problems that don’t get solved because they “don’t have a big impact.” While they may not be top-of-mind, these little annoyances impede our ability to build truly delightful things.
We’ll explore some UX hangnails like Larry David trying to exit a parking garage and see if we can’t cook up a locally-grown-artisan-hand-crafted cold-pressed solution.
The subtle nuisance of the day:
84% of users don’t open emails on their native desktop mail*, yet the all too common ‘mailto:’ link is thrown onto individuals/agencies portfolio’s all over the interwebs. When viewing on a computer*, clicking the ‘mailto:’ link throws up a native pop up to configure the mail app (for Apple users).
*This does not include the mobile interaction, we’ll get to that later.
We won’t have to look for long to find some “mailto:” offenders—let’s check out some of the top portfolio sites on awwwards.com for this CTA that works 16% of the time.
#1 — The worst offense
What happens when we don’t list out our email address?
This is a nice website with some great interactions, but they’ve gotten their praise for that. Here’s what happens when I click ‘Send a Message’ or that ‘email’ link:
This happens on countless websites and the worst offense is making the CTA an icon or a phrase that isn’t the typed out email. The user could at least copy and paste it into their OG email client if the email was typed out. I tried to right click on this CTA to see if the email was linked somewhere, but it’s totally hidden. So unless I set this damn mail app up, I can’t send them an inquiry.
#2–The lesser offense
We could expose our email address.
Some of the most successful design agencies will, at least, show us the full email address, but they still use the ‘mailto:’ code. This includes Instrument, Huge, and Big Spaceship.
If I click on it, it’s the same mail pop-up interaction, but at least now I can highlight, or to save a step I can right click and hit ‘Copy Email Address’:
#3– No offense
Why show an email at all if you could expose a form.
Lots of portfolios include a contact page with a form to submit for an inquiry et cetera. I got no beef with this, except if you’re making your own website this functionality could be a tad out of reach (unless you’re on a platform like squarespace). Here’s a solid example from ueno.:
This solves our problems, except I can’t attach anything or leave my email signature et cetera. I’m sure there are forms that replicate all this type of functionality, but after a while we should ask ourselves if all that code is worth it. And yes, there are form plugin’s you can put on your site, but they always look like a plugin and function differently than the rest of the site — so unless you go custom, it won’t be a cohesive experience.
Benefits
- Anonymity. This is certainly the best option for people who are worried about handing out their contact information.
Downsides
- Loose email functionality.
Lets try something new
I think we can explore a way to expose a linked email and change the behavior of clicking on the link…
Copy to clipboard
Let’s ditch the ‘mailto:’ for a minute.
How about copy to clipboard? Imagine if you were looking to add a designer to your team. You found a designer’s site who was looking for work, enjoyed her case studies, and wanted to make contact. You found her email there and clicked on it, and that mail app popup didn’t popup. Instead, some feedback came up that her email was copied to you clipboard for you to paste wherever you wish. I think you’d damn near hire her on the spot for making your day…
There are many ways to visualize this, let’s use Instruments site for an example:
Not bad, although it might need some better feedback like ‘copied to clipboard.’ That could get a little clunky.
Also if I’m so used to that mail popup, do I even try to click on emails anymore? What about something that would tell me I can copy this email easily before clicking it:
eh OK, but again maybe a little loud. There’s other ways to go about this if we think we can build back up user’s respect for an email link. One day, if people get used to getting emails copied to their clipboard automatically, we could just show an icon in place of this whole experience.
If you type in ‘copy email to clipboard’ on dribbble, you get one result. This guy knows what’s up:
I asked Taylor if he implemented this anywhere, but I haven’t heard back yet. This would be something really nice to interact with in the wild. But basically this icon is used in place of the text ‘copy,’ which still has the subject being copied to the left of it. Maybe if there was a larger mail icon with a small link icon appended to it, it could stand alone or even in a row of social/connect icons.
For example:
Benefits
- Easy for user to paste into the email client of their choice.
- Delightful.
Downsides
- Users don’t expect this behavior and CTA’s may need to prime them overtly.
- Requires JavaScript.
Mobile
‘Mailto:’ works great on mobile/tablets. People configure native email on devices 40% more than on desktop. And copying to clipboard on a device would take longer than tapping a ‘mailto:’ link. If you end up using the copy email to clipboard on your site, be sure to add a media query to touch devices reverting back to the ‘mailto:’ link.
Examples in the wild
I’m leaving a section here if I get any links in the comments of anyone seeing this contact interaction on the webs. I will update the article if you find any!
Brownie points for anyone who finds a smart “tel:” link on desktop that asks you if you would like to text the number to your phone 🔥.
HOT UPDATE AUGUST 2019:
I found a portfolio I’m very excited about! S.J. Zhang’s footer features this amazing nano interaction. Kudos.
Wrap up
So after all that, could we also engage the 16% who configure their desktop mail and our copy friendly folks? Sure, we could have a double CTA below an email that said “Copy to Clipboard,” and “Open in Email Client.” But if you’re trying to decrease the cognitive load on such a nano-interaction, why not go for one button that everyone can use.
At the end of the day, if you leave your ‘mailto:’ where it is, you’re still gonna get hired if you’re a designer or get inquiries if you’re an agency because we are all perpetrators at the moment. As soon as better patterns are recognized though, we all need to stop phoning it in on our contact links.
Check out small batch no. 2 too!
