Home
 
Categories
 
Motion Principles
 
About
 
Contact
 
Orientation
Spatial Extension
Awakening Controls
Highlight
Feedback
Feedforward
Interaction
 
drag and drop
 
hover over
 
flick
 
pinch
 
press
 
press and hold
 
scroll
 
swipe
 
type
 
pan
 
Trigger
 
direct
 
indirect
 
passive
 
Object
 
alert
 
button
 
e-book
 
card
 
chat
 
controls
 
download
 
grid view
 
input field
 
information visualizatio
 
label
 
list
 
 
list
 
list object
 
lock screen
 
object
 
map
 
page
 
photo
 
scroll bar
 
thumbnail view
 
window
 
video
 
magazine
 
Device
 
OS (Win, Mac)
 
Mobile OS
 
Web
 
Categorie
 
Invalid argument supplied for foreach() in /var/www/vhosts/ui-motion.com/httpdocs/app/view/html/elements/language/en/mm-filter.php (65)
 
 
Meaningful Transitions - Motion Graphics in the User Interface
 
 
»Meaningful Transitions - Motion Graphics in the User Interface« deals with the use of animations in the user interface. It documents transitions in a clustered way to show at which point transitions can be a helpful extension to a static user interface, because of cognitive benefits to enhance the user experience.
 
 
Categories
 
 
The purpose of Meaningful Transitions is to illustrate the process of the interaction and the structure of the user interface. They focus on specific events, or clarifying the user's interaction by animation. All transitions are divided into six categories in order to differentiate between their application. The aim is to present a scaleable collection of existing transitions. The transitions are shown in an abstract visualization to clarify their purposes, these visualizations also contain concrete examples. A closer look at a transition offers more information on the field of use, the mental model, the consistency, the cognitive benefit, and the illusion. see more
 
 
Motion Principles
 
 
»Does your animation have weight, depth and balance?« [De Cock 2011: S.16] Disney's Twelve Basic Principles of Animation are a set of rules that define a realistic impression of a motion within the basic laws of physics. Some of these principles have great relevance for the animations in a user interface. see more
 
 
Orientation Description
 
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.
 
 
Orientation Transitions
 
Slide
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A directional transition to show the arrangement of objects.
Field Of Use When the user navigates through a list of objects.
Description The object list moves according to the swipe interaction of the user. The objects move into position, automatically.
Consistency Directional transition. The object slides according to the direction of the interaction.
Benefit A directional transition to show the arrangement of objects.
Illustration The objects seem to be arranged on a long ribbon
 
Fan of Stack
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to explain the arrangement of objects, by showing how they are placed.
Field Of Use When the user opens a stack of objects.
Description The stack opens while the user pinches an object‘s stack.
Consistency Closing the stack.
Benefit A transition to explain the arrangement of objects, by showing how they are placed.
Illustration The objects seems to be extended on the stage.
 
Device Rotation
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to visualize that the content orientates according to the rotation of the device.
Field Of Use When the content need to rotate and rearrange.
Description The content on the screen rotates within the orientation of the device.
Consistency The content needs to rotate according to the rotation of the device.
Benefit A transition to visualize that the content orientates according to the rotation of the device.
Illustration The content seems to move according to the rotation of the device.
 
Scroll Bar
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to indicate the length and position of the related list.
Field Of Use When scrolling a list.
Description The length and the position of a scrollbar give the user an impression of the length and the position of the scrolling list.
Consistency -
Benefit A transition to indicate the length and position of the related list.
Illustration -
 
Flip
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to show a direct connection between the object of interest and further information.
Field Of Use When there is additional content relating to the object of interest.
Description The object turns for further information.
Consistency 180° has two sides – two states.
Benefit A transition to show a direct connection between the object of interest and further information.
Illustration Further information seem to be on the back of an object.
 
Position Accepted
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to show that the object moves into position to visualize that the position is accepted. The interaction is validated.
Field Of Use When the user moves an object, he needs feedback if the position is valid or invalid.
Description If an object is placed on a accepted position, the object moves automatically into position.
Consistency See: Position Denied
Benefit A transition to show that the object moves into position to visualize that the position is accepted. The interaction is validated.
Illustration The object seems to place itself.
 
End of Page Indicator
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to indicate the end of flipping pages. The last page flips back automatically.
Field Of Use When the user reaches the end of flipping pages.
Description The flipping page bounces back at the last page.
Consistency The transition indicates the beginning and the end of flipping pages.
Benefit A transition to indicate the end of flipping pages. The last page flips back automatically.
Illustration To indicate the end, the last page seems to be fixed.
 
Popup
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to explain which specific object scales to fullscreen view.
Field Of Use When the user interacts with an object.
Description The object transitions from a thumbnail view to full screen view.
Consistency The reversed transition is the transition from full screen view back to thumbnail view.
Benefit A transition to explain which specific object scales to fullscreen view.
Illustration The object seems to grow on stage.
 
Page Turn
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A Transition to explain the information architecture of the list in a narrative way.
Field Of Use When the user turns a page.
Description The page turns while the user swipes the content.
Consistency Directional transition. The page turns according to the direction of the interaction.
Benefit A Transition to explain the information architecture of the list in a narrative way.
Illustration The virtual page seems to behave similar to its real reference.
 
Button to Label
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to show the connection between the button and the content. The directional transition explains the structure.
Field Of Use When navigating through hierarchy.
Description The label of the button transitions into the title of the content.
Consistency The title of the content changes.
Benefit A transition to show the connection between the button and the content. The directional transition explains the structure.
Illustration The button becomes the label.
 
Page Indicator
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to visualize the amount of pages while indicating the current pages.
Field Of Use When flipping through pages book, screens.
Description A moving dot to indicate the switching of a page. At the same time it shows the amount of pages.
Consistency -
Benefit A transition to visualize the amount of pages while indicating the current pages.
Illustration -
 
Half Flip
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to show a direct connection between the object of interest and further information.
Field Of Use When there is additional content relating to the object of interest.
Description The object rotates from 2d space to 3d space for further information.
Consistency -
Benefit A transition to show a direct connection between the object of interest and further information.
Illustration The 2d object rotates in space to show the 3d possibilities for placing information.
 
Position Denied
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to show that the object moves back to its former position to visualize that it is invalid to place the object on this position. With a directional transition, the user is able to see where he can find it.
Field Of Use When the user moves an object, he needs feedback if the position is valid or invalid.
Description If an object is placed on a denied position, the object moves back to its former position.
Consistency See: Position Accepted
Benefit A transition to show that the object moves back to its former position to visualize that it is invalid to place the object on this position. With a directional transition, the user is able to see where he can find it.
Illustration The object seems to be pushed back to its former position.
 
Minimize
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to explain where a minimized object can be found. The object is placed on a less prominent place on the screen, but it is still available.
Field Of Use When the user needs to minimize an object.
Description The object shrinks while moving to a certain position on the screen.
Consistency The reversed transition is extending the object back to fullscreen.
Benefit A transition to explain where a minimized object can be found. The object is placed on a less prominent place on the screen, but it is still available.
Illustration The object seems to shrink.
 
Add to List
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to explain the rearranged structure of a list.
Field Of Use When the user adds another object to a list.
Description The new object slides into position while the old content of the list makes place for the new one.
Consistency The reversed transition is deleting an object of the list.
Benefit A transition to explain the rearranged structure of a list.
Illustration The objects seem to make space for the new one.
 
Scroll
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to scroll a list.
Field Of Use When moving an object horizontally or vertically.
Description A one directional scrolling.
Consistency -
Benefit A transition to scroll a list.
Illustration -
 
Saving Indicator
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to tell the user where to find the object after saving/bookmarking/downloading.
Field Of Use When the user saves, downloads or bookmarks an object.
Description As soon as an object is saved/downloading/bookmarked, it actually moves into the folder.
Consistency -
Benefit A transition to tell the user where to find the object after saving/bookmarking/downloading.
Illustration An instance of the object seems to moves into the folder.
 
Zoom
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to show a direct connection between the object of interest and further information.
Field Of Use When the user focuses the object of interest.
Description The object of interest zooms in for more detailed information.
Consistency Zoom in - zoom out.
Benefit A transition to show a direct connection between the object of interest and further information.
Illustration The object of interest seems to come closer and a more detailed view is possible.
 
Invitation – Disinvitation
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to show that the placing of an object in a list is valid or invalid.
Field Of Use When the user tries to place an object in a list.
Description Moving an object from one place to another in a list, the list reacts as soon as the object moves above it.
Consistency The transition should visualize if an object can be placed or not.
Benefit A transition to show that the placing of an object in a list is valid or invalid.
Illustration The list seems to open or close for the object.
 
