Factors That Affect Usability

Dec 15 2009 by James Costa | 18 Comments

If trending topics surrounding design blogs are any reflection of trends in design, then usability is what coffee is to freelancers. Usability is a study of human-computer interaction that helps designers analyze our users’ patterns as they use our creations. While we cannot fully predict our users’ interactions, we are able to brace for them through how we style and place elements on our page.

Factors That Affect Usability

We are able to study these different patterns through our analysis of usability tests. Both qualitative ("word-based") and quantitative ("number-based") tests reveal to us that while users are concerned about design elements, they also want to get what they’re looking for quick. The more mistakes we let them make in the process, the more frustrated they get and less time they spend on our website. As designers, we need to figure out what makes people stay on our websites, and more importantly, what makes people leave.

Usability is a lot more than just using grid systems and focusing on what’s above the fold – there are sets of factors that play into how users will interact with websites, and today we’re here to analyze them and find out ways we can improve.

Page load time

Page load time

As one of the gurus of usability, Jakob Neilson, said in an interview, there are three rules for response times based on common human characteristics: "If it is faster than one tenth of a second, you don’t feel like you are waiting at all. If it is more than one tenth of a second, you can tell you are waiting, but up to one second, it still feels like smooth navigation. Between one and ten seconds is the limit for your attention."

Web development has changed a lot even within the last ten years. There are more and more methods for us to cut down on page load times even for slower internet connections. Through using sprites, optimizing our images for the web, and reducing the amount of HTTP requests, we can greatly reduce our page load times and aim closer to that one-second mark.

Resources:

Don’t judge a book by its cover…

Don't judge a book by its cover...

… doesn’t apply to web users. If anything, what’s above the fold of a website will greatly dictate whether a user ventures further. While it’s proven that users are comfortable with scrolling down through pages to find out more about them (even long pages), make sure you cut off elements to remind them that there is more to see.
Be clear with the purpose of your website, not only in your design, but also in your content. In fact, use Krug’s third law of usability and cut your content in half, then do it again. Make sure your words are just as powerful as your design.

Resources:

Give users what they expect

While predictable isn’t always what we want to be for ourselves, being unpredictable in design doesn’t often work to our advantage. Stay conscious of where elements are usually placed on pages (search bar top-right hand corner of the page, branding at the top-left of the page, etc.), and try to keep elements in those places. Play on what your clients know, and don’t make them play a guessing game.

Following the norm in icon design is also useful for our users. They want to see the same symbols so they know what each one does. Printers, mail envelopes, and phones have expected results. Don’t give users what they don’t expect.

Resources:

Don’t sacrifice web accessibility

While usability and accessibility are two completely different topics, they often fall hand-in-hand with one another. While we make websites usable for the everyday user, accessibility is making it usable for users that aren’t able to interact with web pages like everyone else does.

Some ways you can adhere to accessibility guidelines are through grammar and spell-checking your content, ensuring that this same content makes as much sense being read off the screen as it does being read back to you, not using deprecated tags in your markup, using relative font sizes, and using ALT tags.

Most of the time, when you’re creating accessible websites and following these tips, you’ll also be improving the usability of your website.

Resources:

Navigation

Navigation is one factor of web design where we can never fully anticipate our users’ reactions. A/B split testing and "Card Shuffle" testing can be very effective ways of analyzing our users’ behaviors and the paths they take to find what they’re looking for. In practice, we should aim to reduce redundancy in our links, create permalinks that are understandable and self-explanatory.

Another vital part to navigating through a website is a search function. If you have a search, make sure it works properly. Some sites have a "Quick Link" button now that works much like Google’s "Feeling Lucky" button, which can be very useful.

Resources:

Type, Type, Type

Give them what they expect

Typography is another growing trend in design. While, of course, type has been along as far back as existence, there has been a lot of focus put on typography and what makes it readable lately. We need to make sure we set focus on some basic typographic elements such as line-heights, letter spacing, and (relative) font-sizes.

While having cool funky fonts is nice, we need to make sure that they’re legible more than anything else. This includes paying close attention to colors as well.

We should already know how certain colors (and combinations of them) can attract certain feelings and emotions, however we need to make sure that these colors not only convey the emotions we want, but also make the font readable against what’s behind it.

Using font styles can also be useful in making users interested in reading content. Bolding and italicizing particular key words and phrases can be helpful in catching users’ attentions. Underlining elements should be restricted to links.

Resources:

Rebound from mistakes

As many have said before, the hardest part of our job isn’t designing how something looks when it works, but when designing elements for when they fail miserably. I’m not only talking about when your site has a 404 error, but this also goes for form errors. Make sure that if you made a mistake, you redirect your users to other "safe" places they can go, and if they made a mistake that you show them the problem and tell them how to fix it.

Resources:

