Email iconarrow-down-circleGroup 8Path 3arrow-rightGroup 4arrow-rightGroup 4Combined ShapeUntitled 2Untitled 2Path 3ozFill 166crosscupcake-icondribbble iconGroupPage 1GitHamburgerPage 1Page 1LinkedInOval 1Page 1Email iconphone iconPodcast ctaPodcastpushpinblog icon copy 2 + Bitmap Copy 2Fill 1medal copy 3Group 7twitter icontwitter iconPage 1

Quick links

Introduction

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.

user testing with lookback

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.

Origami

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’.

prototyping with Origami Studio

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’.

After Effects

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

If you need to test a complex feature it’s best to identify these early and use Framer for everything; from design to prototyping. The design mode interface is very similar to Sketch which makes designing in the app feel familiar. But building your prototypes takes a little more time as Framer uses CoffeeScript: a programming language that transpiles into JavaScript. This may be easy for people to pick up who have some coding knowledge, but it isn’t a very transferable skill outside of Framer, which is a shame.

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.

Summary

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.

Think we can help? Get in touch.

If you like the sound of how we test out our design concepts on end users and you have an idea for a website, digital product or online service, we'd love to hear from you.

Share: