- Testing user journeys
- Prototyping micro interactions and animations
- Prototyping complex features with Framer
When designing a new website or digital product it’s important to test your solutions on end users as soon as possible, and there’s lots of prototyping tools available to enable us to do this long before any software has been written. Whilst it may seem like a lot of time to spend at this stage, finding any pain points now means that we can make quick changes to the design, rather than making costly changes to the software.
Testing user journeys
If you need to test a new user journey for a website or app, using Marvel or InVision you can create a very realistic looking prototype. You import your screens then place clickable hotspots over the top which you use to link up pages. To really speed up your workflow, InVision and Marvel have Sketch plugins to import your artboards directly from Sketch. When testing on end users, the finished effect can look very real, especially if you take the time to add hover effects to buttons and clickable areas.
For remote users, or if you want recordings of your testing you can use Marvel or InVision alongside Lookback, which allows you to test using any URL. This tool records all user testing sessions and allows you add timestamped notes throughout the session, which is great as there’s a direct link between your notes and what the user is doing. As the sessions are recorded, any stakeholders need not be present (which can be off-putting for users) but then they can watch in their own time. If you have remote users, Lookback is great as you can send them the link and then watch what they’re doing in real time. The only downside to this is that the user needs to install a browser extension and also enable their camera, microphone and screen share, which could potentially limit the sample you’re able to test on.
Prototyping micro interactions and animations
If you’re looking to enhance an interface with animations, or add some micro interactions, then there are some great tools to help you mock these up really quickly. You could treat these as separate items and use After Effects, or if you want to show something in situ and make it look more realistic, then Facebook’s tool Origami can really excel here.
Coined the ‘perfect companion to Sketch’, importing your assets is as simple as copying them from your Sketch file and then pasting into Origami. Adding interactions and animations is easy to pick up as you use a combination of ‘patches’ that build up to create your desired effect; almost like ‘visual programming’.
Once you’ve pasted everything in, you need to adjust the X and Y coordinates of your assets to get them where you want them on the screen before you animate anything. Then you build up the animation step by step by adding patches. For example: on tap, turn on an animation that will last 0.3 seconds and will transition an element which is controlled by entering where the element will be at the end of the animation. So if you wanted to rotate something 45 degrees, you’ll add ‘45’ to the ‘end’ of the transition and link this to the associated X or Y ‘rotation’.
When working with After Effects the best thing to do is create a new folder to contain everything you want in your animation and save your assets to that folder. And never move them! Once you’ve done that and you’ve added them to your new project it’s easy to move them about and get them where you want them.
When it comes to adding motion, whilst the amount of timeline options may seem daunting, it’s actually pretty simple. Each asset has its own layer in the timeline, and to get started you need to click the arrow. Doing so will reveal the specific timeline for that layer which allows you to add keyframes.
Here, we’re dropping the elements into view, so we need to add keyframes to the ‘position’. You can add as many as you need, and also add other keyframes to manipulate any of the other aspects such as opacity, or rotation.
Prototyping complex features with Framer
To get started, you can copy and paste your assets into Framer, but any vectors will paste as an image, which can cause pixellation. Instead, it’s best to design your prototype in Framer, which feels very similar to designing in Sketch, even the keyboard shortcuts are the same.
Once you know what you want to be a target to trigger a state change, or animation, you select this layer in ‘design’ mode and then click ‘create target’. This will then add the element to your ‘code’ view, ready for you to add what comes next.
In the code view, this looks a little more like a usual IDE and is where you add CoffeeScript to bring your prototype to life. There’s loads of resources out there to get started, what’s best is to download some of their examples to figure on what’s going on and then just having a play with what you need to test.
What’s really great is that you can mimic inputs and have users type into the prototype, as they will with the real product. To make this even easier, there’s a keyboard module you can install which includes all of the iOS animations out of the box.
This example shows a basic onboarding flow, but the possibilities for complex user testing are huge, meaning you can validate much more than user journeys before releasing any software.
This may seem like a lot of time to spend on prototyping, but it’s a fraction of the time compared to implementing a large technical feature into your codebase only to find out that it needs to be changed.
The value in being able to quickly mock something to show any motion you envisage for your products is also huge, as by only using words, you run the risk of your client or developers visualising their interpretation.