Interactive prototyping: How to nail it
đ¤ Remember the Metallica song âNothing else mattersâ? We bet you do. And you know what, weâre pretty sure this song is somehow about interactive prototyping. Cause without it, nothing else matters.
Prototyping truly rocks when it comes to communicating product ideas and testing usability. Close to the final product, itâs an interactive model displaying particular states depending on the userâs actions.
Interactive prototyping benefits everyone involved in the project:
đ UX designers check the correctness of the flow and conduct testing.
đ Developers plan the scope of tasks.
đ The client understands how the final product will look.
So, with the enormous importance of this tool in mind, weâve gathered useful tips and tricks from our UX/UI Designer Ivanna Polischuk on cracking the code for successful prototyping.
Define the purpose
Discuss with the client the prototype usage. Will it be for A/B testing? Or maybe to showcase it to investors? She purpose defines the protoype structure, complexity, and level of detail.
Granularity vs Simplicity
Go for granularity if you need to demonstrate the final product or conduct A/B testing. Use scenarios where the interaction happens step by step without additional branching.
And stick to simplicity if youâre eager to use the prototype for developers solely.
Break the flow into blocks and use minimum effects when animating all elements.
Keep the size in mind
NOTE! The animated element must be in a frame of the optimal size for the user
to click. Itâs at least 24Ă24 for desktop and 42x42 for mobile.
Stick to the Animation Principles
Use the âcorrectâ speeds, smoothness, and acceleration for animations. Thus, you create a sense of realism and instant system response Check âDisneyâs 12 principles of animationâ for this info.
Remember about Limitations
Consider the productâs loading speed and cross-browser compatibility before
animating many flying 3D objects. Donât hesitate to talk to the client and developers about such a solution.
Explain
If the prototype is quite complex and you wonât demonstrate it, record a video
explaining how everything works. That will save the project manager so much bother.
