In the last 10 years, we’ve seen a handful of interface tendencies come and go. The very first buttons were decorated with brutal gradients and coarse drop shadows to give it a 3D feel, before we jointly decided that ‘skeuomorphism’ made little sense in digital controls.
Along came ‘flat design’ with its high contrasts, minimalistic geometry and in particular; lack of depth in interfaces.
Meet me halfway
There’s pretty much always a compromise between opposites. Simply put; what’s medium without small and large? Through the years I notice subtle changes where 3D and flat are successfully combined, including the power of motion.
All users secretly aspire to find the big green button floating on top of the platform. Even more if it’s frequently jiggling to draw our attention.
Adding motion to flat design
It’s perfectly possible to create a 3D experience without using complex gradients and heavy drop shadows.
2D in 3D
Mark Pearson’s project ‘Dots’ gained popularity on Dribbble and Behance over the last couple of years. Mark cleverly demonstrates how to establish a 3D experience by merely using color and motion. No shadows, no gradients. The attached gif is an evident demonstration.
Material Motion
Is material design the ultimate combination of flatness and depth? It’s definitely moving in the right direction. Last year Google launched their ‘Motion Guidelines’, pushing micro-interactions to the next level by combining physics and motion.
These are not just some moving shapes. They have certain behaviours and respond to the laws of nature (e.g. gravity).
Emotion and personality
A brand can really profit from a designer that understands the physics and psychology of interaction design. For instance, we’re able to show personality by making certain elements mimic human emotions.
More and more I’m stumbling on an example of is this ‘invalid login’ animation, impersonating someone shaking his head for disagreeing.
A universal gesture, perfectly applicable for user interfaces.
Guiding the user
Perhaps the most important function for animation is guidance. Although at first it might seem decorative, an animation well-done is essential in helping the user get through the interface.
Amit Daliot wrote a great article about 9 groups of animation functions. Among others; Orientation, Zoom, Hints and Feedback, each with obvious video examples.
Another common example is the zoom function that’s being applied for initiating a new action or, in the following example, showing a detail view.
Wrapping it up
There’s no specific need for a skeuomorphic appearance, we’re able to use motion for a better understanding of the interface and its elements. To get the most out of your UI, make sure the animations have a function. Like in the physical world, interactions are meaningful.
Quick Tip: To make sure your interaction design is meaningful, use this checklist: http://ixdchecklist.com/