Object Switch
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to explain the connection by switching between applications.
Field Of Use When the user switches between objects.
Description The present object moves to the back, while the new application moves to the front.
Consistency -
Benefit A transition to explain the connection by switching between applications.
Illustration The objects seem to make place for the other.
 
Fixed Label
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to show the connection between the label and the content.
Field Of Use When the user scrolls through a list with labels.
Description The label of the list stays in top of the list, as long as the content is available.
Consistency -
Benefit A transition to show the connection between the label and the content.
Illustration The label seems to be stuck at top of the list.
 
Pan
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to pan a map.
Field Of Use When moving an object horizontally and vertically.
Description A two directional scrolling.
Consistency -
Benefit A transition to pan a map.
Illustration -
 
Accordion
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to show a direct connection between the object of interest and further information.
Field Of Use When there is additional content relating to the object of interest.
Description The content of the object of interest reveals. The content area extends and pushes further menu items down.
Consistency The object of interest shrinks back to regular size.
Benefit A transition to show a direct connection between the object of interest and further information.
Illustration The menu seems to act as an accordion.
 
Combine – Split
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to visualize the connection between objects by splitting or combining them.
Field Of Use When the user combines objects.
Description The objects are combined/splitted by the interaction of the user.
Consistency Splitting and combining.
Benefit A transition to visualize the connection between objects by splitting or combining them.
Illustration Splitting and combining objects.
 
End of List Indicator
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to indicate the end of a list. The list moves back into position automatically.
Field Of Use When the user reaches the end of a scrolling list.
Description The list bounces back with a spring motion at the end of the list.
Consistency The transition indicates the beginning and the end of a list.
Benefit A transition to indicate the end of a list. The list moves back into position automatically.
Illustration To indicate the end, the list seems to be fixed.
 
 
 
Spatial Extension Description
 
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.
 
 
Spatial Extension Transitions
 
Popup
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to explain which specific object scales to fullscreen view.
Field Of Use When the user interacts with an object.
Description The object transitions from a thumbnail view to full screen view.
Consistency The reversed transition is the transition from full screen view back to thumbnail view.
Benefit A transition to explain which specific object scales to fullscreen view.
Illustration The object seems to grow on stage.
 
Page Turn
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A Transition to explain the information architecture of the list in a narrative way.
Field Of Use When the user turns a page.
Description The page turns while the user swipes the content.
Consistency Directional transition. The page turns according to the direction of the interaction.
Benefit A Transition to explain the information architecture of the list in a narrative way.
Illustration The virtual page seems to behave similar to its real reference.
 
Flip
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to show a direct connection between the object of interest and further information.
Field Of Use When there is additional content relating to the object of interest.
Description The object turns for further information.
Consistency 180° has two sides – two states.
Benefit A transition to show a direct connection between the object of interest and further information.
Illustration Further information seem to be on the back of an object.
 
Zoom
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to show a direct connection between the object of interest and further information.
Field Of Use When the user focuses the object of interest.
Description The object of interest zooms in for more detailed information.
Consistency Zoom in - zoom out.
Benefit A transition to show a direct connection between the object of interest and further information.
Illustration The object of interest seems to come closer and a more detailed view is possible.
 
Popup Preview
 
Spatial Extension
This transition belongs to Spatial Extension. This category allows a gradual experience of information by opening/closing the space at given time.
A transition to let the user have a quick preview of the content by interacting with the thumbnail view.
Field Of Use
Description // Field of Use: // Description: // Consistency: // Description: // Illusion:
Consistency
Benefit
Illustration
 
Appearing Controls
 
Spatial Extension
This transition belongs to Spatial Extension. This category allows a gradual experience of information by opening/closing the space at given time.
A transition to let the user concentrate on the content without being distracted by playback controls. It is only visible when needed.
Field Of Use When the user needs to activate/deactivate the video playback controls.
Description By tapping the video, the playback controls appear.
Consistency Tap to appear the playback controls – tap to disappear
Benefit A transition to let the user concentrate on the content without being distracted by playback controls. It is only visible when needed.
Illustration -
 
Minimize
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to explain where a minimized object can be found. The object is placed on a less prominent place on the screen, but it is still available.
Field Of Use When the user needs to minimize an object.
Description The object shrinks while moving to a certain position on the screen.
Consistency The reversed transition is extending the object back to fullscreen.
Benefit A transition to explain where a minimized object can be found. The object is placed on a less prominent place on the screen, but it is still available.
Illustration The object seems to shrink.
 
Scroll
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to scroll a list.
Field Of Use When moving an object horizontally or vertically.
Description A one directional scrolling.
Consistency -
Benefit A transition to scroll a list.
Illustration -
 
Half Flip
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to show a direct connection between the object of interest and further information.
Field Of Use When there is additional content relating to the object of interest.
Description The object rotates from 2d space to 3d space for further information.
Consistency -
Benefit A transition to show a direct connection between the object of interest and further information.
Illustration The 2d object rotates in space to show the 3d possibilities for placing information.
 
Text Truncation
 
Spatial Extension
This transition belongs to Spatial Extension. This category allows a gradual experience of information by opening/closing the space at given time.
A transition to show more text on less needed space.
Field Of Use When there is hidden text.
Description If the text is longer than its text field, the text is truncated and reveals by moving with the users reading flow.
Consistency The direction of the moving truncated text depends on the cultural reading flow.
Benefit A transition to show more text on less needed space.
Illustration -
 
Combine – Split
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to visualize the connection between objects by splitting or combining them.
Field Of Use When the user combines objects.
Description The objects are combined/splitted by the interaction of the user.
Consistency Splitting and combining.
Benefit A transition to visualize the connection between objects by splitting or combining them.
Illustration Splitting and combining objects.
 
Object Switch
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to explain the connection by switching between applications.
Field Of Use When the user switches between objects.
Description The present object moves to the back, while the new application moves to the front.
Consistency -
Benefit A transition to explain the connection by switching between applications.
Illustration The objects seem to make place for the other.
 
Pan
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to pan a map.
Field Of Use When moving an object horizontally and vertically.
Description A two directional scrolling.
Consistency -
Benefit A transition to pan a map.
Illustration -
 
Folding
 
Spatial Extension
This transition belongs to Spatial Extension. This category allows a gradual experience of information by opening/closing the space at given time.
A transition to show that only a part of an object is visible. By interacting with it, it reveals to full size.
Field Of Use When there is additional content relating to the object of interest.
Description The interaction opens both (or several) sides of a folded object.
Consistency fold in - fold out
Benefit A transition to show that only a part of an object is visible. By interacting with it, it reveals to full size.
Illustration The object seems to be folded.
 
Area Split
 
Spatial Extension
This transition belongs to Spatial Extension. This category allows a gradual experience of information by opening/closing the space at given time.
A transition to show a direct connection between the object of interest and further information.
Field Of Use When there is additional content relating to the object of interest.
Description The area splits to reveal detailed information.
Consistency Splitting - merging.
Benefit A transition to show a direct connection between the object of interest and further information.
Illustration The screen seems to split and the content is underneath the layer of the actual screen.
 
Swipe to Delete
 
Spatial Extension
This transition belongs to Spatial Extension. This category allows a gradual experience of information by opening/closing the space at given time.
A transition to support an intuitive interaction of deleting an object. After swiping an object of the screen, a button appears to confirm the action.
Field Of Use When the user needs the delete function for the related list item.
Description The delete button slides in by swiping a list item.
Consistency directional swipe
Benefit A transition to support an intuitive interaction of deleting an object. After swiping an object of the screen, a button appears to confirm the action.
Illustration The delete button seems to be pushed on screen after swiping a list element.
 
Fan of Stack
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to explain the arrangement of objects, by showing how they are placed.
Field Of Use When the user opens a stack of objects.
Description The stack opens while the user pinches an object‘s stack.
Consistency Closing the stack.
Benefit A transition to explain the arrangement of objects, by showing how they are placed.
Illustration The objects seems to be extended on the stage.
 
Accordion
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to show a direct connection between the object of interest and further information.
Field Of Use When there is additional content relating to the object of interest.
Description The content of the object of interest reveals. The content area extends and pushes further menu items down.
Consistency The object of interest shrinks back to regular size.
Benefit A transition to show a direct connection between the object of interest and further information.
Illustration The menu seems to act as an accordion.
 
Mask Expand
 
