The Web Design Usability Series is supported by join.me, an easy way to instantly share your screen with anyone. join.me lets you collaborate on-the-fly, put your heads together super-fast and even just show off.
A site’s ease of use, or its usability, is an integral part of its success, especially with websites becoming more and more interactive, complex and packed with features. User-centered design is all about building websites that fulfill the goals and desires of its users, and at the heart of this concept is that a user must be able interact with your website effectively.
Testing usability is an art and a science. There are many times when usability testers rely on qualitative measurements, intuition, opinions and feedback from users and experience. However, there are also factors you can test quantitatively to ensure that a site is usable.
In this post, we’ll discuss six crucial factors that affect usability. For each, you’ll be provided with some tips, tools and ideas on how you can measure these usability factors.
We’ll focus on practical usability testing, so the emphasis is on pragmatic and inexpensive strategies that most site owners can do. These things apply regardless of what type of website (blog, e-store, corporate site, web app, mobile device, etc.) you’re evaluating.
What other tools have you used to test website usability? Let us know in the comments below.
1. User Task Analysis
The most important and obvious thing to test for is whether users are able to accomplish their tasks and goals when they come to your site. Not only that, you have to ensure they’re able to do so in the best and most efficient way possible.
The first thing that must be done is determine what the core user tasks are. For example, in a blog, some critical user tasks are reading blog posts, being able to find older posts and leaving comments.
Perform a task analysis for each task. Evaluate task performance under these considerations:
- Learnability: How easy is it for new users to learn to perform the task? For more complicated tasks, are there sufficient help features such as tutorials, in-line tips and hints, tool tips, etc.?
- Intuitiveness: How obvious and easy is the task to accomplish?
- Efficiency: Are users performing tasks optimally? Are there ways to streamline and reduce the time it takes to complete the task?
- Preciseness: How prone to errors is the task? What are the reasons for any errors? How can we improve the interface to lower errors and unneeded repetition?
- Fault Tolerance: If a user makes a mistake while performing the task, how fast can he recover?
- Memorability: How easy is the task to repeat?
- Affordance: Are interactive elements (such as buttons, links and input text boxes) related to the accomplishment of a task obviously interactive and within convenient reach? Is it evident what the results of a user action will be when the user decides to interact with it by clicking, mouse hovering, etc.?
Evaluating user tasks is a little tricky because many things associated with this are subjective, can vary greatly between different users and require you to create your own criteria for what can be considered a success.
That said, one of the best and easiest ways to perform task analysis is remote user testing. You can test participants regardless of their location, and you save the money related to the logistics of conducting your own user testing studies (booking a location, equipment, searching for participants, etc.).
Check out these remote user testing web apps:
IntuitionHQ allows you to see how users interact with your website and records the duration in which a task is completed.
This app allows you to perform micro-usability tests, including the measurement of task performance. You give participants a task, such as “Click on the link that takes you to the home page of the site,” and it records data related to task accomplishment success and duration, thereby giving you information on learnability and efficiency.
This remote usability testing tool gives you loads of features without the requirement of knowing how to code. It has a nice interface for setting up your tests and offers you excellent reporting features for task analysis.
FiveSecondTest is a quick and easy way to test the learnability, intuitiveness and affordance of user interface elements, such as buttons and links.
Content is at the heart of any type of website. For example, even in web apps — which aren’t typically as content-centric as, say, a blog or web magazine — not being able to read and understand the user interface is a hindrance to one’s ability to perform tasks efficiently and accurately.
Readability hinges on these considerations:
- Ease of Comprehension: Is the content easy to understand and internalize? Are the words being used familiar to the average Internet user or are they too complex and uncommon? Are sentences and paragraphs as concise as possible?
- Legibility: Are fonts big enough? Is there enough contrast between the text and its background?
- Reading Enjoyment: Would users appreciate and enjoy the content? Is the information accurate, of high quality and well-written? Do font characteristics such as size, spacing and color make reading longer passages easy or do they strain the eyes?
Let’s look at some tools that you can use to quickly evaluate how readable your website’s textual content is.
This free tool allows you to input your website’s URL and then subsequently provides you readability scores based on some popular readability evaluation algorithms.
This tool is useful when you’re evaluating readability of website copy before it’s made public on your site. With WordsCount, you can copy and paste your text, and the app will output readability scores.
To evaluate legibility, you can test the contrast of your foreground (text) against its background. With Check My Colours, you simply plug in the URL of the webpage you want to check, and it will test page elements against optimal W3C color contrast algorithms. The higher the contrast, the more likely your text is legible and pleasant to read.
3. Site Navigability
For most sites, it’s imperative that the user be able to move through multiple webpages as easily as possible. Navigability consists of numerous user interface components, such as navigation menus, search boxes, links within the copy of a webpage, sidebar widgets that display recent or top content and so on.
Here are the major considerations for when you’re testing your site’s navigability:
- Information Architecture (IA): How well are webpages categorized and organized? How well are navigational features constructed?
- Findability: Are there sufficient site features such as search boxes, archive pages, links and navigation features that aid in finding relevant webpages?
- Efficiency of Navigation: How fast and in how many actions (number of clicks, how much text, etc.) does it take to get to page of interest?
There are numerous tools available to help you evaluate the usability of your site’s navigation and information architecture. Most evaluations of this nature should be undertaken before the site launches. For example, testing the intuitiveness and accuracy of content categories is a good idea before the website grows bigger because it may be more difficult to change when the site generates more content.
There are numerous methods for testing navigability. Card sorting is an activity where you place content categories on cards and ask participants to place them in groups. This gives you an insight on how to develop your content hierarchies and content relationships, as well as test any existing organizational systems. Tree testing involves generating a list of topics and subcategories and then tests how well and how easy it is to find a category based on the tree.
This tool provides you with the ability to conduct card sorting remotely.
OptimalSort is a robust web app for conducting card sorting activities.
For tree testing, check out Treejack, an easy-to-use web app created by the same folks that developed OptimalSort.
Creating a site map — a list of webpages that a website has or will have — can greatly aid navigability analysis. WriteMaps is a tool that you can use to generate, manage and share your site maps.
PlainFrame gives you the ability to quickly and rapidly test your site navigation. Once you’ve created a sitemap (perhaps as a result of card sorting and tree testing), just input the navigation structure and test it remotely in real time.
Navflow can give you information on how your users move through webpages. It gives you plenty of information, such as path analysis, which allows you to follow how a user gets to certain webpages on the site.
A website should be accessible to everyone, including those of us with disabilities that affect how we experience the web.
When evaluating a website’s accessibility, it’s important to look at it from a universal design point of view. People often mistake web accessibility as being only for those with barriers like blindness or mobility issues. However, we should broaden our view to include anything that might hinder a user accessing your site from a number of browsing situations. This is especially critical with the rapid adoption of mobile devices, tablets, netbooks and web-enabled TVs and gaming consoles. Internet users also have a much wider array of web browsers than ever before: IE, Chrome, Firefox, Safari, Opera and so forth.
All of these options render our work in different ways and present interaction challenges. For example, selecting a link on a touchscreen tablet is completely different from clicking it on a desktop computer.
The general goal of evaluating a site’s web accessibility is how well it deals with these varying circumstances.
Here are considerations to take into account when performing web accessibility analysis:
- Cross-Browser/Cross-Platform Compatibility: Does the site work in as many browsing situations as possible? Is the site responsive, flexibly changing the layout depending on how the user views it?
- Semantic HTML Markup: Especially for those who use assistive technologies like a screen reader, the quality and accuracy of the webpage’s structure is important. Are HTML tags being used correctly?
- Color Choice: Are the colors used high contrast? Do the colors create a hindrance to people will colorblindness or poor vision?
- Use of HTML Accessibility Features: There are HTML features and techniques that aid users with visual impairments. Are these features and techniques being used?
Here are a few tools you can use to quickly identify and resolve web accessibility issues.
This is a suite of tools for evaluating website accessibility. Aside from the Readability Test tool mentioned earlier, there’s a CSS checker for identifying accessibility issues related to the visual layer of a website, an image analyzer for checking your image elements and more.
Vischeck simulates how images and webpages would look to a person who’s colorblind. This can help you identify weaknesses in color selection.
This tool allows you to provide a URL to check for HTML markup issues. It can give you some assurance that your site is coded properly for web accessibility.
WebAnywhere is a web-based screen reader that you can use to see how your site is experienced by people requiring assistive software. It will give you insight on issues related to the HTML structure of your webpages.
Browsershots shows you how your website looks in different browsers. This is helpful in seeing whether your site renders correctly in each of them.
5. Website Speed
One factor of usability that’s not completely evident is the need for a website to be speedy and responsive. In fact, web users deeply care about how fast they’re able to get the information they need. The better performing a website is, the more efficient a user will be when completing his desired tasks.
Here are considerations for evaluating the speed of a website:
- Webpage Response Time: How fast (in units of time, such as milliseconds) does it take to load an entire webpage?
- Webpage Size: How big is the webpage, in terms of file size?
- Code Quality: Does the website use web development best practices for website performance?
Here are some free tools you can use to quickly learn about your website’s performance.
This free, web-based tool is dead-simple to use. All you need to do is plug in your website’s URL, and it will give you a report that displays your website’s response time and webpage size.
6. User Experience
User experience (UX), at its core, tries to study and evaluate how pleasant a website is to use. This factor is largely subjective because it deals with user perception, which can be vastly different from one user to the next.
The way UX can be evaluated is through user feedback. By asking questions of users, you can gain a better understanding of how they feel about the site.
Some considerations when evaluating UX:
- Fulfillment: Do users feel satisfied after interacting with the website?
- Usefulness: Does the user feel like he’s obtained value from using the website?
- Enjoyment: Is the experience of being on the website fun and not burdensome?
- Positive Emotions: Do users feel happy, excited, pleased, etc. when they interact with the site?
When evaluating user experience, a qualitative approach is often the only option. We can’t accurately quantify such subjective things as feelings and emotions.
Through the use of web design feedback tools and surveying tools, we can gain some insights into how users feel.
Feedback Army gives you the ability to pose open-ended questions to website reviewers. You get 10 responses for $15.
UserVoice gives you facilities for obtaining and managing feedback from your users. If you choose to, you can make feedback public and allow other users to vote. This can let you see popular opinions and shared thoughts among your user base.
Series Supported by join.me
The Web Design Usability Series is supported by join.me, an easy way to instantly share your screen with anyone. join.me lets you collaborate on-the-fly, put your heads together super-fast and even just show off. The possibilities are endless. How will you use join.me? Try it today.
For more Dev & Design coverage:
- Follow Mashable Dev & Design on Twitter
- Become a Fan on Facebook
- Subscribe to the Dev & Design channel
- Download our free apps for Android, Mac, iPhone and iPad