Firefox/Features/UI animations

Please use "Edit with form" above to edit this page.

Status

UI animations
Stage	Development
Status	In progress
Release target	`
Health	OK
Status note	`

{{#set:Feature name=UI animations

|Feature stage=Development |Feature status=In progress |Feature version=` |Feature health=OK |Feature status note=` }}

Team

Product manager	Asa Dotzler
Directly Responsible Individual	Frank Yan
Lead engineer	Frank Yan
Security lead	`
Privacy lead	`
Localization lead	`
Accessibility lead	`
QA lead	`
UX lead	Alex Limi
Product marketing lead	`
Operations lead	`
Additional members	`

{{#set:Feature product manager=Asa Dotzler

|Feature feature manager=Frank Yan |Feature lead engineer=Frank Yan |Feature security lead=` |Feature privacy lead=` |Feature localization lead=` |Feature accessibility lead=` |Feature qa lead=` |Feature ux lead=Alex Limi |Feature product marketing lead=` |Feature operations lead=` |Feature additional members=` }}

Open issues/risks

`

Stage 1: Definition

1. Feature overview

This project covers the exploration and tracks the design and implementation of animations in Firefox's user interface that can benefit the browsing experience, such as:

• Improving perceived performance
• Drawing attention to important indicators
• Providing visual affordances to make tasks more intuitive
• Adding visual appeal to tasks in the browser

See #Background below for expanded explanations.

This feature falls primarily in the Experience category (from the "Discover, Experience, and Connect" vision statement.)

2. Users & use cases

`

3. Dependencies

`

4. Requirements

`

Non-goals

`

Stage 2: Design

5. Functional specification

`

6. User experience design

`

Stage 3: Planning

7. Implementation plan

`

8. Reviews

Security review

`

Privacy review

`

Localization review

`

Accessibility

`

Quality Assurance review

`

Operations review

`

Stage 4: Development

9. Implementation

• bug 596954 - Tab-related animation issues and enhancements
  • bug 455694 - Tab move/detach animations: see feature page
• bug 610545 - Arrowpanel Animation
• bug 588317 - Move popup blocked notification to a location bar icon and animate it to draw adequate user attention.
• Move find bar to top of content area and animate it.
• Animate paper plane icon upon sharing, so user knows that share was successful.

Stage 5: Release

10. Landing criteria

` {{#set:Feature open issues and risks=` |Feature overview=This project covers the exploration and tracks the design and implementation of animations in Firefox's user interface that can benefit the browsing experience, such as:

• Improving perceived performance
• Drawing attention to important indicators
• Providing visual affordances to make tasks more intuitive
• Adding visual appeal to tasks in the browser

See #Background below for expanded explanations.

This feature falls primarily in the Experience category (from the "Discover, Experience, and Connect" vision statement.) |Feature users and use cases=` |Feature dependencies=` |Feature requirements=` |Feature non-goals=` |Feature functional spec=` |Feature ux design=` |Feature implementation plan=` |Feature security review=` |Feature privacy review=` |Feature localization review=` |Feature accessibility review=` |Feature qa review=` |Feature operations review=` |Feature implementation notes=* bug 596954 - Tab-related animation issues and enhancements

• • bug 455694 - Tab move/detach animations: see feature page
• bug 610545 - Arrowpanel Animation
• bug 588317 - Move popup blocked notification to a location bar icon and animate it to draw adequate user attention.
• Move find bar to top of content area and animate it.
• Animate paper plane icon upon sharing, so user knows that share was successful.

|Feature landing criteria=` }}

Feature details

Priority	P1
Rank	11
Theme / Goal	`
Roadmap	User Experience
Secondary roadmap	`
Feature list	Desktop
Project	`
Engineering team	Desktop front-end

{{#set:Feature priority=P1

|Feature rank=11 |Feature theme=` |Feature roadmap=User Experience |Feature secondary roadmap=` |Feature list=Desktop |Feature project=` |Feature engineering team=Desktop front-end }}

Team status notes

	status	notes
Products	`	`
Engineering	`	`
Security	`	`
Privacy	`	`
Localization	`	`
Accessibility	`	`
Quality assurance	`	`
User experience	`	`
Product marketing	`	`
Operations	`	`

{{#set:Feature products status=`

|Feature products notes=` |Feature engineering status=` |Feature engineering notes=` |Feature security status=` |Feature security health=` |Feature security notes=` |Feature privacy status=` |Feature privacy notes=` |Feature localization status=` |Feature localization notes=` |Feature accessibility status=` |Feature accessibility notes=` |Feature qa status=` |Feature qa notes=` |Feature ux status=` |Feature ux notes=` |Feature product marketing status=` |Feature product marketing notes=` |Feature operations status=` |Feature operations notes=` }}

Background

This section was originally written by Jennifer Boriss for the Firefox 3.6 project that this supercedes.

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.