Spatial Extension
This transition belongs to Spatial Extension. This category allows a gradual experience of information by opening/closing the space at given time.
A transition to show that by scaling the mask of an object reveals the hidden content.
Field Of Use When there is additional content relating to the object of interest.
Description The object expands its borders to reveal hidden content.
Consistency Shrinking back to regular size.
Benefit A transition to show that by scaling the mask of an object reveals the hidden content.
Illustration Further content is hidden behind the border of an object.
 
Growing Input Field
 
Spatial Extension
This transition belongs to Spatial Extension. This category allows a gradual experience of information by opening/closing the space at given time.
A transition to visualize the growing of an input field according to the length of the input.
Field Of Use When the user needs more space to display the input.
Description The size of the input field grows according to the size of the user‘s input.
Consistency Deleting the input shrinks back the input field.
Benefit A transition to visualize the growing of an input field according to the length of the input.
Illustration The input field seems to grow according to the user‘s input.
 
Mode Switch
 
Spatial Extension
This transition belongs to Spatial Extension. This category allows a gradual experience of information by opening/closing the space at given time.
A transition to introduce new controls by sliding in. The moving of the items‘ labels underlines the importance of the new controls.
Field Of Use When the user needs extra controls for editing the related list.
Description As the mode switches, the extra controls slide in. The items‘ labels move to indicate the mode switch.
Consistency The extra controls move off the screen by switching the mode back to regular mode.
Benefit A transition to introduce new controls by sliding in. The moving of the items‘ labels underlines the importance of the new controls.
Illustration The extra controls seem to be pushed on screen after swiping a list element.
 
 
 
Awaking Controls Description
 
Awaking 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.
 
 
Awaking Controls Transitions
 
Accordion
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to show a direct connection between the object of interest and further information.
Field Of Use When there is additional content relating to the object of interest.
Description The content of the object of interest reveals. The content area extends and pushes further menu items down.
Consistency The object of interest shrinks back to regular size.
Benefit A transition to show a direct connection between the object of interest and further information.
Illustration The menu seems to act as an accordion.
 
Activate – Deactivate
 
Awaking Controls
This transition belongs to Awaking Controls. This category allows the user to focus on contextual controls. They appear when needed, and disappear as soon as they are no longer needed.
A transition to show that the user activates or deactivates a button. The user can see the impact of the interaction.
Field Of Use When the user activates or deactivates a function.
Description An object on the button indicates the button state by changing the position. The button is either activated or deactivated.
Consistency -
Benefit A transition to show that the user activates or deactivates a button. The user can see the impact of the interaction.
Illustration The moving object on the button gives a haptic appeal.
 
Spring Refresh
 
Awaking Controls
This transition belongs to Awaking Controls. This category allows the user to focus on contextual controls. They appear when needed, and disappear as soon as they are no longer needed.
A transition to use the intuitive interaction of a list. By scrolling a list, the function appears underneath the related list.
Field Of Use When the user refreshes or updates the related list.
Description The function is revealed by overstretching the spring of a list. The function is activated by either releasing the list, or pulling the list to a specific point.
Consistency Covering the function should cancel the action.
Benefit A transition to use the intuitive interaction of a list. By scrolling a list, the function appears underneath the related list.
Illustration By overstretching the spring of a list, the function seems to be underneath the related list.
 
Flip
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to show a direct connection between the object of interest and further information.
Field Of Use When there is additional content relating to the object of interest.
Description The object turns for further information.
Consistency 180° has two sides – two states.
Benefit A transition to show a direct connection between the object of interest and further information.
Illustration Further information seem to be on the back of an object.
 
Button Relabel
 
Awaking Controls
This transition belongs to Awaking Controls. This category allows the user to focus on contextual controls. They appear when needed, and disappear as soon as they are no longer needed.
A transition to show that the label of the button changes to enable another function.
Field Of Use When the function of a button switches, the label of the button relabels.
Description Activating a button enables a different function for this specific button, which is visualized in the button‘s label. The button resizes according to the length of the label.
Consistency -
Benefit A transition to show that the label of the button changes to enable another function.
Illustration -
 
Appearing Controls
 
Spatial Extension
This transition belongs to Spatial Extension. This category allows a gradual experience of information by opening/closing the space at given time.
A transition to let the user concentrate on the content without being distracted by playback controls. It is only visible when needed.
Field Of Use When the user needs to activate/deactivate the video playback controls.
Description By tapping the video, the playback controls appear.
Consistency Tap to appear the playback controls – tap to disappear
Benefit A transition to let the user concentrate on the content without being distracted by playback controls. It is only visible when needed.
Illustration -
 
Half Flip
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to show a direct connection between the object of interest and further information.
Field Of Use When there is additional content relating to the object of interest.
Description The object rotates from 2d space to 3d space for further information.
Consistency -
Benefit A transition to show a direct connection between the object of interest and further information.
Illustration The 2d object rotates in space to show the 3d possibilities for placing information.
 
Swipe to Delete
 
Spatial Extension
This transition belongs to Spatial Extension. This category allows a gradual experience of information by opening/closing the space at given time.
A transition to support an intuitive interaction of deleting an object. After swiping an object of the screen, a button appears to confirm the action.
Field Of Use When the user needs the delete function for the related list item.
Description The delete button slides in by swiping a list item.
Consistency directional swipe
Benefit A transition to support an intuitive interaction of deleting an object. After swiping an object of the screen, a button appears to confirm the action.
Illustration The delete button seems to be pushed on screen after swiping a list element.
 
Slide-in Controls
 
Awaking Controls
This transition belongs to Awaking Controls. This category allows the user to focus on contextual controls. They appear when needed, and disappear as soon as they are no longer needed.
A transition to introduce a new object. It is only visible when needed.
Field Of Use When the user needs to activate the touch keyboard.
Description The object slides in to introduce the new input field.
Consistency Slide in - slide out.
Benefit A transition to introduce a new object. It is only visible when needed.
Illustration The object slides in.
 
Area Split
 
Spatial Extension
This transition belongs to Spatial Extension. This category allows a gradual experience of information by opening/closing the space at given time.
A transition to show a direct connection between the object of interest and further information.
Field Of Use When there is additional content relating to the object of interest.
Description The area splits to reveal detailed information.
Consistency Splitting - merging.
Benefit A transition to show a direct connection between the object of interest and further information.
Illustration The screen seems to split and the content is underneath the layer of the actual screen.
 
Mode Switch
 
Spatial Extension
This transition belongs to Spatial Extension. This category allows a gradual experience of information by opening/closing the space at given time.
A transition to introduce new controls by sliding in. The moving of the items‘ labels underlines the importance of the new controls.
Field Of Use When the user needs extra controls for editing the related list.
Description As the mode switches, the extra controls slide in. The items‘ labels move to indicate the mode switch.
Consistency The extra controls move off the screen by switching the mode back to regular mode.
Benefit A transition to introduce new controls by sliding in. The moving of the items‘ labels underlines the importance of the new controls.
Illustration The extra controls seem to be pushed on screen after swiping a list element.
 
 
 
Highlight Description
 
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.
 
 
Highlight Transitions
 
Popup
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to explain which specific object scales to fullscreen view.
Field Of Use When the user interacts with an object.
Description The object transitions from a thumbnail view to full screen view.
Consistency The reversed transition is the transition from full screen view back to thumbnail view.
Benefit A transition to explain which specific object scales to fullscreen view.
Illustration The object seems to grow on stage.
 
Slide-in Controls
 
Awaking Controls
This transition belongs to Awaking Controls. This category allows the user to focus on contextual controls. They appear when needed, and disappear as soon as they are no longer needed.
A transition to introduce a new object. It is only visible when needed.
Field Of Use When the user needs to activate the touch keyboard.
Description The object slides in to introduce the new input field.
Consistency Slide in - slide out.
Benefit A transition to introduce a new object. It is only visible when needed.
Illustration The object slides in.
 
Fade to Highlight
 
Highlight
This transition belongs to Highlight. This category draws the user's attention and clarifies changes of states in the user interface, which otherwise might be missed.
A transition to direct the user‘s view by an attention grabbing animation of the object.
Field Of Use When a specific object needs to be highlighted.
Description The surrounding objects fade to highlight.
Consistency -
Benefit A transition to direct the user‘s view by an attention grabbing animation of the object.
Illustration -
 
Glow to Highlight
 
Highlight
This transition belongs to Highlight. This category draws the user's attention and clarifies changes of states in the user interface, which otherwise might be missed.
A transition to direct the user‘s view by an attention grabbing animation of the object.
Field Of Use When a specific object needs to be highlighted.
Description The object glows to highlight.
Consistency -
Benefit A transition to direct the user‘s view by an attention grabbing animation of the object.
Illustration -
 
