Lesson

Prototyping & usability testing

⭐️ Key takeaways

Usability.gov defines usability testing this way: "Usability testing refers to evaluating a product or service by testing it with representative users. During a test, participants will try to complete typical tasks while observers watch, listen, and take notes. You're testing to assess if your product is useful and easy to understand and navigate. You're also testing if it's valuable and desirable.

Think of usability tests like experiments that scientists run. That's precisely what usability tests are trying to accomplish, but instead of testing a chemical reaction, we're examining how well your interface meets user needs. The goal is to identify any usability problems, collect qualitative and quantitative data, and to determine the participant's satisfaction with the product."

A usability test has 4 parts:

The introduction
The pre-study questions
The scenarios and tasks
The post-study questions

Analyzing usability test data is all about going back over the notes, transcripts, and videos from testing to find emergent themes and usability problems. For example, if 4 of 5 participants struggled to complete a task, that’s a significant finding that you’d record and report in your analysis.

So what are the elements to include in your analysis?

The objective and subjective metrics we just talked about.
Other themes or patterns that show up across multiple participants.
Important quotes such as an issue with functionality, love of an interaction, or another insightful quote.
Videos and audio clips of participants. This shows stakeholders directly how easy or difficult it was for participants to complete each task.

The six main reasons we conduct usability testing:

To learn how well your product or service actually helps users complete the specified task and how long it takes to finish those tasks.
To understand your users’ goals and motivations. By observing them as they go about a task, you learn why they do what they do and can probe further into the problems you see them facing.
To diagnose issues with your interface and figure out the changes needed to increase efficiency and performance.
To learn how satisfied users are with your product or service, which is crucial to the overall success and longevity of your product.
To help designers, product managers, developers, and other stakeholders build empathy for the user.
And 6, to provide you with a clear idea of how to make the best functional designs for your users.

Your study participants are "co-creators" of the design outcome. It puts less pressure on you as a designer to come up with the perfect answer.

A prototype is an early sample, model, or release of a product built to test a concept.

Prototypes can be anywhere on the spectrum between low to high fidelity.

You can sum up what a prototype is with these three statements... A prototype is:

Anywhere on the spectrum of fidelity.
Cheaper to build than the final product as software development is expensive.
Made to test the usability of the product and validate concepts.

There are three basic categories of prototyping:

Coded prototypes: These are prototypes that model the final product using real code. ‍These are really time consuming to create and require a high skill level because you need to have coding and development knowledge. ‍
Paper prototypes: These are the sketched versions of the website, feature, or product that you’re creating. ‍They’re made up of multiple sketches that are linked together either by a software program or by you during a usability test.‍
Digital prototypes: Digital prototypes have both the interactions and appearance of the intended design. They’re created using software that links together wireframes or mockups.

For basic prototyping, here are a few tools you can use:

Figma. We personally recommend Figma for prototyping. It offers the most features and dynamic interactions.
Sketch
InVision
Adobe XD
Balsalmiq

For more advanced prototypes with more interactions and transitions there’s:

Protopie
Axure
And many more

Be sure the tool you choose allows you to send a link of your prototype to your participants so you can conduct remote and unmoderated usability tests.

📗 Assignment

💬 Transcript

If you're building a new product, how do you ensure that customers have the best experience?

Similarly, how would you discover usability issues and find areas where customers are struggling so you can fix those problems before the product is released?

The answer? Usability testing.

But you have to have something to test. So unless you're testing an existing product, you'll be testing a prototype.

So let's dive into the world of prototyping and usability testing.

In this video, we'll cover what usability testing is, the six reasons why it's essential, what prototyping is, and prototyping tools.

Before getting into the meat of this lesson, we have two questions for you.

First, have you ever been in a situation where you didn't know what to decide?

You weighed all of your options, but didn't feel like you could make a decision.

This sort of situation happens all of the time in design.

That's where usability testing comes in.

It allows us to check in with our users to make sure that what we designed is useful, relevant, and meaningful.

Here's another question for you.

Have you ever been caught in an argument with someone that was going nowhere?

You both likely made good points, and at the end of the day, neither of you had the evidence at hand to support your claims.

It's like talking at a wall.

Usability testing is one of the best ways to avoid those arguments, because it gives you evidence to back up your design decisions.

We've been questioned many times during our careers about our design choices.

On most occasions, we can easily back up our decisions with evidence because we base our designs on research and usability testing.

Without evidence, the only supporting arguments for your design choices are your opinions, which can be quickly challenged by someone else.

That's not a situation you want to be in as a UX designer.

So with all of that in mind, it's important to know how to prepare for and run usability test on your own to validate your designs.

And while not every project needs usability testing, your decision should to the extent possible be based on research.

So now let's answer the question, "what is usability testing?"

Usability.gov defines it this way, " usability testing refers to evaluating a product or service by testing it with representative users. During a test participants will try to complete typical tasks while observers watch, listen, and take notes.

The goal is to identify any usability problems, collect qualitative and quantitative data, and to determine the participant satisfaction with the product."

Remember the definition of UX? It's the process of making a product or service useful, relevant, and meaningful for people.

