From Interaction-Patterns.org

[edit] Animated Transition

[edit] Quick Summary

The Animate Transition allows the designer to communicate to the user that an object on the website has changed its spatial relationship within the page. Furthermore, this helps the user to orientate in space. The general purpose of the Animate Transition is to communicate change in the interface.

[edit] Visual Examples


Found on tv.yahoo.com	Found on our project wiki by Basecamp


Found on www.designbyfire.com	Found on www.skitch.com

[edit] Examples found on the World Wide Web

http://www.netvibes.com
http://yahoo.com
http://www.basecamphq.com
Switching from one article to another happens with a smooth transition, emphasizing the elegance and lightness of the blog (the author for no surprise sees himself more of an essayist): http://www.designbyfire.com

[edit] Possible Field of Application

A direct remove and appear in another place on the page would be a jarring or confusing way to show what just happened.
To show how an object has changed places or containment on a page.

[edit] Possible Solution

Move an object across the page animating the in-between positions (tweening). Moving an object can communicate:

Its relative importance has changed (depends on where it is moved to).
The object is now related to something else (as in dropping in a list, scheduling on a calendar day, etc.)
- Animate the object itself moving into place; or
- Animate zoom rectangles showing where the object is moving.
The function of the object has changed (based on what it is now associated with spatially).
Be careful not to overuse animated moves -- especially when the move is not initiated by a user action.

[edit] Examples

Drag and Drop: The Object you dragged will correctly be dropped in the area you wanted it and this will be animated. The move will animated.
On flickr the Sideshow functionality: Changing from one picture to another is animated. Is it? Not really.
A live feed dynamically tracks the most important stories. As new items come in, older stories move down in priority.
Minimizing a window in Mac OsX is animated and shows the user where the window disappears.
Are there any more examples? Of which I just can't think of right now? Fell free to add any examples illustrating that pattern.
The following blog uses transitions: http://www.designbyfire.com

[edit] Rationale

In our everyday world, objects occupy real space and don't normally instantly appear and disappear. We throw a piece of trash into the trashcan and see it leave our hand and go through the air into the trashcan.
In our interfaces, we do not need to mimic every movement from the real world. Interfaces would be dreadfully slow. But by using animation to show where an object came from or is going we can make it easier for the user to find the object again or feel confident in putting the object away in the future.
Using animation to position an object in a grid confirms that it went into the slot. This type of feedback clarifies the user interaction.
The rapid shift from action to result sometimes leaves the user confused and he searches for clues in the screen to devise what happened.

According to Professor Benjamin B. Bedersonof of the University of Maryland: "The potential for this kind of animated transition is that it can reduce the cognitive overhead of understanding of the relationship between two screen states, thus enabling users to stay focused on the task (see the blog :) to quote a Professor of the University of Maryland*
Animated transitions can add a level of consistency to a user interface. Without smooth transitions, the jumps from state to state can be jarring to users, forcing them to reorient themselves to each new screen state.
Not to use in case someone needs to access information rapidly. Don't make a delay. It may be annoying switching between articles. Be careful when to use an Animate Transition. Power user may not need that e. g. repeating tasks. Depending on the context, the contend and the user's needs it may be better to not have a delay in the application. This might be the case in banking and time critical information systems.
An alternative suggestion: Rather than building a delay into our apps, maybe it's better to signal the user to pause where appropriate by breaking up our content using whitespace.
Animation can make for a clearer interface but it shouldn't take control away from the user.

Transitions and delay in other context*
Have pauses to make it more human-like. Have delay's in conversations, avatars which are supposed to mimic humans.
Transitions can not only be used for communication but also for engagement. This aspect to is less important in the context of Web applications and websites. This maybe more relevant to video games.
Interacting with an area on the screen that responds by slightly growing or seeing an accordion pane "snap" into place creates a slightly richer and compelling experience. The interface seems more alive. Of course going slightly overboard can be the equivalent of blink for Web 2.0.
One can imagine situations such as in games where engagement can take a more important role. However, in most web sites, communication is the most important purpose for transitions with engagement being second.
It may be used to distract the user.

[edit] Some principles

The more rapid the change the more important the event.
Rapid movement is seen as more important than rapid color change.
Movement toward the user is seen as more important than movement away from the user.
Very slow change can be processed without disrupting the user's attention.
Movement can be used to communicate where an object's new home is. By seeing the object moving from one place to another we understand where it went and therefore will be able to locate the object in the future.
Transitions should normally be reflexive. If an object moved and collapsed to a new spot, you should be able to open it and see it open up with the reverse transition. If you delete an object and it fades, then if you create an object it should fade into place. This creates a concept of symmetry of action.