Popup Preview
 
Spatial Extension
This transition belongs to Spatial Extension. This category allows a gradual experience of information by opening/closing the space at given time.
A transition to let the user have a quick preview of the content by interacting with the thumbnail view.
Field Of Use
Description // Field of Use: // Description: // Consistency: // Description: // Illusion:
Consistency
Benefit
Illustration
 
Scale to Highlight
 
Highlight
This transition belongs to Highlight. This category draws the user's attention and clarifies changes of states in the user interface, which otherwise might be missed.
A transition to direct the user‘s view by an attention grabbing animation of the object.
Field Of Use When a specific object needs to be highlighted.
Description The object scales to highlight.
Consistency -
Benefit A transition to direct the user‘s view by an attention grabbing animation of the object.
Illustration -
 
Blur to Highlight
 
Highlight
This transition belongs to Highlight. This category draws the user's attention and clarifies changes of states in the user interface, which otherwise might be missed.
A transition to direct the user‘s view by an attention grabbing animation of the object.
Field Of Use When a specific object needs to be highlighted.
Description The surrounding objects blur to highlight.
Consistency -
Benefit A transition to direct the user‘s view by an attention grabbing animation of the object.
Illustration -
 
Change Depth to Highlight
 
Highlight
This transition belongs to Highlight. This category draws the user's attention and clarifies changes of states in the user interface, which otherwise might be missed.
A transition to direct the user‘s view by an attention grabbing animation of the object.
Field Of Use When a specific object needs to be highlighted.
Description The object moves in front of the other highlight.
Consistency -
Benefit A transition to direct the user‘s view by an attention grabbing animation of the object.
Illustration The objects seem to change the depth.
 
Availability
 
Highlight
This transition belongs to Highlight. This category draws the user's attention and clarifies changes of states in the user interface, which otherwise might be missed.
A transition to show the progress of a loading behavior of individual objects.
Field Of Use When the availability of objects needs to be indicated.
Description It indicates the loading behavior of specific items by an underlining revealing animation.
Consistency -
Benefit A transition to show the progress of a loading behavior of individual objects.
Illustration -
 
Rotate to Highlight
 
Highlight
This transition belongs to Highlight. This category draws the user's attention and clarifies changes of states in the user interface, which otherwise might be missed.
A transition to direct the user‘s view by an attention grabbing animation of the object.
Field Of Use When a specific object needs to be highlighted.
Description The object rotates to highlight.
Consistency -
Benefit A transition to direct the user‘s view by an attention grabbing animation of the object.
Illustration -
 
Darken to Highlight
 
Highlight
This transition belongs to Highlight. This category draws the user's attention and clarifies changes of states in the user interface, which otherwise might be missed.
A transition to direct the user‘s view by an attention grabbing animation of the object.
Field Of Use When a specific object needs to be highlighted.
Description The surrounding objects darken to highlight.
Consistency -
Benefit A transition to direct the user‘s view by an attention grabbing animation of the object.
Illustration -
 
Gray out to Highlight
 
Highlight
This transition belongs to Highlight. This category draws the user's attention and clarifies changes of states in the user interface, which otherwise might be missed.
A transition to direct the user‘s view by an attention grabbing animation of the object.
Field Of Use When a specific object needs to be highlighted.
Description The surrounding objects gray out to highlight.
Consistency -
Benefit A transition to direct the user‘s view by an attention grabbing animation of the object.
Illustration -
 
Solidarity
 
Highlight
This transition belongs to Highlight. This category draws the user's attention and clarifies changes of states in the user interface, which otherwise might be missed.
A transition to indicate the connection between objects.
Field Of Use When the user moves an object into another.
Description The objects refer to the object of interest, by scaling or shrinking, according to its solidarity.
Consistency -
Benefit A transition to indicate the connection between objects.
Illustration -
 
Color to Highlight
 
Highlight
This transition belongs to Highlight. This category draws the user's attention and clarifies changes of states in the user interface, which otherwise might be missed.
A transition to direct the user‘s view by an attention grabbing animation of the object.
Field Of Use When a specific object needs to be highlighted.
Description The object colors to highlight.
Consistency -
Benefit A transition to direct the user‘s view by an attention grabbing animation of the object.
Illustration -
 
Flip to Highlight
 
Highlight
This transition belongs to Highlight. This category draws the user's attention and clarifies changes of states in the user interface, which otherwise might be missed.
A transition to direct the user‘s view by an attention grabbing animation of the object.
Field Of Use When a specific object needs to be highlighted.
Description The object flips to highlight.
Consistency -
Benefit A transition to direct the user‘s view by an attention grabbing animation of the object.
Illustration -
 
Expand to Highlight
 
Highlight
This transition belongs to Highlight. This category draws the user's attention and clarifies changes of states in the user interface, which otherwise might be missed.
A transition to show which object is active on interaction by expanding it.
Field Of Use When a specific object needs to be highlighted.
Description The objects grows as soon as the user interacts with it.
Consistency If an object is no longer activated, it should shrink back to the original size.
Benefit A transition to show which object is active on interaction by expanding it.
Illustration -
 
 
 
Feedback Description
 
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.
 
 
Feedback Transitions
 
Minimize
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to explain where a minimized object can be found. The object is placed on a less prominent place on the screen, but it is still available.
Field Of Use When the user needs to minimize an object.
Description The object shrinks while moving to a certain position on the screen.
Consistency The reversed transition is extending the object back to fullscreen.
Benefit A transition to explain where a minimized object can be found. The object is placed on a less prominent place on the screen, but it is still available.
Illustration The object seems to shrink.
 
Page Indicator
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to visualize the amount of pages while indicating the current pages.
Field Of Use When flipping through pages book, screens.
Description A moving dot to indicate the switching of a page. At the same time it shows the amount of pages.
Consistency -
Benefit A transition to visualize the amount of pages while indicating the current pages.
Illustration -
 
Position Denied
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to show that the object moves back to its former position to visualize that it is invalid to place the object on this position. With a directional transition, the user is able to see where he can find it.
Field Of Use When the user moves an object, he needs feedback if the position is valid or invalid.
Description If an object is placed on a denied position, the object moves back to its former position.
Consistency See: Position Accepted
Benefit A transition to show that the object moves back to its former position to visualize that it is invalid to place the object on this position. With a directional transition, the user is able to see where he can find it.
Illustration The object seems to be pushed back to its former position.
 
Invitation – Disinvitation
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to show that the placing of an object in a list is valid or invalid.
Field Of Use When the user tries to place an object in a list.
Description Moving an object from one place to another in a list, the list reacts as soon as the object moves above it.
Consistency The transition should visualize if an object can be placed or not.
Benefit A transition to show that the placing of an object in a list is valid or invalid.
Illustration The list seems to open or close for the object.
 
Progress bar
 
Feedback
This transition belongs to Feedback. This category signifies a running process or indicates whether or not an action was successful, upon an unsuccessful action it explains why.
A transition to show the progress of the download.
Field Of Use When a progress needs to be indicated.
Description The progress bar fills according to the progress of the download and indicates the duration.
Consistency -
Benefit A transition to show the progress of the download.
Illustration To let the progress bar appear faster, animated lines inside the progress bar seem to speed up the download.
 
Add to List
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to explain the rearranged structure of a list.
Field Of Use When the user adds another object to a list.
Description The new object slides into position while the old content of the list makes place for the new one.
Consistency The reversed transition is deleting an object of the list.
Benefit A transition to explain the rearranged structure of a list.
Illustration The objects seem to make space for the new one.
 
Saving Indicator
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to tell the user where to find the object after saving/bookmarking/downloading.
Field Of Use When the user saves, downloads or bookmarks an object.
Description As soon as an object is saved/downloading/bookmarked, it actually moves into the folder.
Consistency -
Benefit A transition to tell the user where to find the object after saving/bookmarking/downloading.
Illustration An instance of the object seems to moves into the folder.
 
Heal
 
Feedback
This transition belongs to Feedback. This category signifies a running process or indicates whether or not an action was successful, upon an unsuccessful action it explains why.
A transition to show that the objects of a list reacts directly on the user‘s input. The interaction is validated.
Field Of Use When the user rearranges objects in a list.
Description The objects of a list rearrange as an object is moved, added, or removed within the list.
Consistency -
Benefit A transition to show that the objects of a list reacts directly on the user‘s input. The interaction is validated.
Illustration The list seems to heal by the repositioning of the objects.
 
