Designing for movement

As designers we often feel some pain while seeing our work passing through the gates of development. Our ideas – the nice interaction we wanted on menu tap, the transition as we hover an image – are usually not as we meant when they reach the final stage. We complain about it, but we don’t realize that if it happens it’s often our fault. We’ve been accustomed for years of working with mockups and other static comps, later switching to interactive prototypes created via Axure or similar tools. We lazily annotated the dynamic aspects to explain the interactions. Anyway, none of these methods is suited to document fine-tuned animations and transitions and hand them over to developers, but rather to describe the flow of the application or what we call macro-interactions. Anyway, why is going to the micro level important? Why we should care about these apparently futile and tiny details?

The rise of Dynamic design

The adoption of CSS3, trends like Flat Design and the release of newer mobile OSs are pushing designers to work more frequently with moving elements. One-page parallax scrolling sites, image blurring effects, shape morphing and a lot of other dynamic effects are more and more present in the standard designer’s toolbox. This isn’t just a designers fad to put some more fanciness in their work. Neither a new design trend. Animation and movements are instead deeply tied to human psychology: these are things to which we tend to react naturally. Designers use them to add the “emotional” touch to their work and connect to the user, but also to provide real added value for the experience. There are countless articles showing the importance of animation from a pure usability point of view. So, it’s clear how the value of static compositions is declining: thus it will be more and more important to build and communicate the dynamic nature of design we want to achieve. How can we do it? [youtube_sc url=https://www.youtube.com/watch?v=MyIE9vjy8Zo]

Filling the gaps

You’re designing a new eCommerce website: you made the sketches on paper, the wireframes and site maps with Axure, you added some rough interactivity, you did the pixel-perfect graphic design in Sketch. Now, you have in mind this beautiful slide transition with easing to switch products in the listing. Static deliverables illustrate the layout and detailed visual appearance of the page. Interactive prototypes can fulfill the (basic) needs of interaction design. What do we have in our toolbox to define the detailed dynamic aspects of the design i.e. animations, transitions and effects? There is no industry standard and this is mostly why we’re still struggling with this issue today. In the next chapter I will try to analyze some of the options that are available out there: obviously each one has it pros and cons and it’s suited for different needs. [NOTE: In this article I will use the terms animation and transition as they are the same thing, even if they hold slightly different meanings, at least in CSS3 specifications]

Mockups sequence

Taking from classical animation techniques, the easiest way to document dynamic design is to produce several mockups of the animated element showing a few discrete stages of the transition and annotating them if needed (with information about timing and easing, for example). It will be then up to who “reads” the mockups to interpret and interpolate the in-between. This works with really simple animations and may demand a lot of annotation to be effective. On the contrary, it cannot detail fine-tuned transitions and does not communicate well the very dynamic nature of what we want to create.

GIFs

A GIF is no more than a sequence of static images that are shown one after the other in loop to create a sense of animation. It’s a good solution that works in simple cases where no complex interactivity is needed. They can be easily created with programs we already use like Photoshop or Fireworks: in the latter you have the useful tweening option that lets you automatically create the interpolated images for the animation. They’re pretty good for documentation and they are easy to share on the web, since they can be seamlessly embedded in HTML pages. The main problem of this approach is that you can’t interact with a GIF, making it quite rigid (it shows only the intended sequence). Moreover, it could be demanding to create in case of long or complex animations.

States in Fireworks can be used as frames in animation. You can specify the Frame rate and use techniques like Onion skinning

Flash, After Effects (Animation programs)

Flash and other tools like AfterEffects have been for long time the natural choice for any designer willing to illustrate interface animations, because, well, they’re animation programs. They’re a pretty powerful solution that can cover most cases we may encounter and that can go to the finest level of detail. What is the issue? Well, these programs often have a steep learning curve (and some of them are being dropped, like Flash) and it may take a lot of time to produce what we need. Not all designers have these tools in their skill-set. Moreover, simulating real user interaction is not possible since the animation cannot react to user actions. Anyway, if you can use AfterEffects, you will be probably able to design any animation you may want.

HTML prototype

Live web code can be used to show how an interface should behave and react to user actions in an high-fidelity fashion. Indeed, if you’re not designing a native app, HTML prototypes are the closest artifact we could produce to document a web interaction. They can be created either by manually writing HTML/CSS/JS code or by using a WYSIWYG editor. The market for newer, responsive-friendly, web design applications is growing day by day: they let you create interfaces in a drag-n-drop fashion and then generate  semantic code that can be further manipulated. Examples include Macaw, Adobe Edge Reflow and Webflow. Not all interactions can be created with such a tool and there could still be the need to manually write code. This is actually the main (only?) issue with this solution, that needs more time and requires some technical skills for designers to be able to produce what they have in mind. Anywyay, there are many interesting framework for designing rich web animations, such as Framer.js.

Macaw, one of the most interesting amongst the new web design tools that have been released recently. It creates clean and semantic HTML/CSS code while letting you design in a pure visual fashion

Origami / Quartz Composer

Recently, Facebook released Paper, a mobile app designed to change the way we interact with our social feed. The app is stuffed with delightful micro-interactions that create a sense of awe in the user. More than that, in the design community, a lot of buzz was generated around the tool that the Facebook Design team built for the project: Origami. Created on top of Quartz Composer, an existing Apple application (released in the Mac OS X developer package), Origami is meant to solve the needs we’re talking about in this article. The ability to create really fine-tuned interactions that can react to user actions, without writing a single line of code is the main advantage of this solution. However, the logic behind the application requires some learning time (and a previous knowledge of Quartz would help a lot). Due to its novelty, there’s no much documentation available yet, even if there’s a very active community that can provide some support in case of issues.

Facebook Paper: a delightful showcase of micro-interactions and transitions

Wrapping up

As you may imagine, there is no one-size-fits-all solution, but rather an array of options from which we can choose, depending on the project needs. From simpler ones (GIFs, mockups sequence) to more complete and time-demanding ones (animation programs, coded prototypes, Origami) the choice is based on what we need to document and how much time we have at disposal. Personally speaking I’m thrilled by the possibilities offered by Origami and – after seeing some stunning work created  by the community – I decided to start learning and experimenting with it, hoping that better documentation will soon be released. Anyway – regardless of the tool we decide to use – we all need to realize that the dynamic nature of design (animations and transitions) can’t be neglected anymore as pure UI fanciness, but that rather it has to be considered an important aspect of our everyday design work. PS: do you know any tool that I didn’t mention? Comment here or on any Social Network.