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 :-)