What is functional anyway?
Functional Animation

Reading time: 2 minutes
eye-animation

A friend of mine recently reinforced to me the sentiment behind the old adage everyone thinks they’re a designer, after I simply made the banal statement that a designer needs to be able to defend her design, by emphatically responding to me with “that’s impossible.” My friend’s rationale was so far off the mark that he reasoned the impossibility lies in that everyone’s perspective is so different that if you ask five different people their opinion of the same design, you’ll get five completely different answers.

I know — D.E.E.P. B.R.E.A.T.H.

Be that as it may, that has absolutely NOTHING to do with the creator of a design being able to articulate why she chose the hierarchy, the focal points, the visual weight, contrast, spacing, colors, typeface, and application of various Gestalt principles in her design. Whether anyone else agrees or disagrees is beside the point, which was designers need to be able to defend their designs because design, unlike art, needs to solve a problem. Therefore, you better be able to convey why and how you believe your design does so, especially if your design is for someone else.

As frustrating as it was that I failed to convince my friend of that (or of anything really) during this 60 second conversation, it did remind me of how delicate it can be to talk design with someone who has dedicated nearly nothing of their life toward the principles of design, yet still behaves as an authority on the subject.

INTERACTION

When it comes to web design, in my experience, there isn’t enough thought put into the interactive affordances that make a good design a great design. Designers love to debate about flat design vs. material design, link colors, button styles, vertical rhythm, typography — all good topics, mind you. But too often when it comes to animation, the motivation behind it becomes “that’s cool!” To borrow from the Oscar nominated film Whiplash, there are no two words in the English language more harmful to web design than “that’s cool!” (was “good job” in the movie).

Functional animation is animation with logical purpose. A great reference that speaks to this is an article by Amit Daliot on Smashing Magazine where he talks about nine categories of functional animation.

  • Orientation – Avoid a surprising transition and orient the user
  • Same Location New Action – Emphasize a functional change in an action button
  • Zoom In – Associate a thumbnail with its detailed view
  • Visual Hint – Hint to exhibit unconventional functionality or a hidden action
  • Highlight – Grab the user’s attention, and rise above a noisy layout
  • Simulation – Simulate topics that are otherwise hard to convey
  • Visual Feedback – Acknowledge the user’s action
  • System Status – Impart a sense of control in a linear process
  • Marketing Tool – Support a company’s brand values or highlight a product’s strengths

If you check out the article in full depth, you’ll gain a very nice appreciation for how animation can be very practical in enhancing people’s digital experiences. And if it happens to be “cool” along the way, so be it, but only so long as it serves a logical purpose.