Author Archives: admin

About admin

Designer by day, designer by night.
  1. How to get from a blank canvas to UI animation

    Leave a Comment

    How on earth do you get animations out of your head and onto a screen? What properties or values need to change to execute your idea? Try describing it and you’ll find it’s tough. Waving your hands around won’t help much either. So if you want to communicate your intentions clearly you’re going to have to understand how animations breakdown and what exactly is happening at each step.

    The best place to start is by looking at examples. And the best place for examples I’ve found is CAPPTIVATE.co. If you look closely at the various animations listed on that site and examine them carefully you’ll start to see patterns emerge. The same effects are being executed over and over again. And the majority of those effects are being created by manipulating just 3 properties: position, opacity and scale. Let’s define these properties.

    1. Position is the X and Y coordinates of an item on screen. Every element has a position and that can be changed over time.
    2. Opacity is the alpha transparency of an element. It can range from from 0 which is invisible to 100% which is opaque.
    3. Scale is the size of an item relative to its actual size. A scale of .5 means the item is half it’s actual size.

    With just these 3 properties it’s possible to create some very effective UI animations. Lets take a look at a simple example: an iOS modal alert.

    Hover + hold to play and loop the video

    This is a simple animation. But it’s a good example of changing two different properties (scale and opacity) to produce one effect.

    If you look closely at what’s happening, it breaks down like this: the modal starts at a scale larger than it’s original size and is animated down. At the same time the modal’s opacity is animated from 0 to 100%. And that’s it. Simple but effective. And much better than abruptly shoving a modal window into the centre of the screen.

    Here’s another example:

    Hover + hold to play and loop the video

    In this example a panel slides in from the bottom of the screen and is positioned on top of the product detail panel. This paper overlay effect is produced by manipulating the panel’s position, specifically it’s y coordinate which is increased. The effect is enhanced by reducing the scale of the background and animating it’s opacity down to 80%.

    This is a neat animation effect which gently guides the user into the new UI screen with ease. Again it’s a simple animation but an effective one.

    Lets take it up a notch and look at an example that has a lot more going on.

    Hover + hold to play and loop the video

    This animation has more scenes, more motion and more elements whizzing around and changing position but if you look closely and examine what’s actually happening at each step it’s still just 3 properties being manipulated, our good friends opacity, scale and position.

    If you’ve followed along diligently to this point you’ll no doubt have noticed a strange thing: the rate at which animation properties are changing is not consistent. Certain steps in the animation are executing at a faster rate than others. This is due to timing. And timing of animation is exactly what I’m going to explain in my next post for this series.

  2. UI Motion Design: Examples from the field

    Leave a Comment

    In this post I want to document some thoughts on the purpose of a number of UI motion design examples I’ve come across. I’ve pulled most of the examples below from the rather excellent capptivate.co. If you’re interested in UI motion design this site is a gold mine and well worth a bookmark.

    iOS 7 Calendar app animations, from BeyondKinetic.

    First up, Calendar app for iOS. It’s a great example of a transition which helps to guide a user into a new UI screen. By implementing a zooming animation to switch between UI states a user really gets the sense that they are drilling down to a deeper level.

    Hover + hold to play and loop the video

    This step-by-step build-in animation is an excellent example of how animation can be used to control a users attention. By animating each element separately the user is forced to visually focus on one element at a time. It’s also more visually interesting than animating in each screen one after the other. Word of warning though, by their nature step-by-step animations take longer which is annoying if repeated a number of times in the same app.

    Hover + hold to play and loop the video

    Yelp uses an animated transition to orient the user and help them understand the app’s navigation structure. When the user taps on the star icon, and the action panel is brought forward, the list interface is scaled back. Note that the list interface is still visible, by keeping the previous screen in view the user won’t feel disoriented and will have a better understanding of how to return to the initial state.

    Hover + hold to play and loop the video

    Facebook’s Paper has some great examples of animations that are used to help orient a user. In the example above when the globe icon is tapped a Notification panel slides out from under the icon. This transition clearly indicates that this content is always located there, tucked away behind the globe only a tap away.

    Hover + hold to play and loop the video

    Here animation is used to reinforce a mental model of the app’s navigational flow. Notice how when you slide content up from the bottom of the screen, it is positioned on top of the current view. This transition gives the user the impression that they can get back to the previous screen with a simple swipe down. Imagine for a second If the entire screen had faded out instead and then the new UI state was presented. In this situation the user would have a hard time knowing where they are contextually within the app.

    Hover + hold to play and loop the video

    This example illustrates how animation can be used to visually explain an apps layer hierarchy. Initially a menu is presented, then when ‘Processing’ is tapped a new layer is revealed. This transition gives the impression that the user has drilled down to a deeper level.

    So, to wrap up, it’s worth highlighting that like a lot of things subtlety is key. As useful as animation can be for an app’s UX it’s really important to not over do it. Be very clear on why you are adding animation and what the benefit is to the end user. And the end user is really what all this is about.

  3. The Illusion of Life and UI Motion Design

    Leave a Comment

    Disney Animation: The Illusion of Life is a book by Ollie Johnston and Frank Thomas, two of the animation masters working at Disney during the Golden Age of animation. Topping the list of “best animation books of all time” it’s still used today as a reference for character animation.

    The book describes the so-called 12 basic principles of animation: Squash and Stretch, Anticipation, Staging, Straight Ahead & Pose-to-Pose, Follow-Through and Overlapping Action, Slow In and Slow Out, Arcs, Secondary Action, Timing, Exaggeration, Solid Drawing and Appeal.

    Although these principles were intended to be utilised by animators working on hand-drawn cartoons, they are almost all applicable to UI motion design. If you are wondering how these principles would manifest, designer Cento Lodigiani has created this fantastic video to demonstrate.

    If this short introduction has piqued your interest, it’s worth noting that the book’s third chapter (which explains the 12 basic principles of animation) was republished in its entirety with the permission of the authors’ heirs in the Disney Animated iPad app from Touch Press.

  4. How to describe UI animation

    Leave a Comment

    It’s 2014 and lots of apps are looking the same. Flat design is here for the foreseeable future and with it a definite lack of personality. If everything looks the same how do you differentiate?

    I’m going to go out on a limb here and say the answer is with animation and motion. Animation is now a key facet in how an interface is experienced and understood. A search for shots tagged “animation” on Dribbble reveals designers are using animation to enhance the user experience. In this post I want to categorise some common UI animations that I’ve noticed and explain what I think their purpose is.

    Animation to transition

    Let’s start with an animation effect that’s ubiquitous: a transition. A transition is a change from one state to another over time. A smooth gradual transition will help to ease a user into a new screen rather than abruptly forcing it upon them.

    Tweetbot 3 uses a transition to guide the user into viewing attached content.

    Hover + hold to play and loop the video

    This animation is also an example of how a transition can help the user understand how to interact with an app. By bringing the attached content to the fore while also subsiding the listing the user won’t feel like they’re lost. This affordance also helps the user understand how to return to the previous state.

    Animation to focus

    The animation below implements a build-in effect to transition to a new UI state.

    Hover + hold to play and loop the video

    Notice how each element animates separately, this focuses the users attention on to one element at a time. Animations like this enable a designer to control a users visual focus, directing their attention to what’s most important on screen.

    Animation to delight

    Now this is a hard sell as it has little effect on usability but If your goal is to make a memorable app, then adding animations which pique a users attention is a wise choice. Here’s an example:

    This interface element could easily have been built without any animation at all. But would you remember it? It’s touches like this that separate good from great and enable your app to stand out from the crowd.

    Next steps

    With transition, focus and delight we now have a framework for describing UI animations. Which is exactly what I intend to do right here over the next number of weeks, I hope you stick around.

  5. Colour is everywhere. Cherish it.

    Leave a Comment

    Nigel Evan Dennis:

    “Everything you see contains a palette. Some beautiful. Some ‘ugly’. Some dark. Some light. Some hot. Some cold. But they are all inspiring. They are all engaging. Color can adjust our perception. It can effect the way our food tastes. It can increase the emotional and intuitive level of an experience. It can turn us off, turn us on. It is psychological. It is emotional. Color is a wonderful thing. Retain it.”

    That’s a mighty call to arms. Nigel’s microsite, from which the above quote was taken, is a dedication to his love for colour. There’s not much point in reading about it, so don’t stick around here for long. The site — much like colour — needs to be seen to be fully appreciated.