By
Tristan Plank
Crafting a useful, usable, and beautiful app takes a lot of work and a willingness to throw your designs out the window again and again until you get things right. Even if you get that far, there are usually at least five other apps out there that already do what yours does. Why is yours better? What sets it apart?
Lately I have been paying a lot more attention to the little things that my favorite apps throw in to guide or enhance my experience. These are often the little things that push an app from the realm of just usable to delightful. In most cases, these little delightful details revolve around the animations and refined microinteractions peppered throughout an app, like a clever transition from one screen to the next or a whimsical refresh animation that makes me chuckle (or even better, makes me want to do it again, but just a little more slowly so I can see how they pieced the animation together).
Designer and author Dan Saffer has led the rallying cry for the importance of microinteractions, and I highly recommend his book on the subject. I think he boils down the importance of these little atomic experiences in the following quote:
Microinteractions are, despite their small size and near-invisibility, incredibly important. The difference between a product you love and a product you tolerate is often the microinteractions you have with it. They can make our lives easier, more fun, and just more interesting if done well. – Dan Saffer
The funny thing about these little details and highly polished moments is that you come to expect them after you’ve experienced them a few times. After using a well-crafted app that employs thoughtful transitions and animations, I feel disappointed when I use other apps that didn’t put in the effort. The bar is raised when I use a product that sweats the details. While this concept is not new, there are still plenty of decent apps out there that could benefit dramatically from going the extra mile. Fortunately, I anticipate a heightened focus on these types of details in the future as I look to the design direction being driven by companies like Google and Apple. For example, one of the core principles of Google’s new Material Design language is “Motion Provides Meaning.”
Motion Provides Meaning: Motion is meaningful and appropriate, serving to focus attention and maintain continuity. Feedback is subtle yet clear. Transitions are efficient yet coherent. – Material Design > Introduction, Google
Principles like this are great news for the design of future apps because it means that well-crafted animations and transitions will (hopefully) no longer be just the “cherry on top” for a design, but will actually drive the core design of an experience. The importance of microinteractions is being brought to the forefront. And Material Design doesn’t just stop there; it also touches on the idea of delighting. Part of the Material Design’s guidance includes a section titled Delightful Details. Here, Google hits the nail on the head in regards to the importance of animation and and transitions.
An app can truly delight a user when animation is used in ways beyond the obvious. A menu icon that becomes an arrow or playback controls that seamlessly change from one to the other serve dual functions: to inform the user and to imbue your app with a moment of wonder and a sense of superb craftsmanship. Users do notice such small details. – Material Design > Delightful Details, Google
Google isn’t the only one with design principles that put animation and transitions on the forefront of design when it comes to mobile apps. Apple has been a design leader for a long time now, and iOS is now on its 8th major iteration. Apple’s iOS Human Interface Guidelines (that’s a mouthful) also include design guidance on the topic of animation. It takes a bit more digging to find it, but Apple says the following about using animation in iOS 8:
Beautiful, subtle animation pervades the iOS UI and makes the app experience more engaging and dynamic. Appropriate animation can:
– Communicate status and provide feedback
– Enhance the sense of direct manipulation
– Help people visualize the results of their actions – iOS Human Interface Guidelines > UI Design Basics, Apple
While both companies seem to be driving at a similar idea, it’s interesting to compare Apple’s guidance on animation design to Google’s. I daresay that Google seems to be leading the design thinking in this area. Google’s Material Design language drives at the idea that things like animations and thoughtful transitions should be an inherent part of the design in order to provide meaningful, delightful experiences. In contrast, Apple’s design guidelines feel much more cautious and only recommend using animation in the “appropriate circumstances.” To Google, all circumstances are the appropriate circumstances. Take a look at the following excerpts, and note the different tone from the two companies when it comes to the use of designed animations and transitions in apps.
Apple: Add animation cautiously, especially in apps that don’t provide an immersive experience. – iOS Human Interface Guidelines > UI Design Basics, Apple
Google: Animation can exist within all components of an app and at all scales, from finely detailed icons to key transitions and actions. All elements work together to construct a seamless experience and a beautiful, functional app. – Material Design > Delightful Details, Google
While there may be some stark differences between the design guidelines of these two heavy hitters, what’s most important is that we are beginning to see an increased priority in the design of refined microinteractions and details that delight us — not only in apps for our phones, but in other software and on the web. With Google and Apple leading the charge here, I don’t doubt that the rest of the industry will follow suit, and even improve upon the great design we are already starting to see.
This doesn’t mean there aren’t some stumbling blocks along the way, however. The next challenge I foresee will be equipping designers with the tools they need to craft these refined interactions. Designing and prototyping for gestures has been a challenge for a long time, and designing authentic motion (i.e., motion that feels natural) and smooth, intuitive transitions is also no easy process. The current tools used for animation and motion design present a steep learning curve for designers that are used to working in wireframing and visual design software. While some designers are using old-school hacks like Keynote, new tools are beginning to emerge, like Facebook’s Origami toolkit for Quartz Composer and Pixate. These options still leave plenty to be desired, and I am excited to see who comes out with the next great interaction design tool that allows designers to craft delightful transitions and animations into the core of their apps.
Tristan is a proud member of the interaction design crew at Blink. In his off time he can be found sipping a cortado at Caffé Fiore in Queen Anne or taste-testing local IPAs in Fremont & Ballard.