End of List Indicator
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to indicate the end of a list. The list moves back into position automatically.
Field Of Use When the user reaches the end of a scrolling list.
Description The list bounces back with a spring motion at the end of the list.
Consistency The transition indicates the beginning and the end of a list.
Benefit A transition to indicate the end of a list. The list moves back into position automatically.
Illustration To indicate the end, the list seems to be fixed.
 
Refresh Indicator
 
Feedback
This transition belongs to Feedback. This category signifies a running process or indicates whether or not an action was successful, upon an unsuccessful action it explains why.
A transition to indicates that the system is loading. It explains that the user needs to wait for a system‘s operation.
Field Of Use When the refreshing of an object needs to be indicated.
Description A spinning wheel to indicate an operating system.
Consistency -
Benefit A transition to indicates that the system is loading. It explains that the user needs to wait for a system‘s operation.
Illustration -
 
Button to Label
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to show the connection between the button and the content. The directional transition explains the structure.
Field Of Use When navigating through hierarchy.
Description The label of the button transitions into the title of the content.
Consistency The title of the content changes.
Benefit A transition to show the connection between the button and the content. The directional transition explains the structure.
Illustration The button becomes the label.
 
Popup Preview
 
Spatial Extension
This transition belongs to Spatial Extension. This category allows a gradual experience of information by opening/closing the space at given time.
A transition to let the user have a quick preview of the content by interacting with the thumbnail view.
Field Of Use
Description // Field of Use: // Description: // Consistency: // Description: // Illusion:
Consistency
Benefit
Illustration
 
Close
 
Feedback
This transition belongs to Feedback. This category signifies a running process or indicates whether or not an action was successful, upon an unsuccessful action it explains why.
A transition to explain the impact of closing an object. It shows that the object has disappeared.
Field Of Use When the user needs feedback for closing an object.
Description The object is shrinks into the close button to indicate that the object closes.
Consistency -
Benefit A transition to explain the impact of closing an object. It shows that the object has disappeared.
Illustration The object seems to be sucked in by the close button.
 
End of Page Indicator
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to indicate the end of flipping pages. The last page flips back automatically.
Field Of Use When the user reaches the end of flipping pages.
Description The flipping page bounces back at the last page.
Consistency The transition indicates the beginning and the end of flipping pages.
Benefit A transition to indicate the end of flipping pages. The last page flips back automatically.
Illustration To indicate the end, the last page seems to be fixed.
 
Availability
 
Highlight
This transition belongs to Highlight. This category draws the user's attention and clarifies changes of states in the user interface, which otherwise might be missed.
A transition to show the progress of a loading behavior of individual objects.
Field Of Use When the availability of objects needs to be indicated.
Description It indicates the loading behavior of specific items by an underlining revealing animation.
Consistency -
Benefit A transition to show the progress of a loading behavior of individual objects.
Illustration -
 
Scroll Bar
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to indicate the length and position of the related list.
Field Of Use When scrolling a list.
Description The length and the position of a scrollbar give the user an impression of the length and the position of the scrolling list.
Consistency -
Benefit A transition to indicate the length and position of the related list.
Illustration -
 
Position Accepted
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to show that the object moves into position to visualize that the position is accepted. The interaction is validated.
Field Of Use When the user moves an object, he needs feedback if the position is valid or invalid.
Description If an object is placed on a accepted position, the object moves automatically into position.
Consistency See: Position Denied
Benefit A transition to show that the object moves into position to visualize that the position is accepted. The interaction is validated.
Illustration The object seems to place itself.
 
Activate – Deactivate
 
Awaking Controls
This transition belongs to Awaking Controls. This category allows the user to focus on contextual controls. They appear when needed, and disappear as soon as they are no longer needed.
A transition to show that the user activates or deactivates a button. The user can see the impact of the interaction.
Field Of Use When the user activates or deactivates a function.
Description An object on the button indicates the button state by changing the position. The button is either activated or deactivated.
Consistency -
Benefit A transition to show that the user activates or deactivates a button. The user can see the impact of the interaction.
Illustration The moving object on the button gives a haptic appeal.
 
Button Relabel
 
Awaking Controls
This transition belongs to Awaking Controls. This category allows the user to focus on contextual controls. They appear when needed, and disappear as soon as they are no longer needed.
A transition to show that the label of the button changes to enable another function.
Field Of Use When the function of a button switches, the label of the button relabels.
Description Activating a button enables a different function for this specific button, which is visualized in the button‘s label. The button resizes according to the length of the label.
Consistency -
Benefit A transition to show that the label of the button changes to enable another function.
Illustration -
 
Spring Refresh
 
Awaking Controls
This transition belongs to Awaking Controls. This category allows the user to focus on contextual controls. They appear when needed, and disappear as soon as they are no longer needed.
A transition to use the intuitive interaction of a list. By scrolling a list, the function appears underneath the related list.
Field Of Use When the user refreshes or updates the related list.
Description The function is revealed by overstretching the spring of a list. The function is activated by either releasing the list, or pulling the list to a specific point.
Consistency Covering the function should cancel the action.
Benefit A transition to use the intuitive interaction of a list. By scrolling a list, the function appears underneath the related list.
Illustration By overstretching the spring of a list, the function seems to be underneath the related list.
 
 
 
Feedforward Description
 
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.
 
 
Feedforward Transitions
 
Explaining Direction
 
Feedforward
This transition belongs to Feedforward. This category visualizes the consequences of the action. Therefore the resulting event is more predictable and easier to follow.
A transition to explain a directional interaction.
Field Of Use When the system needs to explain a directional interaction.
Description A glow moves directional across the object to explain the interaction.
Consistency -
Benefit A transition to explain a directional interaction.
Illustration The object seems to glow.
 
Explaining Interaction
 
Feedforward
This transition belongs to Feedforward. This category visualizes the consequences of the action. Therefore the resulting event is more predictable and easier to follow.
A transition to explain the interaction in form of a tutorial-like visualization.
Field Of Use When the user needs explanation for a unknown interaction.
Description An animated fingerprint explains how and where to interact. The animation should only start if the user waits for a little time.
Consistency -
Benefit A transition to explain the interaction in form of a tutorial-like visualization.
Illustration -
 
Affordance
 
Feedforward
This transition belongs to Feedforward. This category visualizes the consequences of the action. Therefore the resulting event is more predictable and easier to follow.
A transition to present a possible interaction.
Field Of Use When the system needs to introduce its interactivity.
Description The fullscreen object jumps to reveal the hidden content below.
Consistency -
Benefit A transition to present a possible interaction.
Illustration The jumping object seems to cover the content.
 
Explaining Position
 
Feedforward
This transition belongs to Feedforward. This category visualizes the consequences of the action. Therefore the resulting event is more predictable and easier to follow.
A transition to show the placing of an object.
Field Of Use When the user needs a hint for placing an object.
Description The transition indicates a valid position by showing an instance of the object moving towards the valid position.
Consistency -
Benefit A transition to show the placing of an object.
Illustration -
 
Hidden Feature
 
Feedforward
This transition belongs to Feedforward. This category visualizes the consequences of the action. Therefore the resulting event is more predictable and easier to follow.
A transition to explain what is necessary to activate a hidden function.
Field Of Use When the user activates the spring refresh, the effecting hidden function is visualized.
Description The function hidden function appears below the list and explains it outcome.
Consistency The function is only released at a specific point.
Benefit A transition to explain what is necessary to activate a hidden function.
Illustration -
 
Solidarity
 
Highlight
This transition belongs to Highlight. This category draws the user's attention and clarifies changes of states in the user interface, which otherwise might be missed.
A transition to indicate the connection between objects.
Field Of Use When the user moves an object into another.
Description The objects refer to the object of interest, by scaling or shrinking, according to its solidarity.
Consistency -
Benefit A transition to indicate the connection between objects.
Illustration -
 
Explaining Length
 
Feedforward
This transition belongs to Feedforward. This category visualizes the consequences of the action. Therefore the resulting event is more predictable and easier to follow.
A transition to communicate the length and the position of a list.
Field Of Use When the user needs a hint for the length of an object.
Description The scroll bar appears as the user interacts with the list. The animation explains the length and the position of that list.
Consistency The object disappears as the user releases the list.
Benefit A transition to communicate the length and the position of a list.
Illustration -
 
 
 
Motion Principles
 
 
Does your animation have weight, depth and balance? [De Cock 2011: S.16] Disney's Twelve Basic Principles of Animation is a set of rules that defines a realistic impression of a motion with the basic laws of physics. Some of these principles have great relevance for the animations in the user Interface.
 
 
About
 
