Animation is a very powerful ally to our digital design efforts. It used to be just a fancy addition to websites, and later apps – when designers were exploring new technological possibilities. This resulted in unnecessary decorative animations which obstructed and annoyed the user, rather than becoming a visual treat or a user experience improvement.

Today, animation is regularly embraced by app designers and developers because present platforms allow us to be very creative with it. The boundaries have been, and are being elevated on a daily basis. We no longer have to be worried about adding extra kilobytes or processor strength each time we decide to put an UI element to life, whether it is the whole layout or just a single button.

During the last decade it is even easier to research and expand our creativity with animation due to flat design style appearance. It opens up more space for organic style animation generated directly by code instead of rendering whole surfaces in Adobe AfterEffects or Flash. Further, clean icon and button styles or layout sheets can be animated to bounce, stretch, stick or even transform to other shapes – which all together help us make a great user experience.

Animation: How — When — Why?

Let’s divide the usage of user interface animation in four categories:

  • User navigation and control
  • Content hierarchy
  • Process status
  • Marketing purposes and delight

User navigation and control

We need to put all of our efforts into making the user comfortable whilst using the app. One must have control over it and know exactly where he is at each moment, and that is where animation can help a lot.

If there are unusual actions and gestures in the app, it might be useful to throw in a few short and clean tips upon opening the app. This way the user immediately completes a simple tutorial. For example, gestures can be shown with wiggling an element (card swipe left/right, up/down or navigation between app parts) just with swiping instead of having tabbar or menu button.

Sometimes all we need is to reveal a hidden “search” feature by slightly dropping it down and pulling it back under the header bar, in which case the user is aware of search appearing on “swipe down” gesture. The other option is to place hints inside the app which appear only the first time user comes across that specific element, such as onboarding tutorials or slightly animated arrow with short description pointing at the element it describes.

An interesting way of showing the user that his action is confirmed is transitioning an element to a specific place or expanding over the whole screen. For example, when you open an item (article, info etc.) its thumb expands to the main image and the rest appears under it.

In case we want to bring user’s attention to an element, we can highlight it by quick opacity variation or applying a simple “pulse” animation by scaling an icon. This can also be used as visual feedback when an action is finished, for example when a submenu closes or an item is saved/added to user’s feed of some kind.

Content hierarchy

Elements on the screen are arranged in layers, one sitting on top of the other. Regardless of the content type — background images, shapes, patterns, labels, paragraphs, buttons or icons, cards or any other UI element, by animating the order of their appearance, we are able to emphasize the importance of a specific element and direction the user’s focus.

For example, layout elements appear on screen with subtle movement or animating the opacity value, but the last element to appear is an icon. This suggests it is also the most important action on that specific screen (e.g. the “add” button on a favorites list, share action on profiles etc.).

One shouldn’t overthink it and should try to stay within the boundaries of simplicity. Sometimes all we need is a simple transition from one screen to another, covering the previous screen.

Process status

There are often features which require data processing and, in that case, the user has to wait a few seconds until it is completed. We want to keep the user inside the app and at the same time inform him at which point of the loading/processing status he is. This opens an opportunity to implement interesting designs using animated brand elements, instead of the default boring loader.

Splash screen is the first step where the user might have to wait a few seconds. Why not try to make something really creative and interesting out of it? Just by creating an animated icon or brand logo we can elevate the user’s first impression of both the app and the brand to a higher level. A great side effect is that the waiting period will become a lot more interesting.

Progress bars are useful to the user because they show not only that the action is still processing but also the exact percentage of processed and remaining time. So again, instead of a classic and boring looped radial loader, why don’t we go the extra mile and reuse the header, cell or a list item background as the progress bar? There are many creative ways to show the progress bar, we just need to explore it and put some effort in it.

Marketing purposes and “WOW” effect

Sometimes we want to bring screens to life just by adding simple animations to it. This way we make the user have a better impression of the brand and make the whole experience more fun and interesting.

Some examples would include parallax effect (image and text area while scrolling, gallery items, cards etc.), animating background patterns, transforming icons, making brand elements appear throughout the app or even animating a mascot, if there is one.

Where the magic happens

Each time we come up with an idea for animation, we have to transfer it on screen. There are two types of animated deliverables from a designer’s point of view — firstly, those used for presentation (to a client or your team) and preview purposes (later to be recreated by developers; usually just rendered video files), and secondly, those exported for direct implementation, such as PNG sequences, Quicktime movies, GIFs etc.

Let’s check two interesting tools for creating animations can offer — Adobe AfterEffects and Flash, and what they can offer. There are good and bad sides of both if comparing the two, so let us check out some of the basic stuff:


AfterEffects

Good: Infinite possibilities, importing of prepared assets from Illustrator and Photoshop, precise control over assets and timeline by using null objects and simple parenting features, easy to make 3D simulations

Bad: In order to modify source asset (in case the layout is not recreated from scratch inside AfterEffects), we must open the source file in its native software and change it in there.


Flash

Good: Copy/paste possible directly from Illustrator. This way we have live vector shapes inside Flash which can be modified directly. ActionScript makes interaction possible.

Bad: Restricted technical possibilities and timeline control, bugs, crashes, complex elements from Illustrator (such as effects or gradients) often fall apart while copied into Flash

Although both can be used for UI animation purposes, I personally prefer AfterEffects.
The workflow, technical possibilities, plugins and output process makes it easy for me to create whatever I imagine relatively quick, not to mention having fun at the same time.

Every project is a new chance to improve and learn something new, both in the creative and in technical way. It was a delight when Google released the “Component sticker sheets for Adobe AfterEffects” because it makes workflow more precise and a lot faster.

Conclusion

Embrace animation into your daily projects. Think about final user’s needs and how you can enhance one’s experience while using your product. Keep animations as short as possible because unnecessary details and waiting time will annoy the user.
Don’t overthink it, just make it simple and interesting. It is all about the user experience, not visual effects for it’s own sake.

Technology never stops evolving and neither should you as a designer. Each time there is a technological novelty, either software or hardware related, new possibilities are opened for creativity and making design and user experience boost to higher levels.
Expand your creative field, get into animation software and breath life into user interface!

0 comments