Animate Transition
From Interaction-Patterns.org
Contents |
[edit] Animate 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.