Analytics: using it as a tool

Analytics: using it as a tool

There is a saying that as usability experts, we should Test Early, Test Often (T.E.T.O.). Even if we don’t use one of the multitudes of web applications for usability testing, we can analyze the raw data our users produce for us through tools like Google Analytics and Mint. More importantly, we need to pay close attention to a few key functions that these tools produce for us.

First and foremost to effective analytics is understanding your users’ environment (e.g. what browser they’re using, what operating system they’re using, etc.).

Second, pay attention to where your users are coming from. Jakob Nielson states that there are four sources of our users:

  • Low value referrers.
  • Direct links from other sites.
  • Loyal users.
  • Search engines.

We need to analyze all this raw data based on these stats. These different sources will show users interacting with our websites in different, easily distinguishable patterns. While a loyal user will scan through every page and take their time with your website, those referred through search engines will likely be like a one-night stand – once they have what they want, they’ll get the hell out of there. The trick is, of course, to reduce this from happening.

Resources:

Related Content

About the Author

James Costa is the Creative Director at The Phuse. Based in Toronto, Canada, James has been designing and developing for the better part of 10 years and isn’t ready to stop yet. If you like his style, follow his company on Twitter, and read more of his stuff on their blog.

18 Comments

Peter

December 15th, 2009

Nice post! thx for sharing.

Jason

December 15th, 2009

Thanks very much for this – good resource.

Stephen

December 15th, 2009

Thank you, great article.

Jeannie Walters

December 15th, 2009

Nice post. I would stress the point about rebounding from errors more. There are many times users get stuck and leave because they simply don’t know how to back up and fix something. It’s important to try to break the site before the users do!

Paul Story

December 15th, 2009

Great Article. Staying away from mystery meat navigation is always an important one, or pages that may get stranded with no way back to where you started.

I had a client just yesterday when I went over their sitemap and the navigation they wanted that there were two sections that linked off their home page that provided no way to return back to where you came from. Other than clicking on the logo. Their response was “lets put all of those things under a main navigation button that says ‘stuff’.

I of course told them this was a horrible idea.

James Costa

December 15th, 2009

Hey guys! Thanks so much for the great feedback. :-)

@ Jeannie: Definitely agree with you on that one – users have a “back” button on their browser, but don’t expect them to use it when they get lost and get frustrated!

@ Paul: Haha, I know what you mean… I’ve had too many experiences like that where they don’t even want words in their navigation – just images. Definitely creative, but not at all usable!

Jon Crim

December 15th, 2009

Great information and thanks for the additional resource links! The navigation element is very important. If your site visitors cannot find what they are looking for they will simply navigate to another site as quick as they found yours.

Alex

December 15th, 2009

Congrats on the article post, James. :] Tis’ a good one.

Deepu Balan

December 16th, 2009

Really nice article, thanks a lot for sharing this info and the links as well.

-Deepu

Patricia Davidson

December 16th, 2009

Thanks for the great article! Lots of good information and resources.

Askold

December 16th, 2009

Good written and interesting article…

Petrus

December 16th, 2009

Thanx James for your article with good ressources.Very instructive. Great work. Keep going!

Chris McCorkle

December 16th, 2009

I think the content of this post blends a hint of usability and a hint of user experience together… I think many of the points made here address user experience as well as usability: optimizing loading times for example, while important when working on a site’s usability, feel more like an issue that would affect a user’s experience, which then damages the site’s usability.

In my experience, the utilization of “good” usability lies in the navigation: showing users how to browse, where to browse -to-, where they are currently, and how to get back to where they started.

Thank you for the post, James. I’ve added your site’s blog to my list of daily reading… Your site itself is well organized and easy to read. Nice work!

Kudos, too, for linking to Steve Krug’s “3 Rules of Usability.” Major kudos.

James Costa

December 16th, 2009

Thanks for the support, guys! Much appreciated. :)

@ Chris: I totally agree with you! In hindsight, I do often blend usability and user experience together and sometimes forget that they are two beasts in themselves. While they do have overlays, I completely agree that I butchered the use of the word usability at certain points. Thanks for pointing this out, I’ll definitely be sure to watch out for next time. ;)

Thanks for the kudos and for the subscribe!

dani

December 22nd, 2009

I hope hyperlinks are underlined. If they have similiar color with body text, color contrast analyser should be used.

Andrew Johnson

December 25th, 2009

James, thanks for the advices. I’m trying to improve my web site every day – it’s a very hard work really. By the way Merry Christmas and best wishes to all.

Adam

March 26th, 2010

Could have mentioned split and multivariate testing methods as well (as a way of judging the redesigns).

sitear

August 1st, 2011

How i can up speed of loading of my site?
Sorry, i’m bad in english…

Leave a Comment

Subscribe to the comments on this article.