Set the focus on the item that got changed. This enables assistive technologies to detect where a change happened. Of course if the user is typing or needs the focus in another area then this solution cannot be used.
Provide ALT tags that preview what will happen when the user engages an interaction. For example, if you can close a panel and provide a way to communicate where the panel is collapsed to, you might consider putting text in the ALT for the image that tells the user what will happen when the click/activate the close icon and how they can get the panel open again.

Technical Explanation: The Brain's Attention Center

Sudden movement or or change in lighting is processed by a second region in the brain that is dedicated to visual processing. Besides the visual cortex which processes what we normally think as vision, the superior colliculus gets a copy of the same visual information. This region of the brain is dedicated to attention capture. Its main purpose is to process sudden changes in the visual space that might indicate danger or importance. It guides reflex movements telling the body to orient toward the change.

If an object fades away we know it changed state from visible to invisible even if we are not staring directly at the object.
If an object fades into view then we know the object has arrived.
If an object fades rapidly it is seen as more important. If it fades slowly its importance is lower.
If an object is coming at us (getting larger and appearing to go past us) then we think of it as something that is important (and dangerous). Interestingly Matt Webb in his talk on Broken Windows

If an object zooms down in size rapidly and disappears it will capture the user's attention immediately. However if the object was not in the user's immediate focus (user was not directly manipulating the object) they will glance to see the change but may not even be able to tell what object went away.

Rules of Communication

Transitions are a communication device. Having said that, it is important that the goal of communication be kept in mind regarding any transition effects.

In more engaging or entertainment based sites a transitional effect can become more important and thus may require longer transition times or more effects. In communication-oriented web sites, the transition is secondary and is only communicating changes in the interface.

From the discussion above we can extract some general rules.

The more rapid the change the more important the event.
Rapid movement is seen as more important than rapid color change.
Movement toward the user is seen as more important than movement away from the user.
Very slow change can be processed without disrupting the user's attention.
Movement can be used to communicate where an object's new home is. By seeing the object moving from one place to another we naturally understand where it went and therefore will be able to locate the object in the future.
Transitions should normally be reflexive. If an object moved and collapsed to a new spot, you should be able to open it and see it open up with the reverse transition. If you delete an object and it fades, then if you create an object it should fade into place. This reinforces the concept of 'symmetry of action' (the opposite action is implied by the initial action.

[edit] Meaningful Transitions Taxonomy

The Website http://www.ui-transitions.com documents many different transitions and cluster them into 6 categories, to differentiate the nature of transitions for their application.

Orientation: Orientation describes the way in which a logical connection can be created and visualized between objects and object's states. Often used animations in this category are directional motions. They give an impression of the location and the structure of information. Orientation describes the object's environment and therefore the system's information architecture. For that reason, Orientation invites the user to explore the user interface.
Spatial Extension: Spatial Extension reduces the complexity of the user interface by extending the virtual space. This allows a gradual experience of information by opening or closing the space at given time, in order to let the user focus on the important elements. This category is a tool for spatial extension in the user interface, especially for devices with a smaller screen, thus saving important space. This way, information can be placed more clearly, for example on a display of a mobile phone, by creating space, or overlapping layers. An often used animation for Spatial Extension is turning two dimensional planes in to three dimensional cubes.
Awakening Controls: Awakening Controls allows the user to focus on contextual controls. They appear when needed, and disappear as soon as they are no longer needed. When the user switches into a certain mode, Awaking Controls can communicate new forms of interaction by using animations. Slidings and fadings are among the most common animations used for this purpose.
Highlight: Highlighting is the guidance of attention by using animations. This category draws the user's attention and clarifies changes of states in the user interface, which otherwise might be missed. The aim of Highlighting is to direct the user's attention to specific objects by using an animation. The usage of lighting and shading are often used examples of Highlighting.
Feedback: Feedback comprehensively indicates what the result was of the user's interaction. This category signifies a running process or indicates whether or not an action was successful, upon an unsuccessful action it explains why. For Feedback, the most often used animations are popups and progress-based animations.
Feedforward: Feedforward functions as a conveyor of possible interactions. An illustrating animation is used to prepare the user for the outcome of an action. By visualizing the consequences of the action, the resulting event is more predictable and easier to follow. The user can estimate the event more precisely and interpret it more reliably. At the same time an animation can invite the user to interact and present new interaction mechanisms.

[edit] This pattern is being used to

Immediate Feedback

[edit] Source

Animate Transition

From Interaction-Patterns.org

Contents