Shane O'Sullivan's technical blog… really ties the room together

Click, change then animate: My self imposed rule for a fast & smooth UI

Posted by Shane O'Sullivan on October 14, 2012

A few months ago I joined the Ads Interfaces team at Facebook, after almost two years on the mobile team, and am very proud of being part of the group that shipped a full rewrite of the Ads Create Flow ( last week.  The application is highly complex, with many varying user interface elements, lots of data floating around, validations and so forth, so it made sense to write it 100% client side in JavaScript. 

In many ways it’s a standard MVC application with

  • declarative view definitions, so you can easily relate the code to what you see in the Web Inspector
  • well defined data models which can be observed for changes
  • bidirectional bindings between views and models to keep the UI in sync with the data.  That is, if a piece of data changes, the UI should just update itself.  Of course, it is also possible to add code in between any binding if some more complex processing is needed.  For example, when changing the top level objective (clicking one of the huge buttons), I wanted it to animate the change, so rather the transference of the data update is delayed.

My New Rule

One of the primary lessons I took away from this is that asynchronous data fetching is one of the leading causes of users feeling like a UI is “webby”.  That feeling where the interface suddenly, with a jerk, jumps around and changes size.

This is often caused by images loading, or by an API call returning, resulting in the UI being redrawn.

I decided on a new rule to apply to interfaces I work on:

The UI can change suddenly when the user interacts with it.  All other changes should be smooth.

What this means is if the user clicks a link or a button, it’s OK to immediately change the UI, since they can see the causation.  However if new data comes back, or a large image loads shifting the entire UI up or down, this should be smoothly animated. 

I’ve found that this both gives an interface a more polished feel, but also draws the users eye to important information.  In addition, if they were already reading something, trying to make a choice of what to click next, if that jumps even a couple of centimeters they have to start searching for it again – it may have gone below the bottom of the screen.  However if it smoothly moves there over 300ms, they continue without much interruption.

It’s important to not go overboard with this of course.  Don’t animate everything, as it’ll feel gratuitous.  I’ve found that sticking to animating only asynchronous operations leads to an application feeling both fast and professional.


Some examples in the Ads Create Flow are the large image that loads for Sponsored Stories (the bottom picture), and the entire Ad preview that loads as a result of a data callback (under Right Hand Column Preview).


One caveat is that on IE 8 & 9, you’re going to have a bad time.  I chose to not bother with janky timer based animation solutions, both in the interest of saving time, and from a healthy disdain for legacy browsers.  So, I advise to stick with CSS3 animations, and let the users of old browsers have a working but less attractive application. 


4 Responses to “Click, change then animate: My self imposed rule for a fast & smooth UI”

  1. n te damos algunos ejemplos de las mejores cremas que est.
    Basic needs for rabbits are the same as for all pets.
    I wondered did he suffer, did he try to get
    back to his car.

  2. In the course of the recession, the accepting of self
    certs, when making application for any mortgage product stopped 100%, and the self
    employed then needed, as they do to this day, either full accounts or an accountant’s certificate to prove their true earnings.
    “Having married a farmer when I moved to Southern Illinois, I soon found everything from raising cattle, to making hay; to growing a crop fascinating. All rabbits have very strong back legs and you can get scratched easily.

  3. You either meet them completely by chance or you play it strategically:
    buy a load of Repels and start searching.
    Don’t work a “normal job” if you feel it’s your calling, challenge the
    Elite Four instead. 6, an insider claimed that
    the studio behind ‘Pokemon X’ and ‘Pokemon Y’ is already working on the seventh generation of mainline
    video games for the franchise.

  4. Despite of such successes for both firms, there are still
    many criticisms regarding the nature of both businesses.

    Pay – Pal came to Central Texas with their innovative approach to modern retailing.
    Pay – Pal admitted to the error and even
    offered up an apology of sorts to Reynolds.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: