RSS Feed

Improving websites and the way you build them

Twitter < < Back to home page

Episode 3 :: 5 common usability mistakes that frustrate users

  1. No Home button
  2. Hiding live email addresses
  3. Call to action
  4. Underlining links
  5. Break up long text areas

1.)No Home button

Home buttons are required on websites as backup. When a user struggles to find what they want or get lost within the site, they will start again and revert to the home page to start their journey again. A home button is an extremely important part of the site.

2.)No live email addresses

A live email address is a mailto a href link, when the user clicks upon it, it will open up their default email client and allow them to send an email directly. Web users try and hide them for one main reason – to prevent spam The first method to hide them is using characters such as my[dot]name[at]mydomain[dot]com. To every day computer users such as ourselves we would have no problem converting this into a workable email address. However to an every day web user they may well become confused with this method. Its also very error prone and just not a reliable way of hiding a live email address. The second method is to use just a web form and no email address. There are a few problems and differences between a web form and sending an email direct.

  • Users feel a lot more comfortable and confident using email : they are used to using it
  • Users can't send attachments, some exceptions.
  • They have a receipt of communication
  • Users don't really care if you get spammed, they came to the site to complete a task

Does this mean to ignore web forms? Absolutely not, the best solution is to give the user to choice of a web form and an email address they can click on and send an email direct. Its all about thinking putting your users first and giving them the easiest ways to contact you.

Solution: Use a live email address

3.)No call to action:

Every page on a site should have a clear call to action. In the main content area there should be a link that follows it giving the user a specific thing to do. The call to action can be a number of things including:

  • Buy a specific product
  • More information, testimonial page
  • Read related blog article
  • A video
  • A special offer
  • A contact us page

4.)Underline links

Theres a convention on the web that underlined text is a link and it should be followed. Certainly, in most cases and in particular links with content such as paragraphs. This allows the link to stand out and shout “Hey, im a link, click me”. Without a link its not apparent that the link is actually a link.

Few extra details about underlined links:

  • Not all links need to be underlined. For instance navigation links are not always required to be underlined. Navigation areas are normally detached from the rest of the site by white space or colour for instance. Since its then clear that its navigation users are not expecting the links in that section to be underlined.
  • Using the CSS property border-bottom is a better method than text-decoration:underline for underlining links. It gives more space and doesnt cut of characters such as “p's”, “g's” and “y's”
  • More traditional usability experts suggest that links should always be blue, but its going too far in my opinion. Blue may not fit in with the brand colours or the design. If you can make the links blue and its in, then do so but its not something to follow in every situation.

5.)Break up long text areas

Users on the web scan generally content rather than read word for word. Its a matter of time, the user has come on the site to complete a particular task. They don't have time to read every last word on your site. Therefore breaking up large text areas makes their job of finding specific content easier. There are 3 things you can do to make the content more scan-able.

  • Use of headings preceding paragraphs or blocks of text. By doing this allows the user to pick out specific key words and information they are after. They can then read the following information for more detailed information.
  • Using lists breaks up content into much more readable content.
  • Steve Krug famously says in his book, Dont make me think. “ Reduce half of the content, then reduce by half again” Removing content makes the content remaining to stand out more and have more impact.

Comments

