Rapid Prototyping with Proto.io for Better Interaction Design

February 10th, 2016 in Design & Branding 4 minute read

What is the best way of communicating interactivity clearly between team members? This is a question I find we’re asking more and more frequently as we work on more elaborate projects and place greater focus on interaction and animation. Historically we’ve always had a myriad of collaborative tools at our disposal for every other aspect of our web-based projects, but never anything truly simple to quickly communicate the answer to the question “how should X behave on Y device?”.

We love tools that speed up and simplify our day to day tasks, especially those that help bridge the inevitable gap between our designers and developers. We’ve used a handful of prototyping tools in the past to help gather feedback and perform testing on different platforms and devices, none of which have allowed for truly rapid mockups of animations and transitions during early stages of wireframing – especially when dealing with touch devices.

Hello Proto.io

Our first introduction to proto.io was when we stumbled across and subsequently trialled it a few months ago, initially just to see if it was a decent replacement for the existing prototyping tools we use, but quickly discovering it very easily filled other gaps in our prototyping process that really needed filling, as well as seamlessly integrating with other software packages we are already using. Proto boasts a large feature set, but we were immediately drawn to the animation features, which enable you to quickly build and test simple animations almost immediately on any device using their player app. For me, this is incredibly important, as I believe all decisions involving interaction and animation should be nailed down before going into production.

More importantly though, is the way everything is communicated to the user. Designers can use a drag and drop interface that is immediately familiar, and developers can build with confidence as the language used to prototype animations translates near perfectly into information that is immediately applicable in front end development. No confusion, and no running back to the original designer in an attempt to work out what was going through their head when the work was originally conceived.

I Want to Build a…

Let’s say I’m working on a lil’ web application, and from a functional perspective I know I need some form of drop down menu. I know what it’s primary function is, but need to communicate how it should behave when interacted with so this information can be nailed down before it goes into development, where making changes is more time consuming.

Proto.io Project Screen

Creating a new project is simple – once you hit the dashboard you can view any existing projects you have, as well as start a brand new one using predefined devices (you can also create new device presets), or you can use one of the preset project templates.

I’ve skipped over a few steps for the purpose of this demonstration, and jumped straight into a project I created to prototype a little drop down menu.

Project.io Project Editor

As you can see, I’ve got a little settings button in the top-right corner, as well as an off-canvas element at the very top of the screen. In this image you can also see how quick it is to access different layers and states, as well as the asset library.

States are what I’ve used for this example. The first state is basically the idle state, whereas state 2 is where the magic happens. I have bound the button in the top-right to jump to state 2 when interacted with, i.e. click or touch. You’ve got many other interaction events available too – such as swipe, pinch, and many more – all of which are incredibly useful when testing user experience on touch devices.

Proto.io Interaction Editor

As mentioned, tapping the button I’ve created jumps to state 2, which triggers the actual animations. I’ve bound two events to state 2, one for when you enter the state, one for when you leave. Entering state 2 moves the off-canvas rectangle into view, and leaving returns the rectangle to it’s original position. When you’re within the second state, tapping the top-right button returns you to the first state – essentially a toggle.

Quick to Create, Even Quicker to Test

All of the above took no more than 5 minutes from creating a new project to having a working prototype to demo. Once you’re done, you can immediately test in the browser or on your mobile device, allowing you to quickly make little changes and re-test until you get it just right.

Proto.io Player App

Carefully considered interaction design can help create an experience that users will keep coming back to. Users don’t want to be fighting against a poorly designed or inconsistent user interface, so the more focus that is placed or creating an intuitive experience from start to finish, the more likely a user is to return to your website or app – as well as suggest it to their friends and family! Good prototyping tools – such as proto.io – help limit any headaches that may creep up on you when designing such systems, and maybe most importantly, they allow you to spend your time more efficiently when doing so.

More from the Blog