Dev Diary #2 - Animation

Quick house-keeping note on this diary series. When I started it, I didn't really put any thought into a schedule, which probably wasn't wise. I'm now aiming to get one out each Friday, to cover the previous week's progress. Now on to the content...

If you watch closely while using the Nach web app, you'll notice many of your interactions are immediately followed by brief animations, to break up what would otherwise be very abrupt transitions, as parts of the page come into or out of view. It's a subtle effect, but I think it goes a long way to make the UI feel smooth and intuitive.

The new native mobile apps will be no exception here. In fact, now that they're going native, there should be even more freedom for creating fluid animations, over what was possible on the web. Here's a taster:

When used correctly, animations can introduce a new dimension to the design of apps -- one of motion over time. Rather than thinking of app designs as simply a series of 2D screens, as you'd see in screenshots, I find it helpful to try and consider the transitions and movement as part of the core design.

There's an important balance to strike here, which I'm always wary of when introducing animations. An animation needs to last long enough that the eye can pick up what's going on, even if it's completely subconscious (which is ideal).

But there's a very fine line. If it's too slow, and the viewer's own reaction times are outpacing the motion of the animation, this can quickly turn the animation into a hinderance, making the whole experience feel laggy and slow.

Even if it's just an excess 200 milliseconds, if that's time where the user is ready and waiting for a button to appear, but having to sit through needlessly slow fade, these minor annoyances can add up, making the whole app experience feel sluggish rather than fast and responsive. I do manually check every single animation, and will meticulously tweak until the timing feels right.

The technology choice for our iOS and Android apps are the perfect fit fo this. Animation is able to happen on a very low level, meaning that gesture responses are essentially instant, and everything animates at a "buttery smooth" 60 frames per second (twice as fast as the included video is able to demonstrate).

So, expect plenty more instances of animation to make an apperance over the coming weeks.