Prototypes bring products to life, allowing a glimpse into how the end product will look and function. Combined with usability testing, prototypes provide great insight as to whether the goal has been met, or if more refinement is necessary.
Links to UX Architectural Guides:
More at neuronUX.com
Welcome back. I'm Soudy Khan, Director of User Experience at Neuron. Continuing our series on creating a UX Architectural Guide we're down to the last two chapters. That would be the Prototype and Usability Test. There’s a lot of information on usability test so I intend to do a separate series of videos on doing usability tests so you can look forward to that in the next few weeks. But today we're going to start with the prototyping and different levels of prototyping, and then different ways you can do, sort of, 'quick and dirty', usability tests.
So as far as the prototype goes there are many different levels. You can start with a paper prototype, you can go all the way to something done in Swift, or HTML5, but in the middle we have clickable prototypes. You can use programs like Invision. I'll explain this in the simplest way. Essentially you can create on a page, links that go to other pages, or other images. Typically you're using JPEGs. So let me give you an example. I might have a screen that says Jack and Jill on it. There are two buttons. One labeled "Jack", and one labeled "Jill". I simply, by pressing the Jack button, go to an image of Jack. By pressing the Jill button I go to an image of Jill.
By doing this, and taking my actual graphics with all the different buttons and all the different affordances, I can stitch together a scenario. I can use that for a prototype to be used in usability testing. So that's what I would suggest. Take a look at Invision. Invision is very lightweight, very easy to use. There are other companies that make clickable prototype software, but Invision is the one that I recommend.
Next we're going to talk a little bit about usability testing and there are many different types of usability tests. There's four basic types. There's comparative, which is an A/B test. There's Exploratory, Assessment and Validation, and while the titles are a little bit confusing, think of the three as three different levels of fidelity.
Exploratory, Assessment, and Validation. Kind of like "very simple" to "advanced" to "much more advanced". So in an Exploratory test you're really just trying to test out the basic interaction model. Does it make sense to a user when they get to that start screen, or they get to that key scenario that you're defining? For example, a checkout process. Do they know how they go there? What can they do? How do they exit? What did they expect when they click on that particular button? If you give them a particular task like "Do this", or "Do that" are they able to understand where they might go? So that's the Exploratory test.
Assessment is kind of mid-fidelity. You might be doing that in Invision, you might be doing that in something a little bit more advanced like Axure or Balsamic and that allows you to just prototype things a little more and go a little farther into the test. So while in Exploratory test, you may only have five, or six tasks for the user to complete, in assessment you may have 15 or 20. Validation, finally, is the last test. That's done, typically, using either HTML, or Swift, X-code; whatever you're programming in. It really is the last step before product release.
One of the reasons it's important to do Assessment and Validation is that sometimes you assess things and you make changes, and those changes actually create more problems, or other problems that might be unforeseen.
So that's a little bit on the different types of tests. I will say that as tips, be sure to write a test plan, write a screener, and you can take a look at what those are online. It's really something that use to screen test subjects. Be sure to have a moderator script and the correct environment to test in. Try not to bias things. You want the moderator to be as neutral as possible.
Another thing I would say is, if you're doing a comparative test, let's say you've got something to compete with an ESPN. If you've done a wireframe, don't actually do an A/B with ESPN. In fact, the fact that ESPN has so much brand recognition and people have used it so many times, you want to make sure that the two prototypes are of equal fidelity. Often if I do a wireframe for something new and I want to compare it to something that exists, I will take that existing product and I will create that in a wireframe and remove any brand name from it to make sure that everything has .....