Prototyping, for real ?
Prototyping apps or websites is said in countless blogs to helping designers, developpers, product managers and owners to produce the right thing with minimal hassle.
Or at least less than in the old way of building static mockups, explaining them along the production chain, and sometimes, move backward late in the process.
For real ?
When to prototype
Prototyping, in its broader sense is about building a rough fake version of a product to help understand it.
In the case of an app or a website, it can be a wireframe, an interactive wireframe, an interactive mockup or a (semi) functionnal prototype.
When the app or the website and / or its budget and / or its lifetime are small, refined prototypes are too expensive.
As a rule of thumb, here are common situtations and matching prototypes solutions :
- User flow, global understanding, mature audience (project managers, developpers) : interactive wireframe
- Complex user flow, non mature audience (clients, stakeholders), enough budget : interactive mockup
- Complex and specific interaction (new UX, reponsive reactions), enough budget : semi functionnal prototype
Prototyping tools
Interactive wireframe tool
- Users : project managers, designers
- End users : developpers, project managers, mature clients
- Output : pdf file, html website
- Axure : robust, medium learning curve, export as html
- Balsamiq : ligher, easy to use, cloud or not, no export (maybe via plugins, did not try)
Interactive mockup tool
- Users : project managers, designers
- End users : developers, project managers, clients
- Output : html website
- Invision : very easy, cloud, Photoshop auto slicing and sycing, comments
Semi functionnal prototype tool
- Users : designers with light to medium dev (js) skills, developpers
- End users : developers, project managers, clients
- Output : prototype website
- FramerJS : convenient framework (animation helpers, states machine, coffee or js), Photoshop auto slicing
Conclusions
As we realized, it is actually possible to prototype and yield time and noise savings.
It’s just about using the right protootype tool for the right context.
