Firefox/Projects/animation

The purpose of this wiki will be a planning page for animation added to Firefox in its Namoroka release.

The first goal will be to explore possible areas where animation can benefit the browsing experience, such as:

• Making browsing feel faster
• Adding visual affordances to makes tasks more understandable
• Making the browser and tasks more visually appealing

The second goal will be to test prototypes and gain feedback on possible animation, triaging and prioritizing based on benefit added and resources needed. This wiki will then track the development of areas of animation and be a resource for their stage of implementation.

Background

Animation in the browser is a tool, but not a goal unto itself. Wherever animation is used, it should be with a definite and purpose and benefit to the user.

Like many web technologies, animation is a useful but easily abused tool. The early web and the dawn of the .gif format saw animation heinously overused websites, with blinking, spinning, and scrolling animations thrown in because they "looked cool." As the web stopped foaming at the mouth and begin the transition to what could be done to what should be done, animation became used more successfully as a tool. Some ways in which animation can be useful include:

• Drawing attention: Our eyes are genetically optimized to be drawn to movement - a subtle movement means the attention of the user is diverted. If the user needs to be made aware of a change while their focus is drawn elsewhere, an animation can notify them. However, this diverts the attention of the user from the task they were engaged in, and should be used sparingly.

• Tactile affordances/matching digital interactions to the real world: In real life, all of our physical tasks involve the manipulation of objects. The desktop and online environment often draw metaphors between real objects and digital objects in order to make the manipulation of digital objects feel more natural. For instance, desktop environments use metaphors such as dragging, dropping, opening, and closing. Similarly, the browser draws on some of our real life metaphors. Potentially, animation can draw links between the real and digital world, thus making online interactions feel more intuitive.

• Making browsing more human/visually appealing: While a valid goal, this is a cautious one and thus last. Animation does have the ability to add fun, playfulness, and "humanness" to the browser - but going too far is very easy. Firefox, while a branded browser, stands best when it feels at home in its operating system. Since version 3, there have been separate designs of Firefox for the different operating systems so that the browser would feel more native. This is still a goal, but so is optimization of the web experience. Subtle animations can add a human touch, but also personality. The risk of personality is that a strong one can fight against the need for the browser to blend into the users' working environment.

• moar coming

Possible places for animation in Firefox

Tab tear-off

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.

Competitive analysis

Safari and Chrome currently have animations associated with tab movement and tear-off.

Find text on page

Currently, finding text on a page in Firefox can be challenging. The text is highlighted as the user types matching input, but this slow color change can be difficult to detect - especially when the highlight is similar to the background color. A subtle animation as the user types input could direct the user's attention to the word they are trying to find.

Competitive analysis

Safari has a very successful find-on-page animation that directs attention with a slight expansion of the color around the word.

(image)

Tab loading state

Currently in Firefox, there is little way to tell what part of a website has loaded. The status bar at the bottom of a window arguably can show a user when a site is "done" or not, but provides little useful information. The particular components that are loading are often shown too fast to be read, and do not relay much information to users. With a small animation, such as a loading bar, it may be possible to provide better information about how close a tab is to loading.

Competitive analysis

• Safari's pervious versions showed a loading bar on the back of a URL address, saving screen real estate. Safari's recent versions only show a loading throbber, similar to Firefox.

Notification of wireless/connection/firewall status

• Probably not itself animated, but appearing with fading in and out rather than appearing suddenly

Fast pullout/pullin animations for current windows that "appear" out of UI

Examples of appearing UI:

• Awesomebar dropdown (grey arrow on right of address bar)
• Larry Notification
• Bookmark UI (star menu)