Hello, and welcome back. Today, we'll be talking about wireframing and tool-based prototyping. Now I hope at this point you've had a chance to listen to Heidi's lecture on low fidelity prototyping, so you understand why it might be important. It helps you get your design right before you put a lot of time into building the design in any sort of a digital format. But in addition to paper prototyping, there are also tools that can help you prototype. So when somebody's prototyping with paper, a person or a researcher has to act as the computer or the wizard to actually switch out different parts of the paper prototype. And essentially, be the interactive portion that the person uses. However, tools can actually help you link parts of an image or wireframe together with hotspots, so that nobody has to act as the computer. So the person can actually click through and they'll be taken to different parts of your sketch or wire frame automatically. Now, there are a lot of different tools that can help you with this. Everything from PowerPoint, which lets you just set up some hotspots or links between slides. Two tools that are meant specifically for this purpose. There a lot of these tools in fact too many listen. I'm sure new ones are coming out all the time and they relative benefits and draw backs. We're not going to go through all of these tools here, but I just want to introduce you to tool based prototyping and then maybe we'll do a few examples, of tool just to get you started. So if you watched the paper prototyping video, you might know how to create a paper prototype. Let's say, I wanted to create a movie recommender system, that's someone that a group does a lot. And I wanted it to be able to recommend movies based on a location that you're going to. So that you can learn more about a particular location. So this is what a paper prototype might look like. So I've specified how you would search for something, I specified that I would have tabs. I specified that there would be movies with information about each movie below. And this is just on a piece of paper, and it's just a regular paper prototype that somebody may be able to point to an area in order to transition between different screens. Now here's what that same prototype would look like as a wireframe. So this is a wireframe done in Balsamiq, so as you see, it's still fairly underspecified. So I don't have specific images to represent each movie, I just kind of have an x for that. And I just have something that says, movie info, rather than actual movies and titles. But different areas of the interface are specified, and in a tool like Balsamiq I would be able to link. Let say, the category tab or the recommended for you tab to another interface. Have a percentage rack with it and when they click on that hotspot, iIt will automatically take them to that new wireframe. I can also get even higher fidelity. So here's the same idea in PowerPoint. So this is not actually something that's functional, but what I did is I took images, I created the tabs. Then I took images off of the Internet and I assembled them in the way that looks like the type of interface that I'm trying to achieve. So here you can actually see the actual movies, and it actually looks the way the real interface might look. Now there's benefits and costs of doing it this way. So the positives of doing tool-based prototyping is that you don't need a wizard to actually transition between slides. So this can help you get more accurate visibility metrics. Because as somebody is actually clicking through you can see for example, if they get confused. You can tell more or less how long it will take them to do a specific task, so you get kind of these more specific visibility metrics. Now one of the positives is that you have to get more specific about the features and the layout. So in the first interface here, I was pretty sketchy. I didn't really think about how many movies would be displayed, I didn't think about what kind of information would be displayed about each movie. I didn't even specify all the tabs yet, but as I got to the really specific interface a lot of things are decided. Things like the color of the toolbar, how many movies are displayed on each line, what kind of information would I be displaying about each movie. And that could be beneficial because it could help you get feedback on each of those features. Now on the other hand, there are some drawbacks. So one of the things is it may give you feedback at the wrong level. So again, if we look at this interface here, maybe talking to users, they would say, wow, I really don't like the red toolbar. The red toolbar doesn't look nice, I don't think that is something that I want to see, I'd rather see blue. And maybe you're looking for feedback at that level, but chances are when you're showing a low fidelity prototype. You're more interesting and finding out would people want to use a service like this, what ways could it be useful to them? What kind of features would they want in this new recommenders system and beyond destination recommendations? And if they're so focused on maybe the specific movies you recommended, the specific information you're showing about each movie, the color of the tool bar, things like that. They may not actually give you feedback at the right level. So there's kind of a cost of going too high fidelity too early. The other thing, and this is a real story, is that if you're showing this to a customer, they may actually think that the entire prototype is done. So for example, if you were hired to make a movie recommender system like this. And you delivered this PowerPoint prototype that can be seen on an iPad, and they could actually click through. And it might not have all the features yet, but it actually let's them move through the interface. The customer may actually think wow, this is great you are basically done with it. Eventhough you might still have maybe years of work to do on the back end of the system. On actually getting fully functional front end of the system and maybe developing these algorithms for recommendations. But now customer thinks, it's done or it's 90% done and they are not willing to commit anymore researches for the project, for example. Because they are thinking well you had it done last week why are you still working on this? So that can definitely be a cost of providing an interface that's too high fidelity. And lastly, while this was also a positive, it's a drawback that you have to get more specific about features and layout. Because you may not have made those decisions yet, or maybe those decisions aren't salient at your part of, the point in the design process. So really, I'd suggest in taking a careful look at the kinds of feedback you want to get from your users and whether a tool base for a typing approach is right for your stage. Now, if you stick around for future videos will actually give you a few brief examples and demos of two particular tools to use. One is the POP app that stands for I think prototyping on paper app that lets you create a paper prototype that somebody can navigate through their phone or iPad, I'm sorry or tablet. And the other one will work through it's Balsamiq Mockup which is another wire framing tool mostly used for large scale things like web pages. And we saw one example of it here, but I'll actually show you how to work through one. So I hope you stick around and watch those videos as well. Thank you very much.