This Website was created in context of the Interface Design Bachelor's degree at the FH Potsdam 2011 by Johannes Tonollo. »Meaningful Transitions - Motion Graphics in the User Interface« deals with the use of animations in software user interface. This website documents transitions in a clustered way to show at which place transitions can be a helpful extension to the static user interface, because of cognitive benefits to enhance the user experience.

Click to read »Meaningful Transitions - Motion Graphics in the User Interface« (Preview/German)

If you are interested in reading the full Thesis (in German), please contact me at:
info@johannes-tonollo.com. I would be happy to send it to you.
 
 
Contact
 
If you are interested in this topic and would like to exchange information don't hesitate to contact me. You can contact me for work, as well.

Email: info@johannes-tonollo.com
Visit my portfolio on www.johannes-tonollo.com
Accordion
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to show a direct connection between the object of interest and further information.
Field Of Use When there is additional content relating to the object of interest.
Description The content of the object of interest reveals. The content area extends and pushes further menu items down.
Consistency The object of interest shrinks back to regular size.
Benefit A transition to show a direct connection between the object of interest and further information.
Illustration The menu seems to act as an accordion.
 
Appearing Controls
 
Spatial Extension
This transition belongs to Spatial Extension. This category allows a gradual experience of information by opening/closing the space at given time.
A transition to let the user concentrate on the content without being distracted by playback controls. It is only visible when needed.
Field Of Use When the user needs to activate/deactivate the video playback controls.
Description By tapping the video, the playback controls appear.
Consistency Tap to appear the playback controls – tap to disappear
Benefit A transition to let the user concentrate on the content without being distracted by playback controls. It is only visible when needed.
Illustration -
 
Button Relabel
 
Awaking Controls
This transition belongs to Awaking Controls. This category allows the user to focus on contextual controls. They appear when needed, and disappear as soon as they are no longer needed.
A transition to show that the label of the button changes to enable another function.
Field Of Use When the function of a button switches, the label of the button relabels.
Description Activating a button enables a different function for this specific button, which is visualized in the button‘s label. The button resizes according to the length of the label.
Consistency -
Benefit A transition to show that the label of the button changes to enable another function.
Illustration -
 
Color to Highlight
 
Highlight
This transition belongs to Highlight. This category draws the user's attention and clarifies changes of states in the user interface, which otherwise might be missed.
A transition to direct the user‘s view by an attention grabbing animation of the object.
Field Of Use When a specific object needs to be highlighted.
Description The object colors to highlight.
Consistency -
Benefit A transition to direct the user‘s view by an attention grabbing animation of the object.
Illustration -
 
End of List Indicator
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to indicate the end of a list. The list moves back into position automatically.
Field Of Use When the user reaches the end of a scrolling list.
Description The list bounces back with a spring motion at the end of the list.
Consistency The transition indicates the beginning and the end of a list.
Benefit A transition to indicate the end of a list. The list moves back into position automatically.
Illustration To indicate the end, the list seems to be fixed.
 
Explaining Interaction
 
Feedforward
This transition belongs to Feedforward. This category visualizes the consequences of the action. Therefore the resulting event is more predictable and easier to follow.
A transition to explain the interaction in form of a tutorial-like visualization.
Field Of Use When the user needs explanation for a unknown interaction.
Description An animated fingerprint explains how and where to interact. The animation should only start if the user waits for a little time.
Consistency -
Benefit A transition to explain the interaction in form of a tutorial-like visualization.
Illustration -
 
Fan of Stack
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to explain the arrangement of objects, by showing how they are placed.
Field Of Use When the user opens a stack of objects.
Description The stack opens while the user pinches an object‘s stack.
Consistency Closing the stack.
Benefit A transition to explain the arrangement of objects, by showing how they are placed.
Illustration The objects seems to be extended on the stage.
 
Folding
 
Spatial Extension
This transition belongs to Spatial Extension. This category allows a gradual experience of information by opening/closing the space at given time.
A transition to show that only a part of an object is visible. By interacting with it, it reveals to full size.
Field Of Use When there is additional content relating to the object of interest.
Description The interaction opens both (or several) sides of a folded object.
Consistency fold in - fold out
Benefit A transition to show that only a part of an object is visible. By interacting with it, it reveals to full size.
Illustration The object seems to be folded.
 
Half Flip
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to show a direct connection between the object of interest and further information.
Field Of Use When there is additional content relating to the object of interest.
Description The object rotates from 2d space to 3d space for further information.
Consistency -
Benefit A transition to show a direct connection between the object of interest and further information.
Illustration The 2d object rotates in space to show the 3d possibilities for placing information.
 
Mask Expand
 
Spatial Extension
This transition belongs to Spatial Extension. This category allows a gradual experience of information by opening/closing the space at given time.
A transition to show that by scaling the mask of an object reveals the hidden content.
Field Of Use When there is additional content relating to the object of interest.
Description The object expands its borders to reveal hidden content.
Consistency Shrinking back to regular size.
Benefit A transition to show that by scaling the mask of an object reveals the hidden content.
Illustration Further content is hidden behind the border of an object.
 
Page Indicator
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to visualize the amount of pages while indicating the current pages.
Field Of Use When flipping through pages book, screens.
Description A moving dot to indicate the switching of a page. At the same time it shows the amount of pages.
Consistency -
Benefit A transition to visualize the amount of pages while indicating the current pages.
Illustration -
 
Popup Preview
 
Spatial Extension
This transition belongs to Spatial Extension. This category allows a gradual experience of information by opening/closing the space at given time.
A transition to let the user have a quick preview of the content by interacting with the thumbnail view.
Field Of Use
Description // Field of Use: // Description: // Consistency: // Description: // Illusion:
Consistency
Benefit
Illustration
 
Refresh Indicator
 
Feedback
This transition belongs to Feedback. This category signifies a running process or indicates whether or not an action was successful, upon an unsuccessful action it explains why.
A transition to indicates that the system is loading. It explains that the user needs to wait for a system‘s operation.
Field Of Use When the refreshing of an object needs to be indicated.
Description A spinning wheel to indicate an operating system.
Consistency -
Benefit A transition to indicates that the system is loading. It explains that the user needs to wait for a system‘s operation.
Illustration -
 
Scroll
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to scroll a list.
Field Of Use When moving an object horizontally or vertically.
Description A one directional scrolling.
Consistency -
Benefit A transition to scroll a list.
Illustration -
 
Solidarity
 
Highlight
This transition belongs to Highlight. This category draws the user's attention and clarifies changes of states in the user interface, which otherwise might be missed.
A transition to indicate the connection between objects.
Field Of Use When the user moves an object into another.
Description The objects refer to the object of interest, by scaling or shrinking, according to its solidarity.
Consistency -
Benefit A transition to indicate the connection between objects.
Illustration -
 
Zoom
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to show a direct connection between the object of interest and further information.
Field Of Use When the user focuses the object of interest.
Description The object of interest zooms in for more detailed information.
Consistency Zoom in - zoom out.
Benefit A transition to show a direct connection between the object of interest and further information.
Illustration The object of interest seems to come closer and a more detailed view is possible.
 
Activate – Deactivate
 
Awaking Controls
This transition belongs to Awaking Controls. This category allows the user to focus on contextual controls. They appear when needed, and disappear as soon as they are no longer needed.
A transition to show that the user activates or deactivates a button. The user can see the impact of the interaction.
Field Of Use When the user activates or deactivates a function.
Description An object on the button indicates the button state by changing the position. The button is either activated or deactivated.
Consistency -
Benefit A transition to show that the user activates or deactivates a button. The user can see the impact of the interaction.
Illustration The moving object on the button gives a haptic appeal.
 
Area Split
 
Spatial Extension
This transition belongs to Spatial Extension. This category allows a gradual experience of information by opening/closing the space at given time.
A transition to show a direct connection between the object of interest and further information.
Field Of Use When there is additional content relating to the object of interest.
Description The area splits to reveal detailed information.
Consistency Splitting - merging.
Benefit A transition to show a direct connection between the object of interest and further information.
Illustration The screen seems to split and the content is underneath the layer of the actual screen.
 
Button to Label
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to show the connection between the button and the content. The directional transition explains the structure.
Field Of Use When navigating through hierarchy.
Description The label of the button transitions into the title of the content.
Consistency The title of the content changes.
Benefit A transition to show the connection between the button and the content. The directional transition explains the structure.
Illustration The button becomes the label.
 
Combine – Split
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to visualize the connection between objects by splitting or combining them.
Field Of Use When the user combines objects.
Description The objects are combined/splitted by the interaction of the user.
Consistency Splitting and combining.
Benefit A transition to visualize the connection between objects by splitting or combining them.
Illustration Splitting and combining objects.
 
