How we present information to people influences how they react, and affects their ways of working. What I mean to say is, the manner in which we provide text, buttons, links, menus affects the accessibility and the usability of our web pages.
Accessibility and usability should be part of your design workstream – they’re concepts (and sets of techniques) that should have been laid out at the very beginning when your intranet or website was designed. But as they matter in every page you create and update, it’s important to maintain the accessibility and usability standards, and to improve upon them when we can.
The three two ways to present email addresses
(At work, email addresses are usually made up of forename and surname, but here, I’ll use my own as an example.)
- You can send your completed forms to Wedge on Wedge@kilobox.net
- You can email Wedge@kilobox.net to request a quote.
The first one shows my name hyperlinked to my ‘Contact’ page (or your intranet Profile Page would be ideal) and then shows my hyperlinked email address. It’s clickable, but it also shows the address for those people with good memories, and it can be copied n pasted, for those people who just want the address.
Oh, here’s an interesting point that the writers among you may disagree with me on. When a sentence ends in an email address (like in the first example above) or in a web address ( www.google.co.uk ) then I believe it is best practice not to use a period. Full stops are necessary to end a sentence I know, but when we end on an address and place a period after it, people often copy that period with the address before pasting it in to their browser / email client. I’ve seen it done (and done it) too many times to ignore this mistake, so as a webmaster, I do not use a period after any kind of address.
The perfect solution would be to never end a sentence with an address. Re-writing the sentence to keep the address in the middle may be the more graceful solution, but I’m OK with missing the period at times
but not this time, obviously.
2. You can email Wedge@kilobox.net to request a quote.
The second method is the simplest, it just shows the address and it’s clickable, as in the first method.
Obviously, variations like Contact Wedge [ Wedge@kilobox.net ] are fine too, but I suggest you use spaces within the brackets, in case people wish to copy n paste the email address instead of click it.
Many people prefer to see email addresses in lowercase. At work, on our intranet, that’s what we do. Web addresses might care about upper and lowercase letters, but email addresses don’t. So KraZY.H4KOR@KiddieScript.com is fine, if you like that kinda thing. Capitalising names as per normal seems acceptable to me though :)
These three ways may seem incredibly obvious to you, so let me show you what not to do. This horrid, inconsistent, unusable, inaccessible method was the inspiration for this best practice article.
Worst Practice Example
- When Wedge first hears from you, he’ll respond directly.
What does that look like? It looks just like any other link anywhere; it looks just like those links to my ‘Contact’ page that I showed you above. Except it isn’t. If you click it, your email application will launch and you’ll be taken away from this page. If you expected my Profile Page or ‘Contact’ page, this would unexpectedly interupt your focus.
Yes, as said before, experienced people might hover over links before choosing to click them (try it more often, you learn about your destination…) but I’m saying that if we can’t tell what will happen at a glance when we click a link, then we’ve broken the usability of our page and damages the surfer’s experience.
I am ambivalent about these next examples, I just don’t know if they’re truly useful.
- Please email me on Wedge@kilobox.net for more.
- Email me on Wedge @ kilobox.net (or Wedge [at] kilobox . net etc. etc.)
- Please contact Wedge [email] to discuss your needs.
See, in the first example, the full email address is there, but it’s not clickable. Do you like this? Is it a waste of the web’s technology?
And in the second example (thanks Jon) the email address forces people to put the pieces together; this is done to avoid spambots and malicious harvesting of addresses, but it’s not great for usability is it?
The third one is, um, somewhat useful perhaps. My name is still linked to my ‘Contact’ page, but the email address is only clickable – you can click it to send an email (using the appropriate application which should then launch) but you can’t see what my email address is. (Experienced people will know that you can hover over a link to discover its contents, but we’re not assuming such levels of knowledge.)
I have moved this example into ‘unsure’ as it can’t be a best practice, as Jules points out in the comments. Maybe it’s a ‘worst practice’ example. I won’t use this method because I agree with Jules’ points about needing to know the email address, while using someone else’s computer. Yes, you can hover or right-click to discover more about the address, but that takes expertise, and we should be providing information simply and directly, so people know the details at a glance without effort.
One thing to note, when publishing on the WWW, presenting the [email] address in a hyperlink like so does not protect that address from spambot address harvesters! The address is clearly in the code, and harvesters read the code!
(‘Harvesting’ is when computer software (bots) goes out across the web and searchs for email addresses. They save them and give them to their evil masters, who then sell your details to spammers.)
There are some methods to obfuscate your email address, but these methods usually rely on javacript and clever coding. Such methods can damage the accessibility of the email address for some surfers – the very people you want to have your address!
The web as it was intended to be
Hyperlinks were designed to link hypermedia and literally build the web link by link – in other words, people expect links to take them to web pages. If we decide that we know best, and start putting Word documents and email addresses into links without letting people know (at a glance) that we have done so, then we break the usability and damage people’s experience. Please respect your surfer’s expectations, and design with their ease in mind.
- Read more about how to present Word and PDF files online (I wrote this in 2005, wish I had included icons)
I would like to thank the Twitter people who discussed presenting emails with me yesterday: @seanrnicholson @lindabeth @angiewarhol @dwarp09 and the wonderful @ChristySeason
If you would like to share or tweet this article, the Short URL is: http://kilobox.net/1034
Good stuff! The thing that bothers me though is spam. When I used ExpressionEngine it was quite easy to keep the spam harvesters away but it’s not so easy with WP. I’ve just installed a contact form plugin that seems to have made things a bit easier.
I don’t like the jon at jontusmedia dot com approach of spelling things out. Users want to click and go.
What’s your take on contact forms ?
Best wishes, Jon
It would seem I’ve been guilty of ‘worst practice’ for both FirstSigns and Original Erasers in the past! This is something I will certainly address in future, so thank you for such helpful guidance.
I would like to say that of the three correct ways to present email addresses, I’m not keen on the second one. I think it’s important to be able to see the whole email address. My email pop-up thing doesn’t work properly and so email links are useless to me – I need to be able to see and copy the actual address into my own email system. I’m sure this could also be a problem for people who aren’t using their own computers. Just a thought :)
Thanks for those tips. It’s good to have real-world examples of use-cases, so I’ll update my article right now, thank you both.
Nice job! The only other practice that I would add to the “unsure” but still effective category would be links within a sentence that may not display the email address, but clearly indicate that by cliking the link, the user will be sending an email.
The example would be “You can Email Wedge to request a quote.” and adding the email hyperlink to the words “Email Wedge”. By doing this, the user understands that they hyperlink allows them to email you, yet your actual email address isn’t exposed in text.
that’s a variant example for sure, and while it shows (to the observant) that it’s gonna be an email link, I think it falls short of best practice (unsure, as you suggested) because of Jules’ comment above.
Jules reminds us that people don’t always work on their ‘own’ computer and may want to know or record the email address – so if we don’t show the address, we don’t help those people. (And hovering and right-clicking to discover the address is an advanced step.)
Thanks for stopping by.
It’s a sad reality that we have to consider spam grabbers in this best practices discussion. I’ll have to think about a solution for that.
Spam aside, I still think it’s best to spell out and link the email address in full. (Your example #2.)
My biggest pet peeve is when I’m using my home PC. I HATE email links that do not display the full email address. Because when I click it, it launches Outlook Express. And I don’t USE Outlook Express at home–I use web-based email. So it wastes my time launching a program that I haven’t set up and don’t use–all just to get to the email address. I’d prefer copy and pasting it to my web-based email program.
That’s a good tip about hovering over the link to see what hides behind it, though. I’ll try that in the future. Maybe it will cut down some of my email address link rage! :)
P.S. Not sure what I think about your style decision to eliminate periods after email or web links that end a sentence. I understand your reasoning, but it sort of makes my stomach turn. But, it could be an acquired taste!