How to choose Prototyping tools


I really do not have any answer to the title, but at least we can discuss it a little. Prototyping can probably save you a lot of developing time, and also be a very good method to actually try your product without investing too much time and money. To test concepts, user experience, you can also have a more quantitative approach with goal oriented tests and such. So it is all good. In my experience it feels like most places don’t have time to do prototypes and sometimes it feels like the prototype itself doesn’t know what  kind of purpose it was created for. I think it is important to define what kind of prototype one should do before, and what the prototype is intended for. Otherwise it will be hard to get the result you’re looking for out of the prototype.

There are a lot of different prototypes (damn that word sucks typing). Lo-Fi prototypes, which can be paper prototypes, to test system flow. I have heard a lot of people really speak highly of this method, but to be honest, my paper prototypes always look like origami gone wrong. And doing it with participants doesn’t work either, in every session I have been in, the participants have hated it. But it is cheap, so maybe I just need to work a little more with it.

Then we have Hi-Fi prototypes, which can be real HTML but static ones, no data and no dynamic flows. We also have tools as Muse, Axure, Invision and the list goes on.

So how to define your prototype. What do you need to show the client? Do you need to show Look and Feel, that is probably the most common one, the client wants to see something that looks real. But if we have time to do some user tests, we need to establish exactly what we want the prototype to test. Is Look and Feel really the most important? or is it the role, which the prototype will have in a users life (yes I’m talking Houde and Hill triangle), or do we need to try more technical aspects? I think it is important to really think it through before investing time and money in developing a prototype, otherwise you will stand there after a couple of users tests, and hours of analysing the data and discovering the data isn’t relevant.

But there is also another dilemma. The targeting group, if you’re doing user tests you need to have a prototype which can be used and give valid result, but if you’re showing something to the customer itself, they are not going to understand why they need to look at badly executed origami, or why the hell you as a designer or developer haven’t used the right colors, because what they see is the end product and their money going to waste, in a prototype which isn’t even close to what they want. And if you’re doing a Look and Feel prototype they are going to ask, why the technology doesn’t work? and if you’re doing a role prototype they are going to ask you why it doesn’t look right? they are never going to understand that you’re testing something else.

So lately I have been trying to do only WireFrames, black and white, just to test structures and flows. Because when that works the design itself is going to end up in the right place. Well, that was putting it a little easy, but you get what I mean (otherwise I’m gonna sound utterly stupid). A wireFrame can’t be interpret as the “end design”, it is easy and fast to work with, you can move around elements quickly and try different things without wasting to much time (I guess prototyping is never a waste of time, if you don’t go completely rogue on it).

But, if you do need a little more advanced prototype for a bigger project. You might want to choose another tool. So first thing first, you need a design, and the design needs to be grounded in some pre-studies, it needs to be well motivated. So where do one start? Let’s say you have a project, you have done your homework, you know the targeting group, you have done studies so you know how to communicate with them, you know the customers goal, well you have everything you need to start “designing” and doing a prototype which you can iterated on.

And I think this is where it gets a little tricky. So you decide you’re going to use Muse, Muse is an Adobe program where you can build an entire site, you can use HTML/Javascript, but also just what you see it was you get elements. If you know other Adobe programs it’s not that hard, but actually it is. It has a high learning curve if you want a really good prototype, but the problem is when you have invested a lot of time doing that, you actually have a complete site (a developer would cry, but still). So what have you actually created? A complete design-file? a real site? I have never gotten a Muse file as a Front end Developer, because it is too limited to use as a design tool. A designer friend of mine told me he is doing the design in photoshop and then he just copy pastes it to Muse to show the customer a little feeling of parallax scrolling or whatever. But then he needs to do a double job. And when the customer wants to update something he needs to update two files. It sounds very time consuming to me.

So let’s say we use Sketch or Photoshop instead, together with Invision, because we need to consider that what we’re creating is something that needs to go to the developing later. So our design goes straight into Invision, you can do all sorts of neat stuff, but it is fairly limited, and the point of it is to have the whole team working on it, in Invision. But it feels more realistic to just have your design file static and then put states on it with help of some program, than doing it the Adobe Muse way (Adobe Muse is great, but maybe for people who want to create an entire website in it). We also have prototype programs as FramerJS, than you need some coding skills, it is less limiting, but it also has a pretty high learning curve, you need to invest some time to teach yourself the program, and also, I guess you will not write any code in that program the developers even wants to touch, so it all goes to waste anyway.

Then we have HTML prototypes. If you’re doing this, you probably need some sort of design, and of course if you’re a good developer you can put together that sort of prototype really fast, but let’s say you’re not. Do you create a HTML/CSS and Javascript prototype which will go to waste later? or do you have some sort of framework so the code you write can be inherited to the real product?

You see my dilemma here, I’m all for prototypes, I just think it is quite hard to establish which method is the best one. Of course it depends on the project and the person developing the prototype. You should probably use what suits the projects the best and what you need to test, and what you need to present.

And of course prototyping will cost some money and time, but hopefully it will help you on the way to a better product. And if you spend the time doing it right, you might have shorten the time it needs to develop. So let us keep on prototyping, and trying different tools and see where it takes us. So for your information, I’m not a prototype expert, this is just something I have been thinking about lately.