The benefits of slow-motion videos of user interface features

30 January, 2012 § 4 Comments

The people working on Firefox have been spending a lot of time recently making sure that the browser is not just running with the highest performance as possible, but also running with the best perceived performance.

There are some cases where animations in the user interface may appear jerky, having large pauses or stutters while transitioning from one state to another.

One example is the transition from an open tab to a closed tab. In today’s release version of Firefox, tabs close by reducing their width to 0 pixels while also reducing their opacity to become transparent at the same time. With these two animations occurring at the same time, the tab becomes invisible much earlier than its width becomes 0 pixels. This results in a visible hole in the tab strip.

Starting in Firefox 12 (currently in the Nightly phase), the animations delay the fading of the opacity to a later time to remove this visual hole.

Finding an issue like this may be easy, but seeing at a slow speed what is happening and if a fix works better is hard. Since these animations run pretty fast, developers need to slow the animations down.

Asa Dotzler used Camtasia Studio and recorded the tab closing transitions at 60 fps (Camtasia Recorder -> Tools -> Options -> Inputs -> 60 fps) and then encoded them at 15 fps (Save and Edit -> right-click on clip -> Clip Speed -> 25%). This provided us with a slow-motion reproduction of the animation (only animates in Firefox, click on the image to see the animation):

After Asa created the animation, Dao Gottwald put together a patch that tweaked the timings of the various transitions. I put together a new recording that showed the effect of this change (click on the image to see the animation):

Recording user interface features can really help get a detailed look at how the software looks and feels. Maybe there will be an opportunity for you to use software like this in the future 🙂

Where Am I?

You are currently browsing entries tagged with camtasia studio at JAWS.