That's what you're testing for.

You're testing to assess if your product is useful and easy to understand and navigate.

You're also testing if it's valuable and desirable.

Think of usability tests like experiments that scientists run.

That's precisely what we're doing here, but instead of testing chemical reactions, we're examining how well our interface meets user needs.

And just as a scientist to conduct experiments to answer certain questions, UX designers do the same through usability testing.

This is how a usability test session goes.

First is the introduction where you welcome the participant.

Then you provide a quick overview of this study and explain what to expect.

You then reassure your participant that you're not testing them, but you are testing the product, that there are no right or wrong answers, and that any feedback is welcome, positive or negative.

Next, you ask their permission to record the session.

And before you start the study, ask them if they have any questions.

Second are the pre-study questions.

Ask about your participants background and any other demographic or psychographic questions that you find relevant for your study.

Next, send them the prototype link and ask your participant to share their screen.

Third are the scenarios and tasks.

Read a quick scenario to provide them with the context and state of mind that they are supposed to be in while taking that test.

Next you provide your participants with tasks to complete using the prototype. Then watch them go about completing each task.

At the end of the last task, you wrap up the prototype portion of the usability test.

Finally, you ask post-study questions to get their overall thoughts and satisfaction levels.

It's one more chance to gather insightful data. And that's it.

Similar to user interviews you really only need four to eight participants to get a solid picture of the usability of your product.

And as always what's important is that you are talking with the actual target user of the product, not just some random person.

So once you've conducted at least four to five usability tests, you would then analyze your test results, looking for commonalities across each participant.

Analyzing usability test data is all about going back over the notes, transcripts, and videos from testing to find emerging themes and usability problems.

For example, if four of five participants struggled to complete a task, that's a significant finding that you'd record and report in your analysis.

By the way, for analysis tools, we recommend using a program like dovetail to analyze your test results.

Here are five objective metrics you can use to monitor task completion.

One, successful task completion.

Two, critical errors.

Three, non-critical errors.

Four, error-free rate.

And five, time on task.

So for example, after completing five usability tests, four of the five or 80% successfully completed task one.

Five of five completed task two.

On task one, only one participant had critical errors along the way, meaning, they wouldn't have been able to figure it out on their own without your help.

On task two, two participants had critical errors.

On task one, three out of five had non-critical errors.

Non-critical errors are where the participant is able to recover and don't affect the participants' ability to successfully complete the task.

On task two, zero participants had non-critical errors.

On task one, only two of the five had no errors whatsoever.

On task two, three of five were error-free.

And the average time to complete task one was three minutes and 20 seconds.

The maximum time to complete task one for one of the participants was five minutes and 15 seconds.

The minimum for another participant was two minutes.

For task two, the average was two minutes and 15 seconds. And so on.

You may also use more subjective metrics that you ask your participants such as: how difficult each task was, their level of satisfaction with each task, what they liked the most, what they liked the least, ease of use, and their overall satisfaction.

When you're employed as a UX designer, many times you'll compile all of your insights from your usability testing into an analysis document that shows your findings to stakeholders.

This helps you justify the design direction and gain support for your solution.

So, what are the elements to include in your analysis?

There are four things.

First, the objective and subjective metrics that we just talked about.

Second, other themes or patterns that show up across multiple participants.

For example, the word on the button didn't fit the mental model of three out of five participants.

Another example could be four out of five participants easily added a profile picture to their account.

The third thing you'll want to include are important quotes such as an issue with the functionality, love of an interaction, or another insightful quote.

For example, a participant may have shared something like this.

"I usually struggle with tech, but I have to say this was actually quite easy to use."

This is a great quote to use in your analysis because this shows that even non-tech savvy users can understand it.

It's a testament to the quality of the product and your designs.

The last thing to include in your analysis are videos and audio clips of your participants.

This shows stakeholders directly how easy or difficult it was for participants to complete each task.

For example, from two minutes and 45 seconds to four minutes, participant number one was struggling to find the share button and needed to be prompted to get to the next step.

That's a really awkward thing for stakeholders to watch, and it really helps them build empathy for the user.

There are several ways to package your usability test report.

Depending on the size and importance of the project, some companies will expect you to make a slide deck and present your results.

Others want a document that outlines the findings.

As a UX generalist, because research isn't your number one job, we believe a document of your findings is more than sufficient.

A document is faster to create and helps you highlight the most important analytics without wasting time on how best to present the data.

Plus you can use an app like dovetail to really make your testing report shine.

Usability testing is an indispensable practice in UX because it provides real-world data on how users interact with your product.

It's not something that you do to check a box saying that you did it. It's a critical part of the process.

And remember you're testing the product, not the user.

You want to understand to what extent your product helps the user reach their goals.

Let's dig into that a bit more and talk through the six main reasons we conduct usability testing.

First, to learn how well your product actually helps users complete the specified task and how long it takes to finish those tasks.

Second, to understand your user's goals and motivations by observing them as they go about a task, you learn why they do what they do and can probe further into the problems you see them facing.

Third, to diagnose issues with your interface and figure out the changes needed to increase efficiency and performance.

