Prototyping tools of tomorrow
The prototyping landscape has seen many tools in the past couple of years. A lot has been talked and written about.
We‘ve seen tools of diverse natures —
- Patch Programming (Origami by Facebook, Form by Relative Wave, Avocado by IDEO etc.)
- WSIWYG (Pixate, Briefs, Proto.io, Prott etc.)
- Code Based (Framer, Prototyp, Fuse)
- Hotspot Based (InVision, Mockup.io, Adobe Comet, POP, Marvel, etc.)
..to name a few notable ones.
Not mentioning the long tail of many others that failed to gain traction; let alone those expensive and entreprisy ones like Azure, Indigo etc. The dawn of prototyping tools, Phase I as I’d like to call it, has seen various tool-makers test waters, trying to understand what the community really wants. Most tools so far have been mere good-to-haves.
The next phase is going to be a lot about tools finding a place in the main workflow. We just might find the Sketch of prototyping tools this year.
We will see the next breed of prototyping tools, that will genuinely try to be as Democratised by being convenient and habitual, as Simulated by utilizing device characteristics along with usage of real data and as Unfragmented by having a hovering-presence at every step of product solutioning. Prototyping tools of tomorrow will help iron out most of the product-design-dev collaboration wrinkles that exist today, making the designers more accountable and at a much better position to self-critique. By being closest to production-ready experience at an early stage, the prototyping tools will help dampen the subjective signals just enough to allow designers to have a lot more meaningful conversations with their product managers. Prototyping tools of tomorrow will thus empower design to be at a much stronger position at the table of stakeholders, as it would make designers much more pragmatic and informed on the ground.
1. Democratised
Entering the realms of ubiquity from the dark corners of niche.
The tools are becoming more and more WYSIWYG-y, so that the designers who happen to wear multiple hats in the product design process employ an approach/tool that helps them create prototypes without investing a lot of time & effort. For instance, most of the tools are now sporting the timeline for all your timing needs, so that you avoid painstakingly arbit trial and errors to get the Duration/Delay right. It also gives you a sense of how elements act-out relatively to each other.
Tool-makers are now moving toward Page-based interfaces over Layout-based ones. One such layout-based tool is Pixate. I used to use Pixate a lot. Like, a lot. And I had become fairly quick at it. But the very layout-based nature of the tool was holding me back. I had hit the roof. Nothing to take away from the tool, but it is, after a point, limiting. Which is true for almost all the layout-based tools.
Most of the tools we’ve seen so far have volumes of tutorials and FAQ-forums. So you see why they’ve failed. They’re unable to evolve themeselves into the ubiquity. For a tool to become commonplace, frankly there are many factors. But habit-forming convenience is the cornerstone to any form of democratisation.
The easier it is to prototype, the less attached you are to that one solution you took forever to prototype. We subconciously develop a strong bias toward our solution because we get afraid to let go of it and we almost get unreasonable at times defending the same. All because of the tool? Mostly.
2. Simulated
Tools need to establish setups that commission designing with/for device characteristics and real data
The ease of translation of the prototype into production code —
Designers sweat the details to get the nuances right while prototyping as much as they do with their ‘fit-and-finish’ of the UI screens, it’s their baby after all. But it kills many kittens to see the same prototype being poorly translated into actual product with all the parameters being jacked. And you should not leave these little big details to developer’s discretion anyway.
Not that tools like Form, Quartz Composer and Framer are bad but they certainly are laborious and you need to be a dedicated prototyper to justify the time you take to prototype the subject under test.
Because the animations/transitions you designed were complex enough, that you’d end up desinging again sitting with the developer in order to air-tight the execution.
So, the least a tool can do — is being well simulated yet fast and convenient to use. Flinto, Adobe Comet, Principle, Atomic & SilverFlows(now aquired by InVision) are such recent ones ballin’ in the neighbahood.
And I must mention that InVision has been on one heck of a rampage, trying to create a complete suite for designers of the digital. They’ve been on quite a shopping spree off-late acquiring niche tools like Macaw, Napkin and most recently SilverFlows. What’s more interesting is how InVision now has a diverse palette of 1) A web design tool that writes semantic HTML+CSS. 2) A tool that lets you prototype directly on phone. 3) A sketch plugin that let’s you prototype inside sketch. All this on top of their rock solid foundation they’ve built in the last couple of years. Uhh, the possibilities.
Napkin, particularly, is an interesting idea, as it opens up a completely new dimension of designing-on-the-device. All in the efforts to get higher in the fidelity of simulation.
The second part of simulation is working with Real Data.
The single most bad habit a designer can have, is working with beautifully crafted idealistic data — deviating and deflecting the ugliness of real data. Your spoonful of satisfaction won’t last long as you’ll see your bubbles pop when your design faces real data. Maybe if you knew the rough edges caused due to the usage of real constraints & edge cases, you could have filed it smooth? Because that is what your user sees; and you are the custodian of user empathy.
Don’t save yourselves from the ugliness. Save your users from it.
- Do you adjust the characters of the text just enough to maintain sufficient whitespace around the text body?
- Do you adjust the face inside that circular profile picture to create aesthetically well balanced counter-space?
- Do you fabricate your mocks with just the right combination of UI elements so that your design review with your director goes smooth?
Well, you need to stop doing this, and design tools need to help designers get rid of this sin that tops Designer’s Seven Deadly Sins.
Craft by InVision Labs is one such thought leader in this direction that rides on the ubiquity of sketch and helps designers work with real data effortlessly.
Craft is one good example of a simulation approach that is baked well into the main workflow. It is not one of those savvy methods like passing JSON files or calling APIs to primer the scraped data — that are mostly meant for hobbyists.
Tools of tomorrow need to establish simulation setups that make it easy for designers to work with device characteristics and real data.
3. Unfragmented
Prototyping is treated as a mere step to add more fidelity to your design solution. And that problem is partly because of the current state of the tools.
Prototyping as a state-of-mind, throughout.
Prototypes are meant to help you share, test and iterate your idea to make it as good as possible before you lock in. I can go on about how idealistic it is to be sketchy & scrappy in the prototyping phase, but this is not about that. It’s about the tool that helps you stay in the ‘prototyping’ state of mind throughout the process of solutioning. It’s about the tool that makes it convenient to share every edit you make instantly to cut down on the feedback loop with the stakeholders. The earlier you’re able to get the stakeholders involved, the earlier you unblock yourself and reach toward effective closure. The issue with treating prototyping as a step quite late in the design process is that you are in ‘polishing’ mode and you are not willing to break & examine your designs in order to stress test and validate.
And currently, we’ve built fairly discrete boundaries in our design processes namely Wireframing, Interaction Design, Visual Design & Prototyping. My reservation is not really with the distinct disciplines of design as much as it is with treating prototyping as a mere step at the fag end of the process to slip in couple of sugar coated flowery animations to distract the stakeholders from effectively reviewing the product.
Prototyping should help you arrive at a solution, and not refine your solution.
Imagine prototyping to be a design-police that always hovers over your designs and gives you an instant pulse-check on the holistic experience. Imagine one continuous space, where all the decision-making lives. One unfragmented continuos space.
Sharable Prototypes : Ease of Review
One of the main reasons why prototyping is pushed to much later in the process is the difficulty involved in sharing usable/experienceable prototypes with the stakeholders. The tools mostly require an app viewer, which generally are not the most user-friendly or ubiquitous enough to find themselves installed. They face the same test of installing another app from the appstore. Ease of consumption or experiencing a prototype is as important as any other other step in the process. It allows the reviewer to be context-aware as he/she is consuming the product on the very targeted device, just like the actual user.
The feedback is less skewed if the stakeholders review the experience on the device it is designed for. I see a lot of review sessions getting derailed due to the fact that we reviewed a mobile experience on a big screen. The behavioral discrepancies due to which, can sometimes lead the discussion board to marinate in trivial issues or even worse — overlook bigger usability hiccups.
But why do we still review our designs on bigger screens and not the targeted device? Cuz it’s easier. You just plug and play. The best one can do today is record videos or GIFs (which are also quite lossy and tedious to create), but you really can’t interact with them. Most of the mobile previewers are very clumsy and buggy. And, I can’t understand why most of the design tools do not provide previewers for Android yet. Is not supporting Android still in fashion?
Hence it’s imperative that prototyping tools of tomorrow make it drop-dead easy to share and consume interactable work-in-progress prototypes. A new industry standard file format, perhaps? You never know.
Good tools help us do our work faster. Better tools change the way we approach it. Prototyping tools of tomorrow have a lot to offer. And I’m really excited to see how things pan out.
