In this capstone, we're going to go farther. You talked about high fidelity prototyping, but we didn't have a chance to do it in the earlier courses. We're not going to go all the way to a high fidelity prototype in this project either. Instead, we're going to go somewhere in between a low fidelity and a high fidelity prototype. A mid-fi prototype typically has the following characteristics. It's clickable, which means it's interactive. It runs on a computer or on a device, and a user can click through it and actually change from one screen to another. Typically, mid-fi prototypes have some color and some simple typography. They might have bold and unbolded text to highlight different parts of the screen. But they're not going to be fully developed in terms of graphic design at this point. And mid-fi prototypes are usually going to have realistic content and they're going to have few or no placeholders. So rather than having placeholder text or boxes with x's through them to represent where an image is going to go, you're actually going to put in representative text and representative images to show what that particular interface is going to look like in that state. A mid-fI prototype is not, again, not going to have polished graphic design. It's not going to look that great. You're not going to spend your effort polishing and making it look really great at this point because you're still trying to work out the details of the interaction, what should go on what screen, what screen should lead to what other screens and so forth. It's also not going to have fancy user interface tricks like animations and things like that. And it's not going to be dynamically generated. It's not going to be hooked up to a database. It's not going to be running fully developed software. It's going to mostly consist of static screens that you can click to transition between to show what the interface would look like if it was fully implemented. But you're not going to actually implement it. There are many, many tools out there that you can use for developing mid-fi and hi-fi prototypes. There are so many options that we're not going to really spend any time talking about them in any detail. Some of you may already have some tools that you've used. And we encourage you to share what you've learned on the discussion boards so that others can learn from your experience. And if you are somebody who's just exploring this and you have questions, we encourage you to ask if anybody's had experience with particular tools. Here's a list of some of the most popular tools as of 2017, while I'm giving this lecture, Balsamiq, Axure, Proto.io, InVision, Framer, and Atomic. And the list goes on and on. And then if you just search for best prototyping tools, you'll find multiple compiled lists that give really detailed reviews of the strengths and weaknesses of these different tools. So considerations when choosing a prototyping tool to use, first is, what fidelity is possible or encouraged with that tool? So what's possible is what does the tool allow you to do this. Does it allow you to build a fully functioning, highly polished, highly designed website that has animation and all these kinds of tricks? Or does it restrict you from doing so? The flip side of that is what is that tool really designed for? A tool that encourages high fidelity prototyping might not be good for low and medium fidelity prototyping. So you want to pick the right tool for the job that you're trying to do at any particular time. Another important consideration is the ease of use and this will be related to the fidelity that it encourages you to try to produce. So for example, does the tool give you standard widgets that you can drag and drop? Does it give you standard buttons and text boxes and image fields and things like that or is that something you have to draw manually by yourself? Does the tool require scripting to create the transitions between different screens? Or is that something that can be done with a point and click interface? And related to that, how configurable is the tool? A high degree of configurability is probably going to make it more complex. And it might be harder to produce the first instance of what you're trying to design. On the flip side, it might allow you to go further towards the high fidelity prototype that you would eventually want to produce. And a final consideration is shareability. How easy is it to share the prototypes that you produce? Can they be automatically shared via the web, so you can just send somebody else a link and say, hey, checkout my prototype? Or if that isn't possible, do they allow you to export HTML that you can manually put on a website to share with somebody else? Or as in the case of some tools, does it only produce a proprietary output that requires that you have the software installed on the device in order to show it to somebody else or to test it with a user? To just give an example of two of the most popular tools, Balsamiq on the left and InVision on the right, Balsamiq only supports a low fidelity look. There's only one font that you can choose. And a lot of the widgets have a kind of sketchy look, which is good for keeping you from focusing on the irrelevant things like fonts and so forth. But it can mean that other people looking at it will see something that it's unfinished. Again, that may be appropriate depending on the stage of prototyping you're in. Balsamiq gives you a complete widget library, so you can just drag and drop different kinds of widgets to compose your prototype. And as a result, it's very, very simple to use. You can get something that is up and running in a very, very short period of time. It's relatively cheap to get the cloud plan for Balsamiq which allows you to share your prototypes via the web. Another popular choice is InVision. In this case, InVision gives you no tools to actually produce the screens. You have to produce them using other software, other drawing software. For that, you could use PowerPoint or Google Slides or Adobe Illustrator Adobe Photoshop or whatever tools you're familiar with. But InVision doesn't help you with that at all. So the screens are created elsewhere. Linking the screens together and making the transition between the screens is easy. However, producing the screens, well, the difficulty is kind of up to you. And it depends on how high fidelity the screens are that you're trying to produce and how familiar you are with the graphics tools you would use to produce them. The online version of InVision is free for up to two projects at a time. And with InVision, it's very easy to create interactive prototypes, share the link with other people and have them try it out and give you feedback. Both of these are tools that are worth a look if you don't have any other information about tools or experience with other tools. I'd recommend checking these out in addition to checking out other tools that you might come across. Regardless of which tool you choose, there's going to be a bit of a learning curve getting familiar with it. The good news is you will find many, many tutorials online. So some research is required to find the tutorials for the tool that you're interested in, figure out whether the tool is right for you. But we're not going to actually go into that in this capstone. And in case you're feeling that we're sort of selling you short by not training you on a particular prototyping tool, I'd just let you to know that we don't teach those prototyping tools on campus either. And the reason for that is because they change so rapidly. And there are so many personal preferences involved that we find that students would prefer to go out and self-educate, teach themselves, train themselves on the tools that they want to use, rather than spending class time learning how to do it. And so we encourage you to go out and explore on your own as well. But of course, feel free to ask for help on the discussion forums, ask for advice, and try to find the tool that's right for you. When creating your mid-fi prototype, it's worth thinking about what you're going to be doing next. And the next step is the heuristic evaluation. As you'll hopefully recall, the heuristic evaluation has you look at things like the specific language that is used in the interface, the navigation between different parts of the interface, so the key task flows. But it also asks you to look at how the system handles errors. And so in your mid-fi prototype, you're going to want to nail down things like the specific language, the key task flows that you're going to be examining. But also, you're going to want to include some error handling. So identify places where users are likely to make errors, or where errors could occur. And make sure your design includes support for preventing those errors and notifying users when errors have occurred. So you might want to think about those heuristics as you're designing the interface. Because you're going to be evaluating the interface based on those heuristics in the next step. First, with the heuristic evaluation, do your best to be objective. This design is your baby, you've put a lot of work into it, you know how it's supposed to work. And now you have to take a step back and try to look at it objectively. One technique for doing this is try to see the prototype through the eyes of your personas. Try to imagine how they would look at it. So when you're thinking about questions like is this language appropriate or a familiar language to the user, think about what your personas would see when they look at the language in your interface, or when they try to conduct the task as you've designed it. After the heuristic evaluation, before you jump into building your final prototype, remember to take time to brainstorm and sketch different solution to the problems that you find in the heuristic evaluation. You still want to use those techniques to try to make sure that you're exploring the best possible solution to problems that you find
