Bridging the interaction gap

Interaction and animation are not new concepts, and yet there is still a distinct gap in the workflow when translating from design concept to build. 

Some of our first digital experiences relied on animation and interaction principles to help us understand that ‘things are working’; these were instrumental in how we adopted digital. 

We’ve all stared at a loading bar slowly filling up pixel by pixel and wondered if the task we’re waiting for is still in progress or whether we have to pull the plug and try again. The behaviour of the loading bar was to signify incremental change, processing how complete or how much there is left to complete. It is one of my earliest digital memories; waiting for something to install. 

Since the time of floppy disks and dial-up, interaction has increasingly been used to assist the user. Not only with usability, but also with storytelling, and providing more engaging digital experiences. 

Interaction design and animation are no longer ‘nice to haves’ within a project, but are fast becoming an expectation, such as research or design. 

There’s just one problem: the workflow and handover between creative to development teams. 

How can development accurately build and deliver the creative vision, if the tools needed to collaborate and share that vision do not exist? How can we work around this and still deliver excellence? 

Tools.

Since creatives started to turn away from the creative suite and towards more practical tools such as Sketch, Figma or Affinity designer, there’s been a rise of plugins and bridging applications that claim to cover the interaction space between design and build so that creatives and developers can work from a single source file, or creatives can share code ready for development. 

Great! That sounds perfect. Or does it? 

At Deeson we’ve tried out quite a few of these plugins and bridging apps and, sadly, this just isn’t the case. 

While they work well for isolated interactions, such as burger menus or button hover states, we are still looking for a tool that supports both the needs of our creatives and developers.

To achieve visual excellence and bring the vision to life, we have been focusing on using the most powerful tool we own: collaboration. 

Collaboration.

Recently, the Deeson team worked on a campaign for Burger King that was developed using animation and interaction to illustrate not only the campaign message but also deliver a premium digital experience. 

We created motion assets of the concept and shared them with the developers from the initial concept phase so that the whole team could see the creative vision. 

It was important for both design and development to understand what was possible - where there were risks to eliminate or enhancements we could make - to allow both disciplines to focus on their capabilities and deliver the work together. 

To really craft the subtleties and nuances of the creative concept, but also ensure our code was exceptional, the creative and development teams paired together to ensure each motion and movement were as equal in quality to the code itself. 

Using the motion assets as a guideline, and keeping the collaboration open and transparent, we found that this process was not only rewarding but also delivered immediate value when translating it into reality: refining the creative to match the vision across all devices. 

What did we learn?

While there is no ‘one tool’ to bridge the gap, I don't think we need it yet. 

There is room in every workflow for automation, but our best work by far is when we work together in collaboration, using our own expertise and knowledge. Do we really need a program to decide the best and most efficient way to deliver an interactive piece of design? 

Not any time soon.