Hidden Low Fidelity Wireframes - Figma
For this semester, I require a low fidelity prototype. So far I have well developed wireframes - less focus on the design just yet, more focus on the content that needs to go into each of these screens. However, to visualise these screens working together I need to start prototyping, considering the macro and micro-interactions that will occur. I've looked a bit at this previously when sketching up my screen layouts, considering the interactions that could occur using the paper 'foam fingers'.
Interactions can be defined as macro-interactions or micro-interactions. Macro-interactions are the transitions that occur between screens or between elements on the same screen (eg. user moves to different screen), whereas micro-interactions occur when the user interacts with an element (eg. user presses the like button, what feedback is returned), these micro-interactions can create delightful experiences. At the moment, I'm focusing on the macro-interactions that should occur between my different screens. I'll explore more of micro-interactions, motion design and animation next semester as I move towards a more high fidelity prototype.
Figma offer a wide range of transitions between screens, ones I'm focusing on include dissolve, slide in/out and particularly the smart animate feature. I'm used the the auto-animate feature from Adobe XD which works very much the same to Figma's therefore it's quite easy to get the hang of. These interactions make the prototype more life like and greatly improves the user experience.
There are lots of helpful sources about macro-interactions available online, ones I found useful for transition do's and dont's include;
The ultimate guide to proper use of animation in UX - Medium
Good to great UI animation tips - Medium
Motion design doesn't have to be hard - Medium
They both provide various examples for how to produce the best transitions, focusing on element speed and position. I can definitely add some of these examples to my prototype.
Hidden Low Fidelity Prototype - Figma
Developing the low fidelity wireframes into a prototype has required me to add even more screens to Hidden's app. A few I hadn't considered before as they are secondary or connecting screens that are needed for that smooth flow throughout the platform. Others have been added for transition purposes, almost reaching 100 screens at this point.
Doing my prototype this way round, in that I focus on the content first, has really enabled me to consider the user's flow in great detail. I expect this will make it much easier for me to develop a high fidelity prototype as it will hopefully be the case of just slotting in my icons and illustrations (once they are complete) with little adjustments. Therefore I can start testing the version one prototype with users as soon as possible, leaving myself plenty of time for iterations.