The Weaker Side of Usability Guidelines

The Far Side by Gary Larson

“The Far Side” – By Gary Larson

The topic of usability is quickly on the rise within the web design community and some designers are still missing out on some of the most valuable usability guidelines. Perhaps they have never heard some of them or maybe they simply do not see the value in them. In either case, usability plays an important role in every website and all of the recommendations, common or not, should be taken into consideration.

Finding a decent list of website usability recommendations is a fairly easy task. A simple Google search can turn up quite a few decent results. Working through the recommendations you find is fairly easy as well. However, to really maximize the potential of your website you need to take it a step further. Dive beneath the hood of your website and take a look at its usability first hand.

Uncommon Usability Recommendations

The usability recommendations outlined within this article you may or may not have heard before. You may not consider them to be uncommon however typically I do not see enough importance placed on them and feel that more times than none they are often quickly over looked. Some of these recommendations are quick and easy fixes while others will require practice and may be implemented over time. What really matters is their importance and the benefit they may bring to your website.

Put the Most Important Information First

Do not be afraid to treat your website like a newspaper. Put the most important content highest on the page. I am not advocating “the fold” rule. By all means users will scroll, “the fold” is dead in many cases. However you do not want to make users scroll all the way to the bottom of a page looking for a phone number or service areas. Determine what the most valued information is and present it at the top of the page.

Make Good Use of a Tagline

A good tagline will support a logo as well as provide a direct insight to what the website is actually about. Summing up a website in a few words is easier said than done, but do so using a statement or motto that truly symbolizes the website. Stay away from marketing jargon and get straight to the valued proposition. A typical website has less than 5 seconds to make an impression on a user before they decide to either stay or leave. A good tagline will let users know what the website is in about 1 second, potentially eliminating the need for users to dig for information.

Slashdot Tagline - News for Nerds. Stuff that Matters.

Slashdot Tagline – News for Nerds. Stuff that Matters.

Be Redundant

Redundancy is good when done in moderation. Keeping the same layout and design from page to page will allow users to quickly navigate a website. Using a similar content template for articles allows users to quickly recognize valued content. Leaving search fields and adding to cart buttons in the same place from one page to another allows users to quickly find what they are looking for as well as make a purchase. Adhere to a standard and stick to it without taking it overboard. Not every product can be accompanied with a video description and not every blog article needs 10 pictures.

Pages Comprehended within 5 Seconds

We can argue about the amount of time it takes a user to decide if a web page is of value or not, but the fact of the matter is it’s not much time at all. 5 seconds might not be the exact figure, but it is not far from it. Users are rocky and quick to pull the trigger on the back button. Entice users, entertain them, and most importantly give them what they want. Do not bore them with walls of text or keyword stuffed content in an attempt to pick up SEO rankings. Do not make your content too wordy so that it takes your viewer longer to find the information they want. Keep your content user friendly, and build your website for the people.

Display Numbers as Numerals

Users are naturally attracted to numbers and figures. They represent the facts and will intrigue users to keep browsing. It is much more beneficial to use “56” over “fifty-six” and “100” produces more curiosity than “One Hundred”.

Digg - Notorious for the popularity of numbers.

Digg – Digg is notorious for the popularity and use of numbers.

Stay on Topic

Your website should not be everything to everyone. Find your niche within the Internet and stick to it. The wider range of topics you choose to cover, the less likely you are to build a following of users. The smaller your niche the more focused your users will be, thus making you more distinguished. Each page within your website should not stand alone and should relate back to other pages in one way or another. Find your calling and stay on topic.

Link Back to Older Pages

As time goes by your website will continue to grow and it is important you do not forget about those older pages. Chances are you will have obtained new users over time and linking back to previous pages or articles will allow them to learn more about your website and your ideas. On top of providing users with additional information it will keep them browsing your website for a longer amount of time. One thing to be aware of, when linking back to older pages, make sure those pages are still relevant in their context and up to date with your standards.

Smashing Magazine - Linking to Older Post

Smashing Magazine – Smashing Magazine does a great job of linking back to older articles within recent post.

Rely on Users Not Numbers

Facts and figures can be a great driving factor behind your website, but are they appropriate? Let users determine the outcome of your website, not numbers. For example, roughly 70% of all online users are using Internet Explorer. Does this mean 70% of users visiting your website are using Internet Explorer? No. Do not get caught up analyzing numbers only to get confused. Rely on user’s specific to your website to guide you in the right direction. Prove it out with users not numbers.

Increase Padding on Links

Originally recommended by Ryan Singer from 37Signals, increasing the padding on links creates a larger clickable area. Increasing the padding on links helps users click on targets they are actually aiming for rather than clicking around a link in hopes of hitting it. Furthermore, with mobile web steadily on the rise a larger hit area makes it easier for users to navigate a website. The concept is easily implemented and will greatly reduce frustration.

Basecamp - Link Padding

Bascamp by 37signals – Increased Padding on Links

Make Form Labels Clickable