Fourth, to learn how satisfied users are with your product or service, which is crucial to the overall success and longevity of your product.

Fifth, to help designers, product managers, developers, and other stakeholders build empathy for the user.

And sixth, to provide you with a clear idea of how to make the best functional designs for your users.

This means that your study participants are co-creators of the design outcome.

It puts less pressure on you as the designer to come up with the perfect answer.

With all this talk about usability testing, let's switch gears and talk about one of the primary things you actually test a prototype.

With that in mind, let's go over what a prototype is.

A prototype is an early sample model or release of a product built to test a concept. This is the perfect definition for two reasons.

First off, prototypes are built early in the process.

That way not much time and money have been invested in the project if you discover what you designed doesn't work.

And second, and most importantly, a prototype is a sample you create a test of concept. It's not the full product with everything figured out.

Prototypes are all about getting your ideas out as early as possible in a manner that will allow you to learn and iterate on them.

They're created so you can put it in front of people and see if the idea has any value.

They can be anywhere on the spectrum between low to high fidelity.

Because there aren't any detailed interactions, low-fidelity prototypes are typically used to help validate navigation and the journey a user would go through when using the product.

High-fidelity prototypes are more detailed, have a more involved experience, and feel much more like the final product.

High-fidelity prototypes focused on the exact interactions of the product.

They typically include things like animations, visuals, or conditional logic, where based on your actions with the prototype, you'll get a different result.

All in all, you can sum up what a prototype is with these three statements.

A prototype is: anywhere on the spectrum of fidelity, cheaper to build than the final product because software development is expensive, and a prototype is made to test the usability of the product and validate concepts.

Moving on, in the digital world, there are three basic categories of prototypes.

First, there are coded prototypes.

These are prototypes that model the final product using real code.

These are really time-consuming to create and require a high skill level because you need to have coding and development knowledge.

Unless you're a developer or someone who's really interested in code, don't worry about creating this type of prototype.

We just wanted you to be aware of them.

Second, are paper prototypes. These are the sketched versions of the website feature or product that you're creating.

They're made up of multiple sketches that are linked together either by a software program or by you during a usability test.

The purpose of a paper prototype is to validate a concept early on to get feedback before you start creating the design on your computer.

Paper prototypes are valuable because they get your ideas out of your head and into a semi-functional form that you can get feedback on super quickly.

You only need two things to create paper prototypes, pen and paper.

Once you've created all your drawings, all you have to do is link them together.

There are a few choices you can make.

First, you can manually link them yourself.

This would mean you leave your sketches and paper form and have folks click or tap using their finger or pen.

You would then show them the corresponding sketch depending on their decisions.

Unfortunately, this can really only be done well in person.

The second option is to use an app like pop by Marvel or Figma to take photos and link the screens together to create an interactive experience.

The last type of prototype are digital prototypes.

Digital prototypes had both the interactions and appearance of the intended design.

They're created using software that links together wireframes or mockups.

They don't have to be high fidelity to be useful.

Wireframe prototypes can be just as helpful for gathering feedback as high fidelity prototypes.

That said sometimes you need to prototype highly detailed interactions to make sure that everything works together and make sense to the user.

Here's an example of a digital prototype. This is a parody company called Catflix built in Figma.

Now that we've covered an overview of prototyping.

Let's cover some tools that you can use to create digital prototypes.

For more basic prototypes there's Figma, Sketch, InVision, Adobe XD, and Balsalmiq.

We personally recommend Figma for prototyping. It offers the most features and dynamic interactions.

For more advanced prototypes with more interactions and transitions, there's Protopie, Axure, and many more.

Be sure the tool you use allows you to send a link of your prototype to your participants so you can conduct remote and unmoderated usability tests.

All the tools we listed have this ability.

Also, always use the software that allows you to create a prototype in the least amount of time and still get the results you were hoping for.

Usually this means you use the prototyping software that you feel the most comfortable using.

Well, that's it for this lesson on prototyping and usability testing.

To recap, usability testing is the evaluation of a product or service by testing it with representative users.

We talked through the six reasons to conduct usability testing, which are to learn what extent your product or service truly helps users.

To understand your users, goals, and motivations.

To diagnose issues with your interface.

To learn how satisfied users are with your product or service.

To truly understand what matters to users.

And to gain clarity on how to make the most functional designs.

Best of all, your participants are co-creators of the design, literally telling you exactly what they need.

Then we covered prototypes.

A prototype is an early sample model or release of a product built to test the concept.

There are three basic categories of prototyping in UX. First HTML/coded prototypes, but don't worry about these.

Second, paper prototypes. These are sketched versions of the website feature or product that you're creating.

They're made up of multiple sketches that are strung together either by a software program or by you during a usability test.

And finally, we talked about digital prototypes, which we recommend during this stage of the process.

These have both the interactions and appearance of the intended design.

They're created using software that links together wire frames and mock-ups.

And finally when choosing what software to prototype with, choose the one that allows you to create a prototype in the least amount of time and still get the results you were hoping for.

🔗 Links

Prototyping

Running your usability tests

PREVIOUS LESSON

Wireframing in UX

NEXT LESSON

Intro to visual design & handoff