End of Page Indicator
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to indicate the end of flipping pages. The last page flips back automatically.
Field Of Use When the user reaches the end of flipping pages.
Description The flipping page bounces back at the last page.
Consistency The transition indicates the beginning and the end of flipping pages.
Benefit A transition to indicate the end of flipping pages. The last page flips back automatically.
Illustration To indicate the end, the last page seems to be fixed.
 
Explaining Length
 
Feedforward
This transition belongs to Feedforward. This category visualizes the consequences of the action. Therefore the resulting event is more predictable and easier to follow.
A transition to communicate the length and the position of a list.
Field Of Use When the user needs a hint for the length of an object.
Description The scroll bar appears as the user interacts with the list. The animation explains the length and the position of that list.
Consistency The object disappears as the user releases the list.
Benefit A transition to communicate the length and the position of a list.
Illustration -
 
Fixed Label
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to show the connection between the label and the content.
Field Of Use When the user scrolls through a list with labels.
Description The label of the list stays in top of the list, as long as the content is available.
Consistency -
Benefit A transition to show the connection between the label and the content.
Illustration The label seems to be stuck at top of the list.
 
Glow to Highlight
 
Highlight
This transition belongs to Highlight. This category draws the user's attention and clarifies changes of states in the user interface, which otherwise might be missed.
A transition to direct the user‘s view by an attention grabbing animation of the object.
Field Of Use When a specific object needs to be highlighted.
Description The object glows to highlight.
Consistency -
Benefit A transition to direct the user‘s view by an attention grabbing animation of the object.
Illustration -
 
Heal
 
Feedback
This transition belongs to Feedback. This category signifies a running process or indicates whether or not an action was successful, upon an unsuccessful action it explains why.
A transition to show that the objects of a list reacts directly on the user‘s input. The interaction is validated.
Field Of Use When the user rearranges objects in a list.
Description The objects of a list rearrange as an object is moved, added, or removed within the list.
Consistency -
Benefit A transition to show that the objects of a list reacts directly on the user‘s input. The interaction is validated.
Illustration The list seems to heal by the repositioning of the objects.
 
Minimize
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to explain where a minimized object can be found. The object is placed on a less prominent place on the screen, but it is still available.
Field Of Use When the user needs to minimize an object.
Description The object shrinks while moving to a certain position on the screen.
Consistency The reversed transition is extending the object back to fullscreen.
Benefit A transition to explain where a minimized object can be found. The object is placed on a less prominent place on the screen, but it is still available.
Illustration The object seems to shrink.
 
Page Turn
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A Transition to explain the information architecture of the list in a narrative way.
Field Of Use When the user turns a page.
Description The page turns while the user swipes the content.
Consistency Directional transition. The page turns according to the direction of the interaction.
Benefit A Transition to explain the information architecture of the list in a narrative way.
Illustration The virtual page seems to behave similar to its real reference.
 
Position Accepted
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to show that the object moves into position to visualize that the position is accepted. The interaction is validated.
Field Of Use When the user moves an object, he needs feedback if the position is valid or invalid.
Description If an object is placed on a accepted position, the object moves automatically into position.
Consistency See: Position Denied
Benefit A transition to show that the object moves into position to visualize that the position is accepted. The interaction is validated.
Illustration The object seems to place itself.
 
Rotate to Highlight
 
Highlight
This transition belongs to Highlight. This category draws the user's attention and clarifies changes of states in the user interface, which otherwise might be missed.
A transition to direct the user‘s view by an attention grabbing animation of the object.
Field Of Use When a specific object needs to be highlighted.
Description The object rotates to highlight.
Consistency -
Benefit A transition to direct the user‘s view by an attention grabbing animation of the object.
Illustration -
 
Scroll Bar
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to indicate the length and position of the related list.
Field Of Use When scrolling a list.
Description The length and the position of a scrollbar give the user an impression of the length and the position of the scrolling list.
Consistency -
Benefit A transition to indicate the length and position of the related list.
Illustration -
 
Spring Refresh
 
Awaking Controls
This transition belongs to Awaking Controls. This category allows the user to focus on contextual controls. They appear when needed, and disappear as soon as they are no longer needed.
A transition to use the intuitive interaction of a list. By scrolling a list, the function appears underneath the related list.
Field Of Use When the user refreshes or updates the related list.
Description The function is revealed by overstretching the spring of a list. The function is activated by either releasing the list, or pulling the list to a specific point.
Consistency Covering the function should cancel the action.
Benefit A transition to use the intuitive interaction of a list. By scrolling a list, the function appears underneath the related list.
Illustration By overstretching the spring of a list, the function seems to be underneath the related list.
 
Add to List
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to explain the rearranged structure of a list.
Field Of Use When the user adds another object to a list.
Description The new object slides into position while the old content of the list makes place for the new one.
Consistency The reversed transition is deleting an object of the list.
Benefit A transition to explain the rearranged structure of a list.
Illustration The objects seem to make space for the new one.
 
Availability
 
Highlight
This transition belongs to Highlight. This category draws the user's attention and clarifies changes of states in the user interface, which otherwise might be missed.
A transition to show the progress of a loading behavior of individual objects.
Field Of Use When the availability of objects needs to be indicated.
Description It indicates the loading behavior of specific items by an underlining revealing animation.
Consistency -
Benefit A transition to show the progress of a loading behavior of individual objects.
Illustration -
 
Change Depth to Highlight
 
Highlight
This transition belongs to Highlight. This category draws the user's attention and clarifies changes of states in the user interface, which otherwise might be missed.
A transition to direct the user‘s view by an attention grabbing animation of the object.
Field Of Use When a specific object needs to be highlighted.
Description The object moves in front of the other highlight.
Consistency -
Benefit A transition to direct the user‘s view by an attention grabbing animation of the object.
Illustration The objects seem to change the depth.
 
Darken to Highlight
 
Highlight
This transition belongs to Highlight. This category draws the user's attention and clarifies changes of states in the user interface, which otherwise might be missed.
A transition to direct the user‘s view by an attention grabbing animation of the object.
Field Of Use When a specific object needs to be highlighted.
Description The surrounding objects darken to highlight.
Consistency -
Benefit A transition to direct the user‘s view by an attention grabbing animation of the object.
Illustration -
 
Expand to Highlight
 
Highlight
This transition belongs to Highlight. This category draws the user's attention and clarifies changes of states in the user interface, which otherwise might be missed.
A transition to show which object is active on interaction by expanding it.
Field Of Use When a specific object needs to be highlighted.
Description The objects grows as soon as the user interacts with it.
Consistency If an object is no longer activated, it should shrink back to the original size.
Benefit A transition to show which object is active on interaction by expanding it.
Illustration -
 
Explaining Position
 
Feedforward
This transition belongs to Feedforward. This category visualizes the consequences of the action. Therefore the resulting event is more predictable and easier to follow.
A transition to show the placing of an object.
Field Of Use When the user needs a hint for placing an object.
Description The transition indicates a valid position by showing an instance of the object moving towards the valid position.
Consistency -
Benefit A transition to show the placing of an object.
Illustration -
 
Flip
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to show a direct connection between the object of interest and further information.
Field Of Use When there is additional content relating to the object of interest.
Description The object turns for further information.
Consistency 180° has two sides – two states.
Benefit A transition to show a direct connection between the object of interest and further information.
Illustration Further information seem to be on the back of an object.
 
Gray out to Highlight
 
Highlight
This transition belongs to Highlight. This category draws the user's attention and clarifies changes of states in the user interface, which otherwise might be missed.
A transition to direct the user‘s view by an attention grabbing animation of the object.
Field Of Use When a specific object needs to be highlighted.
Description The surrounding objects gray out to highlight.
Consistency -
Benefit A transition to direct the user‘s view by an attention grabbing animation of the object.
Illustration -
 
Hidden Feature
 
Feedforward
This transition belongs to Feedforward. This category visualizes the consequences of the action. Therefore the resulting event is more predictable and easier to follow.
A transition to explain what is necessary to activate a hidden function.
Field Of Use When the user activates the spring refresh, the effecting hidden function is visualized.
Description The function hidden function appears below the list and explains it outcome.
Consistency The function is only released at a specific point.
Benefit A transition to explain what is necessary to activate a hidden function.
Illustration -
 
Mode Switch
 
Spatial Extension
This transition belongs to Spatial Extension. This category allows a gradual experience of information by opening/closing the space at given time.
A transition to introduce new controls by sliding in. The moving of the items‘ labels underlines the importance of the new controls.
Field Of Use When the user needs extra controls for editing the related list.
Description As the mode switches, the extra controls slide in. The items‘ labels move to indicate the mode switch.
Consistency The extra controls move off the screen by switching the mode back to regular mode.
Benefit A transition to introduce new controls by sliding in. The moving of the items‘ labels underlines the importance of the new controls.
Illustration The extra controls seem to be pushed on screen after swiping a list element.
 
