RSS Feed
Blog posts  Blog RSS

Make Room for Motion Design

How incorporating motion design consideration into the web development process can improve UX

The technological landscape has been undergoing exponential evolution on various fronts in recent years. Much to the dismay or elation of modern web designers and developers, standards, techniques, and devices are constantly changing and new ones being introduced at what at times can, depending on one's temperament, feel like a hefty or exciting pace. The important thing to realize however is that to be an effective designer or developer one must respond to this shifting landscape in a forward thinking, proactive, open-minded, and informed manner. This perspective must be diligently observed if one wishes to deliver a worthy and relevant experience to the end user. It is essential to be cognizant of upcoming trends and adapt ones practices to fit the shifting paradigm appropriately.  

One aspect of the user experience coming to the forefront is motion design. Paul Stamatiou reported from this year’s Google I/O event that

“… the real news from Google I/O wasn't about Android or Material Design itself. It was Google's implicit announcement that motion design is now a huge, required component for creating great software for mobile, desktop and wearable devices. Motion was mentioned in every design session at I/O. This coming from what has historically been a developer-focused event."

To understand the relevance of this let’s take a quick look at how motion design can affect and inform the user experience.

Irrespective of the device one is using, when we are browsing the web for information we are often presented with massive amounts of data to sift through. Whether consciously or not, one must qualify that which we are presented with into valuable or valueless content in order to locate the best source of information from our query. This happens in a number of ways on a number of levels, but most immediately and perhaps most importantly we judge a site's merit based on the design. How the content is presented, if it is pleasant to read, whether or not there is consistency in the design, and how the elements of the site behave given our input all play a factor in determining how we qualify (and either accept or reject) a site. The Google design specification on responsive interaction notes that

"Responsive interaction builds trust with the user and engages them... Responsive interaction elevates an app from something that delivers information to the user upon request to something that communicates with the user in a tangible way."

Thus a site that responds to our actions in a sensible manner contributes to a pleasant experience. But what does it mean to interact responsively? Again the folks at Google have been kind enough to elucidate some of the sentiment by further suggesting that we can "add clarity to user initiated events by creating strong visual connections from user input, whether from fingers on a touch screen or voice through a microphone". The examples on the page demonstrate how clarity can in fact be enhanced through motion, and are worth checking out as it should be noted that there do exist best practices. There is a proper and improper way to add motion to the user experience. Indeed, the google spec indicates that

"A critical aspect of motion for material design is to retain the feeling of physicality without sacrificing elegance, simplicity, beauty, and the magic of a seamless user experience."

The take-away here is that motion is not meant to be added to a design willy-nilly, but must be undertaken with an obvious clarity of purpose and applied in a tasteful, sensible manner.  This leaves a bit of room for ambiguity and interpretation, but one thing is certian: As Paul Stamatiou concludes after attending the yearly Google I/O conference,

Times are changing. Things like page transitions will still exist but involve more of the elements on each page. You'll begin choreographing. In the next few years consideration for motion will be required to be a good citizen of your desktop/mobile/wearable/auto/couch platform. It will be an expected part of the design process just like people will begin to expect this level of activity and character in software. “

At this time we must ask ourselves how can we make the interactions for our users sensibly responsive?

Historically it has been difficult to incorporate motion design into our websites, as animation plugins can be buggy, fail in older browsers, display unevenly and inconsistently on different devices, and can be difficult to prototype. Although various tools (Abode Edge, Framer.js) do exist to help designers and developers incorporate motion and animation, nothing has really been convincingly established enough to become widely adopted.  Paul Stamatiou notes that "One of the popular questions at Google I/O design sessions was how designers should go about incorporating motion into their design process...In short — there was no good answer." Clearly we need something like what Jquery did for javascript specifically in the realm of motion design. 

Introducing velocity.js. This is an impressive, lightweight jQuery plugin that runs alongside and interoperably with JQuery, supports coffeescript syntax, and is cross-browser compliant from IE8++. It generates smooth, fast and consistent motion as demonstrated in the demos and is relatively easy and flexible to use, having abstracted animation to it's base components utilizing reliable methods from jQuery and CSS transformations. The opening animation for this post was made using velocity.

While velocity is mainly a developer tool and doesn't do much for design prototyping, it does give the tools to allow reliable animation to be safely introduced to the design process. It also helps to understand what's happening under the hood during all this animation, to better optimize one's code for the purposes needed. Here's a nice post worth reading which lays out how to optimize your animations to achieve a smooth 60 fps motion quality.

With a bit of team collaboration and knowledge sharing between designer and developer, perhaps the time has come when we can engender an environment for motion to be incorporated into the design process effectively.

Posted by on 7/10/2014 10:37:21 AM

Trackback URL: https://akanewmedia.com/trackback/904f028d-bca7-4d19-a6b1-36effc170d7d/Make-Room-for-Motion-Design.aspx?culture=en-US

Blog post currently doesn't have any comments.


Let's Talk
we deliver results that we can all take pride in.

Interactive & Branding Solutions

Matthew Myers
COO & Executive Vice President
416-323-1981 x 222


Online & Mobile Fundraising Platform
Haley Clift 
Business Development Director
416 323 1981 X 231

Human Resources

A.K.A. New Media Inc.
20 Maud Street, Suite 100
Toronto, Ontario, M5V 2M5

T    416 323 1981
F    416 323 1982
TF  866 766 3336

Top of Page