Form labels can be clicked to activate the associated form element if coded correctly. This increased functionality can be accomplished within plain HTML by using the “for” attribute on the <label> tag like the following:


      <label for="email">Email</label>
      <input type="text" name="email" id="email" value="Email Address" /> 
	  

Taking the usability a step further, make the cursor turn to a pointer, as it would with any other clickable element, with the following line of CSS:


      label { cursor: pointer; }
      

Use Visited, Hover, and Active Link States

It is not uncommon for websites to use one style for links and another style for the hover link state. For most websites this is a standard practice. However, an area that is often overlooked is the active and visited link states. While these states may not be popular they do add a great amount of usability. The active state will allow users to see that they did in fact click on the correct link they were aiming for. The visited state will reassure the users that they are not revisiting a page that they have previously visited, or perhaps vice versa. It will allow them to quickly find a page they have previously visited for quick access.

CAPTCHAs Lower Conversions

Do you know what CAPTCHA stands for? It stands for Completely Automated Public Turning testing to tell Computers and Humans Apart. The name alone is intense, how are users supposed to figure out how to use it? While it is understandable that CAPTCHA must be required for some websites (primarily security reasons), generally speaking they are over used and are lowering conversions across the board. Often times CAPTCHA is faulty while other times users simply cannot figure then out. Either way, they are frustrating and will quickly drive users away from a website. Avoid them if at all possible.

Ticketmaster - CAPTCHA

Ticketmaster CAPTCHA – What is the first word?

Provide Helpful Error Messages

All to often we come across 404 pages or error messages that give us absolutely no insight to the problem we encountered. Rather than informing the user they have encountered an error try to help them resolve the error, or perhaps let them know why they encountered the error. Maybe they misspelled the URL or incorrectly filled in their phone number. If you are able to help and point them in the right direction you will be sure to see better success amongst your website.

When a user encounters some other form of error, be sure that you’re always addressing the problem with care.

Use Text Rather than Images

You should stay away from using an image where plain text would do just fine, especially with the advancements of CSS3 and new services like Typekit. Plain text is readable by search engines and screen readers, where images and graphics are not. It is understandable that custom fonts, most commonly used as images, may add a level of characterization to a website, however the same effects can be accomplished with CSS3 or by using a service like Typekit. Simply thinking that images all attribute will surpass is not enough.

This is Not a Shortcut to Thinking

Lastly, do not take this list, or any other usability guidelines, as a shortcut to thinking. Every website is different and every website has a different audience. These suggestions are to only get the ball rolling. Do not stop here. Take in all usability considerations and make the very best decisions for your website.

About the Author

Your Name

Shay Howe is a professional web and user interface designer currently living in Chicago, IL. He writes about web design in his own blog over at letscounthedays and would love to hear from you on Twitter.

Write for UX Booth

Contribute to UX Booth
Contribute

Contribute a guest post to UX Booth and let the community know what's important to you!



Comments

  1. Thank you for sharing these article. The examples are great.

  2. Nice article, thank you for some interesting guidelines.
    Two typos (to prove that I read it all): it’s “Turing” test and “alt” attribute. Regards from Europe!

  3. I’m a begginner in webdesign and found this article clear and handy. Thank you.

  4. Wow! Well-written article, and it gave me some things to think about that I hadn’t really paid much attention to (e.g., a:visited and a:active). Often I find these overviews recycle the same old info, but this one was actually useful.

  5. Thank you very much for this article.

    Just one thing about the part ‘rely on users not numbers’. I think this is simply good to check in Google Analytics (if you work on an existing site).

  6. Hahah imagine if Digg wrote out their numbers? “Two thousand seven hundred and eighty two diggs”…Maybe I’ll suggest they do that.

  7. Nice exapmles. I found something new for me

  8. I’ve always meant to check out Typekit. You’ve inspired me to give it a try.

  9. Great post. For me, ensuring users `get it` within 5 seconds (I`ve heard it`s 4!) is paramount.

    Putting the most important information first is a big part of the solution and often requires the most thought.

  10. Based on Jakob Nielsen’s “Power of 10s”, it only takes a user a 10th of a second (.1 second) to decide if your site is good or not. See: http://www.useit.com/alertbox/timeframes.html

  11. Jonathan Chacko January 7, 2010

    Great post and article.
    Adding padding to links and using active, hover, and visited link states are “must haves” in my opinion. Along with increasing usability, they are also so easy to implement too.

    • I agree. I always use active, visited and hover with links, and focus with contact forms.

      Most designers overlook how important usability is, but it affects your website.

      Doing small things like suggested go a long way.

  12. Sorry, but: where is the “weaker side”?

    About the timeframes: it’s arguable. I would like to see a cognitive (or even gestalt) research instead of just Nielsen’s strict behavioral approach.
    Plurality, in research, is a must.

    • Whilst this post is very interesting indeed and valid, you do raise a question here Fabio. I think that the practices mentioned by Shay are positive usability practices. In my opinion, the weak side of usability guidelines is that there are many guidelines which are very often subjective in how they are applied and interpreted. Additionally some guidelines are contradictory and abstract in nature. So, one should always be judgmental as to what guidelines to apply and never stick to one set of guidelines alone.

Related Posts