As there haven't been any posts in the usability category of YOUmoz since March, I thought I write a short usability entry. You SEOs out there certainly know how a link should look like for search engines. But do you also know how they should look like for real people, I mean the ones visiting your page and spending money on your products?
1. Links online
Links have been changing over the years. In the beginning all links were underlined, blue and, let's face it, quite ugly. Nowadays links generally look better. They have different colours, nice hover effect,s and some of them even provide previews of the target page. But did you know that those ugly links still work best when it comes to link perception? Studies proved that underlined blue links still work better than any other colour. In order to be not too theoretical, here are some examples:
1.1. Content that looks like links
In the above pic, the labels (e.g., "Location") have the same font and look exactly the same as the links on the left side. To be sure what's clickable and what's not, you have to point the cursor on the text. That's additional work you force a user to do. Why not avoid it by strictly underlining each link? Or a common colour for the links? In the above screenshot, there are way too many different links. They are:
- white and dark-blue (in the top navigation)
- black (in the side navigation)
- grey (in the content, e.g., "spielen")
- orange (on the top right)
1.2. Links that look like ads
When first visiting the above page, I accidentally clicked on one of the links in the left column as I took them for content links, but they're in fact Google ads. I consider such attempts to fool the user as insults and so my first visit ended up being my last visit to the website.
1.3. Links that look like links
The ease of use of Amazon is definitely one of their major pros. Just take a look at the links. Each underlined word actually is a link (and they're blue too).
Conclusion #1:
Links should be
- ... recognisable without having to point on them
- ... underlined
- ... blue if you want to be sure
- ... equipped with an appropriate anchor text (no "here" or "click here")
- ... easily distinguishable from ads
2. Links in real life
Since a major point in my thesis was usability, I got accustomed to notice usability flaws even in real life. I recently came across a fake link, or, rather, a command link or button, when calling the elevator in a shopping mall in Innsbruck/Austria. Look at the pic below and tell me where you would have pushed first:
The majority of people I observed calling the elevator (well I didn't look at more than ten people so as not to get framed for voyeurism :-)) pressed one of the "buttons" next to the big A, B, C and D, which actually aren't buttons. They're just visual assistance for knowing which elevator just arrived. But aren't such blinking lights supposed to be above the elevator door?
Again, that's additional work you force the user to do. If there was just one button "call elevator," there couldn't be any misunderstandings ... by the way, the real buttons were the tiny round ones at the bottom of the plate.
Conclusion #2:
If you ever have to design buttons for elevators, make them look like buttons :-)
Hope you enjoyed my short usability post. If you did, please tell me as I'd love to do some more in the future. I already have some online and offline flaws prepared :-)
This is why in the US, when you go to use the magic up and downy box, I mean the "lift" you only get an arrow pointing up or an arrow pointing down.
Simple is always the way to go.
I recently was doing my preliminary work on a new client and found they had over 500 pages on their site that had NO links to them at all. They were just in the habit of adding a page and changing one of their four main links to go to the new page while just abandoning the old! No sitemap, no archive, nothing.
That's why my hair looks this way!
Nice post. I vote you keep it up.
Yes please! The KISS principle applies globally! Elevators, websites, microwaves (anyone seen the ones where you need to press more than the amount of time needed and "Start" to get the thing to work? grr).
Simple, clean, elegant, and functional.
This is probably a pretty grey hat thing to say, but there are times when I would rather the user not notice my links. It would actually worsen the user experience if they followed those links, but I need them to be there in certain circumstances. Getting a new domain indexed without "submitting it to all 1000 major search engines", for example.
This reminds me of a friend's true story: the guy was Brazilian, for the first time in Europe and with no understanding of any other language apart from English and Portuguese. So he comes to Europe for a tour of several European countries; for most of the trip, he finds his way around, no problems.
And then he goes to Poland. And in a pub, for whatever reason, the bathroom doors did not have the usual "Ladies" and "Gents" on the door, not even the little guy and girl. No. These bathroom doors sport a blue triangle and a red circle.
He tries really hard to figure out which is which; no luck. He speaks no Polish so he can't ask anybody. So he's forced to pace up and downfor 20 minutes or so until someone came out of one of the respective bathrooms.
Now don't ask me which was which, I can't remember. But to me, this was stupid to the extreme.
Mind you, I've seen a much better version: Saatchi and Saatchi in Sydney have very funky bathrooms: the girls' one has a brain on the door, where the circumvolutions are formed of words such as "shopping", "shoes" - you get the picture. The guys' brain is full of "rugby", "beer", and in a tiny corner "take out the garbage". Brilliant!
OK< very long comment. Stopping now.
Nice story :-) I got a similar one from my first weeks in spain:
In German speaking countries it's usually "F" (Frauen) for ladies and "M" (Männer) for gents on the doors.
In spain however it's "M" (Mujeres) for ladies and "H" (Hombres) for gents. And now guess which door I took the first time ;-)
LOL, did you get dragged to the police or just thrown out of the pub?
lol
I too have done that.
Its actually even more complicated cos they also use things like cabellero etc.
Regarding the userbility a lot of it is common sense and keeping the links distingishable and consistant.
:-)
We were at a brewery in Eugene and the bathrooms were labeled "Hops" and "Barley." Nobody knew which was which, and Scott guessed wrong and walked into the ladies room. The waiter explained that "Barley" is the ladies room because barley is sweet. Jeez, talk about obscure...
Great post, and whilst usability doesn't always reflect on SEO, it bloody well should, because if search engines want us "to build sites for people, not search engines" then clarity of links is fundamentily important.
I have found that placing links in positions consistently seen across "most" websites also helps, i.e. left hand navigation, or horizontal navigation. People have become accustomed to understanding these forms of navigation, it has become hardwired in their brains - so why create yourself a problem?
As you pointed out above, you clicked on what you thought was a left hand nav, only to find it being a google link - that IMO should be a reason to ban the site from indexing, it is blatantly abusing peoples understanding of website design to cheat money through adsense?
At times you have to balance creativity vs usability, however I always try to ensure that your navigation link, resembles something that should be clicked, and ultimately, any links within text SHOULD always be underlined! And then of course you need to also consider accessibility...
Cheers :)
Certainly right. You mentioned accessibility: it's always interesting to view your site in a text-based browser such as lynx. Then you can be ... well almost ... sure that it's also accessible for screenreaders. Try it out for yourself, it's quite funny :-)
But to consider your site as 100% accessible your site should have Level Triple-A Conformance. I happened to have a look at those guidelines, and they're quite hard to apply on your site. E.g. you should provide texts for each audio or video file you have on your site ... and now think about all the mashups using youtube videos :-)
1.2 Doesn't it say "Google Ads" there? So how can they be confused with content???
As one reads from top to bottom and scan for orange links to navigate - you never get so far to see "google ads" and - the same colour was obviously taken to fool the user.
Good point Michael, I didn't think about that. I tried to look as if I was visiting for the first time and yeah, I can now get what you were saying.
Sorry for the self promotion folks, but as it happens I did write a fairly extensive article on the applications of UI principles in web design.
Iif anybody is interested in such things, it may be useful. Again, sorry for the shameless self-promo, but it's on topic :)
Nice post! Thanks for the info!
Really enjoyed the elevator example. I have never thought about the physical appearance of links offline. Well played.
I have to say that clicking on google ads accidentally because they are styled the same, really annoys me, and will usually put me off a site straight away
Michael, quite often good usability is good seo! I agree with Moleskin that if SEs want us to build and write website for the users instead of for the robots, usability principles should be reinforced and adopted as mandatory practice instead of just as something to be observed.
I bet Steve Krug would have had a heart attack in that elevator as per his 'dont make me think' motto.
yeah, the known usability gurus must get upset quite often in real life cause they certainly live usability in real life more than I do ... and even I get upset quite often. Got some nice real life flaws (car radios, cash dispensers, DVD-Drives, ...) prepared for the next post. But I have to find some more SEO and web connections first :-)
Fun read. What a comparison.
Michael,
Great post. I am a real evangelist for usability. What good is getting people to the site if they leave just because they can't figure out what to do next?
Lovely post - definitely write some more :)
I have a constant battle with my design team (they only hate me because they know I'm right... or at least I hope that's the case).
I'm constantly pushing them to make sure navigation looks like navigation (or as you say links should look like links).
I guess it is hard when you've created something though - of course as a designer you know what your intention is, and just can't see that what you've created isn't necessarily the most user-friendly.
It's definitely worth the effort though, we've seen dramatically improved conversion rates when we've simplified site's navigation.
I had a same experience with faulty elevator GUI!
It had 2 sets of identical 'buttons'. One set with words Up and Down, and one set with arrows. One up arrow, one down arrow. Worst thing yet: it was one of those buttons that just you have to tap in order to make them work, so trial and error was the only solution to find out the 'live' set of buttons.
Way to go elevator designers!
What was that engineer smoking?!
the engineer was cloaking the "E" floor. hehe
Being reminded of the fundamentals is always a good thing. I get dazzled by design changes and ultimately remember that sticking to the fundamental blue/underline may be the best thing.
Thanks for the post.
nice post and it was real fun reading the comments ;)
Thanks, I hope however the content's more informative than the comments are ;-)
I like this post, Great ,The example is very interesting
I agree, great post! It's always good to be reminded of basic usability. Reminds me of the great lessons taught in "Don't Make Me Think" by Steve Krug.
There is a reason "best practices" and "conventions" exist.
yes that's quite a good read, I'd also recommend Don Norman's "the design of everyday things" as starter-drug for usability :-) and of course books of usability-god nielsen.
you're damn right with "best practices" and "conventions" but try to tell a designer that his shiny, new, flashy navigation sucks because it doesn't look like a "normal" navigation. If you find a designer who designs with usability in mind keep him ... if he also designs with the developers in mind who have to translate his design to html and css -> marry him ... well hopefully 'her' ;-)
Why would an underlined blue link work better than other links?
That was always the way links displayed without any formatting being added. The classic link.
A terrible elevator design for sure. I think this is a very useful article. I actually was doing internal linking yesterday. Thanks for the info.
I have pushed so many ineffective buttons in real life, not to mention links.
Taking another example from elevators, I believe that links should always have a defined a:hover. It doesn't have to be anything dramatic---changing a couple shades, removing the underline, it's all good. Or transform the mouse.
The IRL "hover" problem is at one of my workplaces, where the lights don't respond to let you know that the elevator system knows you just called it. So you press the button and then (because the elevators are chronically slow and there are a lot of floors involved) wait around and wonder. I observe most fellow staffers (it's a hospital) push the up or down buttons 3 or 4 times as soon as they get there. Just to be sure. Patients push it once, look confused, push it again, and possibly wander off or just keeping pressing it periodically until the elevator shows up.
I agree with the hover thing. And people also got accostumed to the behaviour that not only the cursor changes but also the link somehow. But again, it's also possible to mess that one up. E.g. when you make links just bold and underline them "on hover" which is too late as they can't recognise it without hovering over and you force them to do extra work, but I'm repeating myself :-)
Thanks for making me think Michael. I always make my links look like links and maybe go a little too overboard (like putting "click here" above a picture link). I'm working on a website for a cafe with food pictures pointing to the menus.
I have, on several occasions, got slightly irritated at some sites for either making google ads look like content, or making links so hard to see, you need to mouse over the whole slab of content to find it.
Nice post.
This is a great post that relates very well with how we interact daily with the things around us. You have made a very great connection here by referencing the elevator. Keep up the great posts - it was a nice read and a refresher (I miss the blue links)!
Kudos for this one: well thought out and made me go back to a few of my projects and rething the link structure/placement. Excellent article all around.
Actually a very interesting post, I thought this week might be very quiet on the blog. I really need to go over my own site for usability. One thing I wanted to get clarified or some opinions on was your comment not to use "click here" type links. Why not, when it's appropriate? Usability and SEO need to work together, once you get your customers via your seo efforts you need them to do what the site was designed for. Interesting post from copyblogger a while ago on the topic of "click here" links. https://www.copyblogger.com/click-here/
Edit: I guess I answered my own question, or Brian Clark did in the comments of that blog entry. Want someone to specifically click on something? Use "Click here", general navigation, use description text.
From my point of view, "click here" links should be avoided due to the users' behaviour reading websites. In fact they just don't. They scan the text for keywords. And a link is a pretty good keyword. So they mostly see the links in a text, especially if there's a lot of text to be read. So you basically force them to reread a passage they already scanned if they come across a 'click here' link.
But apart from that it's just better writing style too, isnt it? E.g.
"Liverpool beat Manchester United, see more in our Premier League Results"
"Liverpool beat Manchester United, for more Premier League Results click here."
And, of course, if the users miss a keyword while scanning they may navigate to a page they don't want. From the above example imagine a user scans the text like that "Liverpool blabla Manchester blabla click here" -> the user expects a match report or something however "Liverpool blabla Manchester blabla Premier League Results" -> they know what they get when clicking on the link without having to reread the sentence
Nice post..
I love to blend my google ads to match my css because I want the site to look nice and ads remain in sink with the rest. I hope everyone here forgetting about the confused clicks are not going to convert and leading to lower ecpm in future. I guess blending is good but don't deceive the ads like placing close to image, navigation, etc. If you keep the ads in a separate box in total then there is less chances that someone will be confused. Still this is in a marginal window and you can call it to be gray but I guess i will not prefer my css and ads style remain totally different.
As an architect (of buildings, not programs) and as the World's Bestest SEO, I found your elevator example to be very interesting.
Now I don't design elevators and as, sly-grrr pointed out, elevators in the U.S. have very specific design guidlines (standards compliance?) for ADA accessibility. But its easy to see how function/usability is important.
Now I want to write a whole post about this elevator design. Michael, you must tell me more about it and provide me with additional pictures.
Tim , I agree totally. Not every link is meant to be clicked by a user.
I don't think what you're advocating is grey hat at all. It's just good usability. If the link that will move a user through the funnel or help them find their goal is blue and underlined, good. If you can build additional quality links from the same page, but make them less obvious- and dare I say distracting- to a user, also good.
Great post. Especially since it's very good to point out the difference between ad links and other links on a site.
I love how the light in the elevator is blue.