Tab Animation

Friday, January 29th, 2010

In addition to the UI and appearance changes we have been exploring for Firefox, we have also been exploring how to better improve the user experience through animation.

One area that animation would be very beneficial is with tab interactions. Specifically moving/arranging tabs on the tab strip, closing/opening tabs and tearing off tabs into new windows. Presently the feedback here isn’t as good or as elegant as it could be.

 

New Tab Animation

Some of the goals for animation are to make browsing feel faster, adding visual affordances that makes tasks more understandable and to make the browser more visually appealing. There is much more detail on the Wiki articles linked above. My goal was to quickly demo how this would actually look and feel because still images and wireframes can only convey so much.

Click the image below for the animation that shows how a new tab animation could look. It’s pretty short and fast.

 

It is hard to tell from the video how this would work frame by frame. The general idea is that after you click the new tab button that button itself grows into the new tab.

 

Tab Tear Off

This demo shows both tab rearrangement and tab tear-off.

 

Tags: Animation
Posted in Firefox | 75 Comments »