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)
If you would like to share or tweet this article, the Short URL is: http://kilobox.net/1034