Prototyping is a speedy creation of a full-scale model that helps evaluate a product without investing in actual development.
- It promotes effective communication
- Decreases development time
- Decrease chances of costly mistakes at later stages
But the temptation to build something out-of-the-ordinary, being exceptionally creative and unique prototypes, often steals time away from other important tasks and we end up making it a task big enough as developing a system without code.
Here are a few simple guidelines that could help in creating prototypes effectively.
#1 Prototypes should be “good enough”
Prototyping tools provide enough capabilities to build up an entire product without writing a single line of code.
Unfortunately at times when we are halfway through the project, confident enough, reality hits. Changes creep in and to keep pace with the time and requirements we break the flow down and a bunch of prototyping efforts is lost and rendered wasted leaving the original plan all messed up!
Your prototype doesn’t have to be pixel perfect and development ready, they just need to be good enough to convey the thoughts as a visual representation.
Remember, the main purpose of prototypes is to always help stakeholders visualize the requirements & gain quick feedback to eventually move forward with actual designs.
Restricting the scope of each prototype frees you to focus on what is most required at the point of time.
Get things looking good enough and move forward.
#2 Prototypes should have a clearly defined goal
While rapid prototyping, it is good to have a purpose or a goal in mind. These can be
- Gain customer feedback
- Present and convey organizational plans
- Share project ideas with potential clients and prospects
- Help UI designers know the project better
Knowing the purpose of the prototype clearly helps you define the project scope and determining how detailed the prototypes should be.
Rough sketches help you move faster. A lot of tools such as Balsamiq, Sketch, Moqups provide this ability to quickly sketch a prototype with lo-fi (low fidelity). This brings up to our next point.
#3 Always try to determine prototype fidelity at earlier stages
It is always helpful to determine the fidelity of the prototypes in advance to save plenty of time at later stages where more focus should be given on team communications and understanding development efforts. A clear picture of what is to be done determines the prototyping cost and efforts as well.
The fidelity could be identified as
- Low fidelity (lo-fi)
Use: Give insight of all the features and content for the project
Traits: Sketches, black and white representation
- Mid fidelity
Use: Considering as transitional phase that allows more flexibility, creativity and interaction
Traits: Sketch, black and white /color representation, interactions to make the navigational flow clearer
- High fidelity (hi-fi)
Use: Almost a replica of the exact design. A pixel-perfect version of what would actually look like when complete
Traits: Pixel-perfect in terms of color, margins, layout, dimensions, content, navigation, animations, etc.
The fidelity could be measured in following dimensions
- From project scope — what screens are required to be created?
- Do we need a quick sketchy mockups with lo-fi or mid fidelity or we need hi-fi?
- The content on the screens should be “real” or dummy content of ‘lorem ipsum” would go?
- Do the navigation needs actual transition effects or animations or basic click based flow would work?
Agreeing early at the fidelity of prototypes could save from lengthy last minute discussions leaving the client disappointed.
#4 Test as you go
While creating prototypes, it is common that we put extra efforts to showcase the creativity and innovations. But while doing so often in the midway, we lose our rhythm, consistency, and sync between screens.
At the end of the task, it can be real hard to figure what exactly went wrong in the course of time, where the interaction is missed, where the consistency is lacking and it all ends up spending an entire day or even more time to correct the flow!
It is very important to “test the flow” continuously as you build the screens to get things done sooner and without errors.
#5 Reusable building blocks
Prototyping has become a lot easier with modern tools available to provide several techniques that help improve the productivity. In most of the popular tools there are options to create styles and symbols which can then be reused very easily.
For e.g. in Balsamiq tool, it is very easy to create a symbol.
Just select the elements -> Convert into symbols -> Name the symbol. The symbols file is then created which can be directly used as widgets.
This 10 minutes initial time consuming task will definitely help in subsequent cycles by saving hours of rework. An update in symbols file will update all the occurrences at just one go! Saving a good amount of time, isn’t it?
There is no alternative to hard work. But, being smart can boost the work hard which can empower you to be innovative rather than being repetitive!
#6 Share the prototypes — early and often
Share your wireframes early and often with the involved stakeholders. Continuous collaboration always helps in building a better product.
Collecting feedback frequently helps in identifying missing details and even feasibility of the components in terms of development.
There are many tools that help collaborate easily like Trello, Slack, etc. For example, a popular tool InVision provides real-time collaboration to be ahead of time always.
Create a solid base with effective prototypes to collect customer feedback, improve the processes and always be in right direction. Hope these guidelines might help you in saving a good deal of time, cost and efforts.
Happy Prototyping!
The article was published originally on Medium.com by surbhimahnot