Heat maps can show in which part of a website visitors are clicking, they are a color representation of the amount of clicks. Heat maps could be of great help to improve the user experience of an already working website. To show you how, I would like to present an example.



Understanding the business and users

Guia Munich is a German website for Spanish speaking tourists visiting Munich, offering personalized guided tours. Although many young people visit the website, the real target are older visitors, people willing to pay an extra for a small and customized tour. These groups of users are apparently not that experienced with computers, websites and using the mouse to point. A heat map gave us some interesting insights to improve the website performance.







Changes on the website

The colored boxes on the homepage show the tours available in Munich and Bavaria. Thanks to the heat map, we realized that many users were clicking on the images, hoping to get more information about a particular tour. Unfortunately, in the past these pictures were not clickable, only tour titles were (e.g. “Sur de Baviera”.)







I believe some users were clicking on images and as nothing was happening they were leaving the website. After making the images clickable the time spent on site was 20% longer, pages per visitor went 10% up and the bounce rate improved 8 percentage points.

Another issue I discovered was related to the email address. As it can be seen on the heat map, some people were clicking on it; but the email address was not clickable. After making all the email addresses clickable (and together with the previously mentioned changes) the company got 6% more email requests.

This is just an example on how small changes could make users’ life easier and improve the economic performance of a website.

Links are the most common thing on the internet, that’s what the whole web is about. Although we use them every single day there are a lot of implementation techniques to keep in mind to improve usability.

1. Avoid general links. Instead of "click here" use something like "more information about San Francisco hotels". A link should give clear hints about what it’s gonna be found on the next page. Generic terms confuse users.

2. Include introductory information for related links. Give context to users making the first link in a group fully understandable. For example:

Read this report in English
This report in German
This report in Spanish

3. If the link is an image, provide a text equivalent that describes the message the image transmits. For example, for a link picture include the following "alt" attribute:

<A href="uk_cities.html">
     <IMG src="uk.png"
               alt="See UK cities on the map">
</A>

It is even better if the link works as an image description (example taken from News.com):

4. Providing keyboard shortcuts to important links will help users with problems to use a pointing device like a mouse. Remember that helping the impaired ones is helping everyone, in this case this feature could also help advanced users to save time. Use the accesskey attribute for this.

<A accesskey="E" href="edit.html"
     title="Edit">
         Edit</A>

5. Create a logical tab order through links.

6. Use language familiar to the user for links. For example some countries use "Shopping Cart" instead of "Shopping Basket".

7. Same links across a website should point to the same document. The "Support" link should take to the same page website-wide.

8. Differentiate links with similar names or meaning. For example, you might find "About Us" and "Company Info". In that case leave only one of those.

Linking to external websites gives visitors more information and a better context to understand a topic or news.

"Your website get a better reputation if it provides useful links and information…"

Consider having partner sites that could provide you with some content that you don’t have and offer them in exchange some links. Your website get a better reputation if it provides useful links and information. This is also a usability topic as this will improve service, customer satisfaction and the general user experience.

 


A bad example could be many newspaper websites, they never link to external websites. On the other side, News.com link to many resources around the web. For this reason News.com image is improve and users will likely trust them. Check here other Design vs Art articles about Links.

Links are used to give users more information, details, context. They also are a way to show what is important. They could also be use to drive traffic to other parts of the same website. But abusing could have a negative effect, if your web design has too many links, like this very same article, the effects of linking would be mostly annoying. See here more Design vs Art articles about Links.

Use links, but don’t abuse.

Embedding links into your content encourages users to visit other sections of your website. Placing links into articles also gives more context and value to users.

"A common problem is that users do not understand where the link could go…"

It’s important to pay attention on the way these links are done. A common problem is that users do not understand where the link could go. On the example below, taken from News.com, it’s clear for most users that clicking on "struck licensing agreements" would link to an article about that. On the other hand, clicking on "Imeem", would take the user to the company’s website or to other news about it?

The New York Times goes one step forward making embedded links more understandable, predictable and user friendly. As the user hover over the candidates’ names in this politics article, the link label appears telling users that they would be taken to more articles about that candidate. Using proper link labeling improves usability and avoid confusion. (Mouse arrow is not displayed).

Making links obvious will drive users through your website. It’s very important to make links look like links. Here there is a website example:

The above screen shot was taken from the Azalea Bed & Breakfast website, there you can see three different typography styles, the normal one, bold and brown. Would you tell me which one is a link? The answer is: none! Even worse, real links do not look like real links:

I can imagine users trying to click on the brown or bold words without getting any reaction from the website. This usability topic could be more important than most of the people think, users might wait for the site but if they don’t see that something happens they might think that the site does not work. And they leave.

Try not to play much with colors on your links, if possible, make them blue and underlined.