Pan
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to pan a map.
Field Of Use When moving an object horizontally and vertically.
Description A two directional scrolling.
Consistency -
Benefit A transition to pan a map.
Illustration -
 
Position Denied
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to show that the object moves back to its former position to visualize that it is invalid to place the object on this position. With a directional transition, the user is able to see where he can find it.
Field Of Use When the user moves an object, he needs feedback if the position is valid or invalid.
Description If an object is placed on a denied position, the object moves back to its former position.
Consistency See: Position Accepted
Benefit A transition to show that the object moves back to its former position to visualize that it is invalid to place the object on this position. With a directional transition, the user is able to see where he can find it.
Illustration The object seems to be pushed back to its former position.
 
Saving Indicator
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to tell the user where to find the object after saving/bookmarking/downloading.
Field Of Use When the user saves, downloads or bookmarks an object.
Description As soon as an object is saved/downloading/bookmarked, it actually moves into the folder.
Consistency -
Benefit A transition to tell the user where to find the object after saving/bookmarking/downloading.
Illustration An instance of the object seems to moves into the folder.
 
Slide
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A directional transition to show the arrangement of objects.
Field Of Use When the user navigates through a list of objects.
Description The object list moves according to the swipe interaction of the user. The objects move into position, automatically.
Consistency Directional transition. The object slides according to the direction of the interaction.
Benefit A directional transition to show the arrangement of objects.
Illustration The objects seem to be arranged on a long ribbon
 
Swipe to Delete
 
Spatial Extension
This transition belongs to Spatial Extension. This category allows a gradual experience of information by opening/closing the space at given time.
A transition to support an intuitive interaction of deleting an object. After swiping an object of the screen, a button appears to confirm the action.
Field Of Use When the user needs the delete function for the related list item.
Description The delete button slides in by swiping a list item.
Consistency directional swipe
Benefit A transition to support an intuitive interaction of deleting an object. After swiping an object of the screen, a button appears to confirm the action.
Illustration The delete button seems to be pushed on screen after swiping a list element.
 
Affordance
 
Feedforward
This transition belongs to Feedforward. This category visualizes the consequences of the action. Therefore the resulting event is more predictable and easier to follow.
A transition to present a possible interaction.
Field Of Use When the system needs to introduce its interactivity.
Description The fullscreen object jumps to reveal the hidden content below.
Consistency -
Benefit A transition to present a possible interaction.
Illustration The jumping object seems to cover the content.
 
Blur to Highlight
 
Highlight
This transition belongs to Highlight. This category draws the user's attention and clarifies changes of states in the user interface, which otherwise might be missed.
A transition to direct the user‘s view by an attention grabbing animation of the object.
Field Of Use When a specific object needs to be highlighted.
Description The surrounding objects blur to highlight.
Consistency -
Benefit A transition to direct the user‘s view by an attention grabbing animation of the object.
Illustration -
 
Close
 
Feedback
This transition belongs to Feedback. This category signifies a running process or indicates whether or not an action was successful, upon an unsuccessful action it explains why.
A transition to explain the impact of closing an object. It shows that the object has disappeared.
Field Of Use When the user needs feedback for closing an object.
Description The object is shrinks into the close button to indicate that the object closes.
Consistency -
Benefit A transition to explain the impact of closing an object. It shows that the object has disappeared.
Illustration The object seems to be sucked in by the close button.
 
Device Rotation
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to visualize that the content orientates according to the rotation of the device.
Field Of Use When the content need to rotate and rearrange.
Description The content on the screen rotates within the orientation of the device.
Consistency The content needs to rotate according to the rotation of the device.
Benefit A transition to visualize that the content orientates according to the rotation of the device.
Illustration The content seems to move according to the rotation of the device.
 
Explaining Direction
 
Feedforward
This transition belongs to Feedforward. This category visualizes the consequences of the action. Therefore the resulting event is more predictable and easier to follow.
A transition to explain a directional interaction.
Field Of Use When the system needs to explain a directional interaction.
Description A glow moves directional across the object to explain the interaction.
Consistency -
Benefit A transition to explain a directional interaction.
Illustration The object seems to glow.
 
Fade to Highlight
 
Highlight
This transition belongs to Highlight. This category draws the user's attention and clarifies changes of states in the user interface, which otherwise might be missed.
A transition to direct the user‘s view by an attention grabbing animation of the object.
Field Of Use When a specific object needs to be highlighted.
Description The surrounding objects fade to highlight.
Consistency -
Benefit A transition to direct the user‘s view by an attention grabbing animation of the object.
Illustration -
 
Flip to Highlight
 
Highlight
This transition belongs to Highlight. This category draws the user's attention and clarifies changes of states in the user interface, which otherwise might be missed.
A transition to direct the user‘s view by an attention grabbing animation of the object.
Field Of Use When a specific object needs to be highlighted.
Description The object flips to highlight.
Consistency -
Benefit A transition to direct the user‘s view by an attention grabbing animation of the object.
Illustration -
 
Growing Input Field
 
Spatial Extension
This transition belongs to Spatial Extension. This category allows a gradual experience of information by opening/closing the space at given time.
A transition to visualize the growing of an input field according to the length of the input.
Field Of Use When the user needs more space to display the input.
Description The size of the input field grows according to the size of the user‘s input.
Consistency Deleting the input shrinks back the input field.
Benefit A transition to visualize the growing of an input field according to the length of the input.
Illustration The input field seems to grow according to the user‘s input.
 
Invitation – Disinvitation
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to show that the placing of an object in a list is valid or invalid.
Field Of Use When the user tries to place an object in a list.
Description Moving an object from one place to another in a list, the list reacts as soon as the object moves above it.
Consistency The transition should visualize if an object can be placed or not.
Benefit A transition to show that the placing of an object in a list is valid or invalid.
Illustration The list seems to open or close for the object.
 
Object Switch
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to explain the connection by switching between applications.
Field Of Use When the user switches between objects.
Description The present object moves to the back, while the new application moves to the front.
Consistency -
Benefit A transition to explain the connection by switching between applications.
Illustration The objects seem to make place for the other.
 
Popup
 
Orientation
This transition belongs to Orientation. This category describes the object's environment and so the system's information architecture. Orientation invites the user to explore the interface.
A transition to explain which specific object scales to fullscreen view.
Field Of Use When the user interacts with an object.
Description The object transitions from a thumbnail view to full screen view.
Consistency The reversed transition is the transition from full screen view back to thumbnail view.
Benefit A transition to explain which specific object scales to fullscreen view.
Illustration The object seems to grow on stage.
 
Progress bar
 
Feedback
This transition belongs to Feedback. This category signifies a running process or indicates whether or not an action was successful, upon an unsuccessful action it explains why.
A transition to show the progress of the download.
Field Of Use When a progress needs to be indicated.
Description The progress bar fills according to the progress of the download and indicates the duration.
Consistency -
Benefit A transition to show the progress of the download.
Illustration To let the progress bar appear faster, animated lines inside the progress bar seem to speed up the download.
 
Scale to Highlight
 
Highlight
This transition belongs to Highlight. This category draws the user's attention and clarifies changes of states in the user interface, which otherwise might be missed.
A transition to direct the user‘s view by an attention grabbing animation of the object.
Field Of Use When a specific object needs to be highlighted.
Description The object scales to highlight.
Consistency -
Benefit A transition to direct the user‘s view by an attention grabbing animation of the object.
Illustration -
 
Slide-in Controls
 
Awaking Controls
This transition belongs to Awaking Controls. This category allows the user to focus on contextual controls. They appear when needed, and disappear as soon as they are no longer needed.
A transition to introduce a new object. It is only visible when needed.
Field Of Use When the user needs to activate the touch keyboard.
Description The object slides in to introduce the new input field.
Consistency Slide in - slide out.
Benefit A transition to introduce a new object. It is only visible when needed.
Illustration The object slides in.
 
Text Truncation
 
Spatial Extension
This transition belongs to Spatial Extension. This category allows a gradual experience of information by opening/closing the space at given time.
A transition to show more text on less needed space.
Field Of Use When there is hidden text.
Description If the text is longer than its text field, the text is truncated and reveals by moving with the users reading flow.
Consistency The direction of the moving truncated text depends on the cultural reading flow.
Benefit A transition to show more text on less needed space.
Illustration -