Firefox/Projects/Tab animation
Contents
Summary
The first area we feel could benefit from animation is the movement of toolbar items within their rows on the Firefox chrome. This includes button like Home and Reload, the bookmark bar, and tabs. Currently, these items can all be shifted and reordered, but little visual indication is given. For tabs, only a thin strip shows where a dragged tab will be dropped.
By adding animation to the process of rearranging items, not only will Firefox feel more lightweight and adaptable, but it will be more visually clear what the user is manipulating and how the UI will be changed by letting go. For instance, animations of tabs being arranged is essentially live preview of tab rearrangement: if a tab is slid to the right and an animation shows it doing so, releasing it only makes permanent what is being shown.
Tab tearoff
Currently, tearing off tabs is functional... but that's it. There's little affordance to tell the user what is going on - if they've grabbed a tab, where it's targetted, and what will happen when they let go.
All of the browsers more or less treat tabs as real world objects. We describe them with real-world metaphors, like "dragging" and "tearing." And, we manipulate them like real-world objects we can, by rearranging and moving them. Thus, animation could help to reinforce this real-world metaphor while providing a visual affordance for how the tab is being manipulated.
Current Status
Currently beginning phase 1:
- Have initial meeting with developers to outline what skills and time are needed to implement them
- (talk to Vlad first half of week 1)
- Find developers with free cycles and interest in the sprints (zpao?)
- Blog about the beginning of implementation
- Tightening up wireframes in preparation for implementation
Next Steps / Designs
Phase 2 (~2 weeks)
- Detailed implementation plan begun based on meetings during phase 1
- Bugs created to track progress & are assigned
- Informal user testing to optimize for speed, transitions, magnitized locking distance, etc
- Wireframes finalized into mockups
Phase 3 (~.5 weeks)
- Patches written
- Final tweaks & testing, reviews & landing
Related Bugs
This sprint will likely start out as being only based on design work.
Goals/Use Cases
- Give the user precise control over their window/browsing setup
- Allow users to quickly rearrange and reorder items
- Make the browser feel faster
Mockups
By adding animation to the process of rearranging items, not only will Firefox feel more lightweight and adaptable, but it will be more visually clear what the user is manipulating and how the UI will be changed by letting go. For instance, animations of tabs being arranged is essentially live preview of tab rearrangement: if a tab is slid to the right and an animation shows it doing so, releasing it only makes permanent what is being shown. This is similar to the tab animation motion currently in Safari and Chrome.
Because tab tearoff and tab rearrangement would utilize similar mouse movement, some thresholds should be added to prevent users from accidentally performing the wrong action. A “soft snap” could make tabs within a region of the tab bar slide, and falling outside that region causes them to tear off.
Slight animation could also give newly created tabs the feeling of organic growth into the browser.
Animated Mockups (videos)
If you want to play some video seeing these mockups in action, please visit http://blog.stephenhorlander.com/2010/01/29/tab-animation/ .
