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 🙂
JAWS 
This has me wondering if the opacity fade is worth bothering with.
Thank you for doing this work! It’s really important that somebody looks at every pixel of the browser (I’m not even joking). Not everybody notices these things, but I still think that on an unconscious level, the UI would *feel* calmer to everybody when there’s less jerk and lag.
Please forgive me for suggesting some more things to video:
– Please look very closely at what happens in the UI when loading new pages. For example, the favicon in the location bar briefly flashes to the default icon, and sometimes disappears completely when loading new pages. This flashing should be minimized, maybe by avoiding or delaying showing the default icon, or by using icon fade-ins and fade-outs etc.
– After closing the second-to-last tab, the close button disappears from the last (now only) tab only after the closing animation has ended. I think the UI would feel better if the close button was removed immediately.
– Likewise, when there’s only one tab, and you open a new tab, the original tab’s close button only appears after the opening animation.
Thank you for the great feedback.
> the favicon in the location bar briefly flashes to the default icon, and sometimes disappears completely when loading new pages.
This issue should be fixed by bug 588270, which will remove the favicon from the address bar (http://bugzil.la/588270).
> the close button disappears from the last (now only) tab only after the closing animation has ended.
Thanks for mentioning this. I’ve filed bug 722680 for this change (http://bugzil.la/722680).
> when there’s only one tab, and you open a new tab, the original tab’s close button only appears after the opening animation.
Again, thanks for mentioning this. I’ve filed bug 722681 for this change (http://bugzil.la/722681).
[…] (@weinjared) demoed how to make bullet-time screen captures of Firefox and paint […]