Category Archives: Usability

The Tag Line Is Not Enough

Posted on by
Reply

Are your users understanding what your website is for? Tag lines, short sentences placed very closed to a website’s logo, are usually in charge of telling users in a very fast way what they can do in the website they are currently visiting. I explain here why the already standard tag line is not enough.




Wikipedia Logo with Tag Line“The Free Encyclopedia” is Wikipedia’s tag line.




User test results

I was recently testing my client’s website, Testfieber, a German company putting together product expert reviews. They have a good tag line, quite clear: “The big directory for expert reviews.” That’s what they do and users were getting the idea fast.

The problem was that users where not understanding the value of a big expert review directory, they were not understanding that the website was processing a lot of information in the background to get the best independent product reviews.




Testfieber Logo and Tag Line

“The big directory for expert reviews.”




Communicating value

To educate new users about the value of the website we took several actions. The most important one was to place the link “How does it work?” in many pages across the website, specially in top landing ones. We didn’t want to overwhelm users by putting a lot of information, so we used an overflow pop-up that would immediately disappear as soon as the user takes the mouse away from the link.




Explaining the valueAn overflow pop-up to quickly communicate the value of Testfieber




Understanding users’ information needs

Testfieber users are people looking for serious product reviews and for many of them it is really important to clearly know how the website recommends the best products. For them it was necessary to place a “learn more” link in the pop-up to take them to another page containing much more information about the algorithm.

To check

Is it very important to check that users quickly understand what they can do in the website but also the value they get from it.

 

Related read: The Benefits of Mixing Branding and Usability in a Design

Improving the User Experience (and conversion rate) with Heat Maps

Posted on by
4

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.



Homepage Heat Map



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”.)



Picture Heat Map



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.



Email Heat Map




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.

Graphical and Physical Keypads

Posted on by
1

What can go wrong with a keypad design? Not much, we could think. Actually there are several things to make the interface easier to use (or usable at all!). Let’s see some examples.

google_voice_mobile_keypad_interface

Google Voice interface. Image from funkyspacemonkey.com

It’s difficult to imagine a keypad interface clearer than the one of Google Voice for iPhone. Everything is in the right place, there are no possibilities for confusion.

android_keypad

The Android interface. Picture by xda-developers.com

The Android keypad is not bad, but I’m a little bit skeptical about the lack of separation among the number columns and about the fact that buttons don’t look like buttons. Still, I think it might work pretty well most of the time.

windows_mobile_keypad

Windows Mobile keypad interface. Picture by extremeppc.com

The Windows Mobile keypad interface could be a little bit confusing, I don’t like the fact that numbers are located on the right side of the buttons (instead of being in the center). Some people, specially the ones with big fingers, might accidentally press on the wrong button if they try to tap on the number and not in the center of the button. This configuration could also be a little bit disturbing for the users’ eye, humans tend naturally to look for symmetric signs and this buttons lack of that harmony.

keypad_bad_design

Door keypad in Starbucks. Picture by Alexis Brion.

The last example is coming from the physical, real, world, not from a software interface. This is the keypad to unlock the toilet door at the Starbucks located in the Düsseldorf central station. I was sitting close to it and I couldn’t help watching the clients fail several times when trying to enter the code. Numbers are not located on the buttons, they are below them. Users were confusing labels: which is the number 5 button?