Hi everyone. So for this video we're going to be talking about choosing a Wireframing/User Experience Prototyping tool. Now when you wanna use these tools? Mainly for this course towards the end. So for your final deliverable, which is a prototype, I'm a lot more concerned that people are developing the tools according to the user experience and around the user experience. Than just looking at good coding on the backend. So I'm not concerned about coding. Cuz I know a lot of you aren't software developers. But I do really wanna make sure that you know how to develop a product that can be in line with the customer's requirements. Convert those to specifications, and then map out the user experience so that you've got an intuitive, useful product. But yeah, I'm not going through on the back end going, oh, this guy doesn't know how to use jQuery, tere's no way. I don't really care about that. But I do want to make sure that you do have a good solid use and experience developed because if that's not strong, then your product isn't really viable. You want your customers to need your product and to continue using it. And that's how you make money. Well, one of the ways. So when to use these tools? Clients ask for prototypes or proof of concept. A lot of customers, especially if they're paying you a significant amount of money to come up with something for their company, they may want something that they click through and use and get a good idea. A lot of people are very visual. And if you just show them something that they can't interact with, they're not gonna be able to get their heads around it. So you can also use it when you want to reduce the number of design iterations. So if you're on a tight budget, and you wanna come up with something initially, so that you can click through, get a handle of the user experience, the user interface, then this is a good idea. Because otherwise, you can spend weeks or months, designing all the backend stuff in order to have it that functional. So, yeah, definitely this is when you wanna use those tools. So you can use any of these at any time in the design process. I like to start kind of after I've done some initial sketches. And then you sort of want to get a good handle on it, but yeah, and then you can do it throughout. If you wanna map out other alternative user interfaces or different options and get an idea of that before you put in all your resources into the development. So there are going to be three different types that we generally, that I'll be discussing. And there are a lot of different products that fall into these different categories. I'm not gonna be discussing all of them, just a couple. But you can go and do research. At least you'll know what to look for. So there's low fidelity, medium fidelity, and high fidelity. So in order to break these down, we're going to take a look at some graphs now. So, when you look at the stages of software development, Requirements, Design, Coding, Testing, Deployment, Maintenance, this will come into the Design aspect. And that's when you start implementing these tools. But yeah, collect your requirements from the beginning, okay? So, low fidelity tools. So, with low fidelity tools, these are good to use in the very initial stages, when you want to just kind of whip up some ideas. So, these are used for concept sketching or basic storyboards. Now, when you take a look at say, this Balsamiq and Sketchflow, so the interaction, very low interaction with the customer. The starting point is from scratch, so you'd use this in the very initial stages. Now these are only two examples, but there are a lot of other ones out there. So, wireframing, yes. Coding requirement, none. Export options, there are a couple different here, PNG, PDF, Word. Suitability, so mobile and web, useful features. So with Balsamiq, sketchy widgets and drag and drop features. Drag and drop features are awesome for people who aren't very technical and you just wanna whip up some ideas. With Sketchflow, the useful features include a Sketchflow map, a large number of controls, reusability of wireframes to final prototype. So with medium fidelity tools these aren't final in appearance, but you can position the user interface elements, which can be decided without the content being fully developed. And images as placeholders, and it usually has a text saying like that Lorem Ipsum thing. Now I like to use medium fidelity tools because it can really sort of map out how the content is displayed. One of the reasons why I like this so much is when I do a business plan, or an investor presentation, I like to do it as a digital magazine sort of a format. Where you can really interact with it, it's got graphics and pictures. And you can go through it that way, map everything out and just really interact with the file. Instead of just sending someone a lame Word file or a bunch of yeah, just a boring PDF. Main reason for that is that I like to be very competitive. So when someone, when my competition submits Word document, and I'm like, [SOUND] noob. So anyway, let's go through this. So Visio, the interaction is pretty low. The starting point, you can do it from scratch. It does have wireframing, you don't need to know any coding. There's no code requirement. The export options, PNG, TIFF, JPEG, webpage. So this can be kinda, this can be pretty good too. So, I like being able to use this tool. And there are a bunch of tools available. So suitability, mobile and web, useful features, a large number of wireframing controls. But when you're looking at Azure it's a high interaction so there's definitely sort of a trade off. But yeah, high interaction with a customer or the user. You can do it from scratch, wireframing, yes. There's a little coding requirement, so if you've got a little bit of experience, you'll be fine. Export options, as an image, suitability, mobile and web. Useful features are a large number of wireframing controls, annotations, and interactions panel. So yeah, I like to use medium fidelity tools instead of just starting with a sketching one, because I do like to see how content is going to be displayed. Okay, so high fidelity tools. I absolutely love Flash Catalyst, it is so awesome. Okay, so with high fidelity tools, it's the next best thing to a fully functioning minimum viable product. It combines sketch, user interface, and design. They're definitely a bit more work than just a basic sketch tool. And this is something you'd use more for the duration of the product, once you're really sort of refining and developing. So Flash Catalyst, I've used this one a lot and it's very cool. But I don't just use it for doing the prototyping. I also use it for creating animations, because you can have things move around, some basic games, like very low-end games, of course, nothing like Call of Duty. Export options, so PNG, PDF. But then when you export it, you can also export it as a video, if you do, or an SWF file. So that's not mentioned on here. But I'm a huge fan of Catalyst. Useful features include transition effects, heads up display, and import options of Photoshop and Illustrator files. Yeah, I really like Flash Catalyst. So one problem that Flash Catalyst although, is when it came out a lot of people thought it was absolutely groundbreaking and awesome. But then that was just about the same time that Apple had said, way back in the day, that they wouldn't allow Flash to be used on iPhones. So a lot of websites changed what they had to do, because Flash content wasn't showing up on an iPhone. So yeah, poor Flash. Okay, so with GUI Design Studio. High interaction, you can do it from scratch. Wireframing, yes, no code requirement. Bitmap, PNG, JPEG and GIF or GIF, whatever you prefer. Microsoft Windows and web and there's a lat number of Windows based controls, re-usability and wireframes to the final prototype. So Microsoft Expression is another one. We don't have to go through all of this here, but they all have different pros and cons. So if we take a look a Flash Professional, that's a lot more interactive and time consuming to do than Flash Catalyst. The interaction with Flash Catalyst can be higher if you do the coding, because you can do some coding on Flash Catalyst, but it's not a mandatory skill. But with Flash, you definitely do need to know some coding. These are some high fidelity tools. So for the purposes of your product and your prototype this semester, if you're comfortable with these high fidelity tools, that's fine. But if you're not as technically proficient as some of your classmates, or as what you'd like to be, I'd say a medium fidelity tool is probably going to do exactly what you need. So display of content. And you can go in and change that, change the content to make sure that the user interface elements are in place. So either medium fidelity or a high fidelity tool for the final prototype, but then, or low fidelity tools for your initial designs and sketches. So I'd like to see, kind of, that you can use a couple of different tools. But yeah, so low fidelity tools when you're doing your design sketch. Medium fidelity or high fidelity tools for when you develop your final prototype. So when you look at high fidelity tools and you're doing a comparison, see the interaction on the side and then fidelity at the bottom? You can kind of see it, how high fidelity, low interaction, and yeah, you can map all these out. All these slides, I know you're not gonna be able to read everything from here. So feel free to download the the slides and you can take a look later on. So in summary, when deciding your tools, know which ones work best for which stage of the process. So if you're doing the initial sketches and you're just trying to get some ideas together, you can use the low fidelity tool. And then when you start to design the user interface and get an idea of how you want your content displayed and have more interaction, to with the medium fidelity tool. When you're looking at the final prototype, and the development that is the most life-like and a more realistic representation of your product, then go with the high fidelity tool. But if you're not as technically savvy as you'd like to be, and coding is a problem for you, then feel free to use a medium fidelity tool. But make sure it looks good. Yeah? And that the user interface is very user centric, and it definitely goes in line with a strong user experience, so it'll make sense. Okay, thanks again everyone, bye.
