How did I make my first interactive screens with Invision
Wireframing is a fantastic tool to put all your ideas on paper and evaluate if they suit the process you are looking for for the user. However, although images help us a lot, interaction between them can give us a better idea about how the product might work. When we add interaction to our wireframes we are giving they live, and it is easier to see where are possible gaps in the process.
In this exercise, I was trying to put some point of interactivity into my wireframes of the emov app (if you want to read about my experience, click here). At the beginning, I only drawed a couple of screens. When I started prototyping, I realized how many connections could be between my screens and how many buttons without answers I was left in the previous step. I drawed 4 or 5 additional wireframes to make sense to the user experience. If you want to try my prototype, click here to access the project. If the workflow is well designed no instructions are needed, but just in case you feel lost, try to sign in or log in in the app, then change the filters on the map and look for the car you most like! :)
Some of the problems I’ve found in this activity are the following:
- First, there are some boxes that look fine in the prototype and become transparent when I upload them to Invision (e.g. main screen).
- Second, there are some interactions I find difficult to represent (e.g. how to select different options in the Filter screen with the turn on/off buttons).
- Third, some of the screens are oversized and I can’t see them properly. I should’ve checked first the dimensions of Invision!
- Fourth, the more I do, the more screens I want to add, this is a never ending story? is it common in UX/UI designers?
- Fifth, when I try to download the prototypes, I get them in huge dimensions while I prefer having some screens together in the same page.
As with other design programs, I should practice more to understand better the interface and the controls. I think Invision is easy to use, but it must have its tricks and I will learn it! :-)