You know that fantastic idea you have for an app? The one that you know will make you millions if you only knew a designer, a programmer or a UX whiz? In our previous post we spoke of how interactive prototypes bridge the gap between wireframes (or sketches) and actual experiences you can show your in-laws (or clients). They show rather than tell how users achieve their goals quickly and pleasurably with our genius idea. Normally this is left to the pros with expensive specialized products like Balsamiq, Irise and Axure. I have used these tools and think that Axure holds the top spot, but there are many up-and-comers that are trying to break into helping realize app ideas. I have had an opportunity with colleagues and students to evaluate a few tools and want to share our reactions and let you know it’s easier than ever to make amazing examples to lead you strongly into development.
The goals of a prototype are to get real interaction into people’s hands quickly and easily to allow for quick feedback and iteration. Some offer a more post-visual design approach – InVision, FramerJS, Flinto and Composite take a Photoshop document and add interaction and animation. Alternately, complex animations can be modeled with Origami and Quartz Composer. We are focusing on tools that allow you to create all the assets on screen. This is the approach of Axure, which offers a familiar application-style interface. All the newest tools are online only, which offers interesting challenges as we move from interacting with an application to a website. All of these tools allow you to see and test the solution in the actual mobile device, although you will create the prototype using the full screen of a computer browser.
The Axure application interface
The apps fighting it out today are:
iOS iPhone and Android phones are the main stage for Codiqa and Fluid UI, only ProtoIO offers full ranges of devices, including plain ol’ websites.
Codiqa
Codiqa interface
Apologies to the fine people at @codiqa, but this tool was eliminated early due to its complexity and mismatch to the goals of our team. I would like to commend them for skinning a real coding environment (jquery mobile) so that you could see your ideas quicker to code, but perhaps a bit more abstraction could have got people started quicker.
FluidUI
FluidUI took a page from a great prototyping tool I used with Windows called Caretta. By being able to see the entire application at once, you can keep track of fairly complex flows and branches visually rather than by naming conventions. You can also engage interactive elements by click and drag.Our group was impressed by its price and UI, but thought it lacked some key interactions such as enterable text fields and had a limited set of widgets. So it’s good but not quite a hit.
Proto.io
Anecdotally Proto.io was of chosen by the agency Digitas over a mature contender like Axure. This bore out in our testing as well, with it the clear favorite. While it still had a learning curve, the results were very strong, and the ability to mockup fairly complex interactions gave the prototypes made in it a clear advantage in telling the user story.
- Good set of functions, more added everyday.
- Lots of design choices including a great icon and pattern library.
- It allows for icon creation that shows up properly in the icon dock, including retina
- Allows for setting and logic based on variables (pieces of code that hold user input or login state)
- Excellent transitions (animations)
- Allows layers or overlays
- Undo and versions and autosave are well implemented
- Support for flipping orientations
Negatives
- Costly, Almost as much as the monthly Adobe Creative suite subscription
- UI not completely intuitive
- Have to deal with one screen at a time
- Naming and screen selection could be easier
- Limited tutorials
- Some glitches in copy/pasting
I hope to show some of the prototypes we made in the comment section, till then there are plenty of tools still waiting in the wings with more added everyday to try (see Protomoto). I’m interested in Justinmind, Flairbuilder, Xiffe, AppCooker (an iPad based prototyping application) and Protoshare for the next round. If you have any suggestions or comments, please share!