1
Nathan McGinley 30th May 10
Hello, Just thought I would let you know after this common usability mistakes episode I have realised you have no way of letting the user (me) email you on your website. And another thing could you add RSS feed on your site! Cheers.
2
Adam Bezulski 31st May 10
The shoemaker’s son always goes barefoot. You have no e-mail address on your website, hyperlinks use underline istead of border-bottom wink +1 for the layout - I like the colours and simplicity. Cheers, Adam
3
Honshi 2nd June 10
Interesting video. I find the hyperlink underline tip pretty interesting. Btw your textarea has some minor positioning issue. Love the design of the site though! Cheers, HS
4
Honshi 2nd June 10
Forgot to mention this, I'm using Firefox 3.6.3 for Mac.
5
Malika Butler 2nd June 10
Thanks for posting this, I try and learn a bit more about design everyday and Episode 3 was definitely my ticket. I didn't know that you could use border-bottom for text links before watching this. I'm also someone who thought the logo should be the home button as well, so this was a nice wake up call. I really enjoyed watching this, please continue to make more videos. Sincerely, Malika Butler
6
Ricardo 2nd June 10
Very interesting too. You might want to cut on the length a bit, very little people have the time or patience to stare at a video on the web for 10 minutes - unless it's a TED Talk smile
7
Milos 2nd June 10
Excellent videos. Nice idea for hyperlink underline.
8
Paul 2nd June 10
Just thought I'd mention, I cant view any of the videos in FF, Chrome or IE8. You have the following errors on the page: Error: The stylesheet http://www.usable-efficiency.com/css/print.css was not loaded because its MIME type, "text/html", is not "text/css". Source File: http://www.usable-efficiency.com/ Line: 0 Error: syntax error Source File: http://www.usable-efficiency.com/js/dimensions.js Line: 1 Source Code: <!DOCTYPE html> Error: $(name).css("top") is undefined Source File: http://www.usable-efficiency.com/js/config.js Line: 121
9
Justin 2nd June 10
Just a quick note on fixing a few things on the site. 1. RSS - feed button on the lower right hand side of your site is only visible for a short period of time before it slides down below the fold, adding to the scroll bar. When scrolling down the same thing happens over and over. 2. Commnets - Find it difficult to read in two column list, go back to a standard single column. 3. Positioning for the text box. The content in this box sits a few pixels outside the top of the box. This is using Firefox 3.6.3 on Mac OS X 10.5
10
Sheetal 2nd June 10
You don't work in Chrome! Are you really improving websites and the way you build them?
11
Handrus 2nd June 10
Same other people already said... great tips, but video is too long, your comment form is missalligned in FF 3.06. The feed button only shows when I focus on you form (??) and if I scroll the page it misses... Also the background of your text boxes are repeating in the top of comment form as well. BTW the content is king, and yours is good! Please keep posting, I will keep reading wink
12
Grant 2nd June 10
You have a great little video series developing here. Concepts and points are explained well with supporting evidence, I will hopefully be pointing some of my users towards your site! Thanks!
13
Mike 3rd June 10
Good bits of info there - guess I need to go underline some links. I've heard the bit about he blue links before. I agree that it may not be desired in all cases, especially when taking design elements into account, but other resources do say underlined blue links get clicked the most. BTW - works in Chrome for me.
14
Norke 1st July 10
I'm not totally agree with the live email links. My site, gets 45,000 visitors every day, if i put an email link, it's too dificult to get an effective response to every one, plus, i going to receive another thousand of spam messages. That it's bad for me and the users. So the real solution for me it's to develop an effective message form. Asking the correct fields and responding fast to every message in order to establish a personal communication, so the user can attach files, get my number etc. In my opinion, the solution can be depending on the information you want to get from your users or the service you want to offer on the website.
15
CB 16th November 10
I like what you're doing here. Keep up the good work.
16
mdinis 6th December 10
I just sorry I didn't find out about you guys earlier! This is great! Little details that all web professionals should be reminded now and then! Great work! Congrats! I'll keep an eye on your tweets!
17
dui lawyer in boston 27th January 11
I am always annoyed by sites that do not a link to the home page. I know I can click back, but do I really want to do that? Most of the time I do not. I hope a lot of web designers heed your advice.
18
miniq 7th March 11
Something you might want to watch though, is that people might not notice your links if they are missing the underline. It's fine to use them in a navigation bar, because people will expect everything there to be a link, but in your main text, I would advise you keep the underline. If your link colours are unmistakable you should get away with it.
19
Dane 28th January 12
Great stuff look forward to more. Found it informative.

Leave a comment

" What you do not want to happen to you, do not do it yourself either "Sextus the Pythagorean