Meaningful Transitions // Home

Home

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

Example: test

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.

Example: test

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.

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 -

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.

Example: test

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.

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 -

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.

Example: test

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.

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 -

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.

Example: test

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.

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

Accordion

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 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.

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.

Example: test

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.

Example: test

Flip

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 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.

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.

Example: test

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.

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 When there is additional content relating to the object of interest.

Description The object rotates 180° 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.

Example: test

Zoom

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 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.

Example: test

Half Flip

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 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 -

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

Swipe to Delete

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 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.

Example: test

Mode Switch

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 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.

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.

Example: test

Appearing 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 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 -

Example: test

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

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 -

Example: test

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.

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 -

Example: test

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 -

Example: test

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 -

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 -

Example: test

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 -

Example: test

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 -

Example: test

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 -

Example: test

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

Position Accepted

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 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

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 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

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 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 -

Position Denied

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 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

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 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.

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.

Example: test

End of List 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 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 -

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

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 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

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 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 -

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.

Example: test

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 -

Example: test

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 -

Example: test

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 -

Example: test

Solidarity

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 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

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 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

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 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 -

Example: test

Button Relabel

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 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

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 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 -

Example: test

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.

Example: test

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.

Example: test

Half Flip

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 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.

Example: test

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 When there is additional content relating to the object of interest.

Description The object rotates 180° 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.

Example: test

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

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 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

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 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.

Example: test

Activate – Deactivate

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 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.

Example: test

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

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 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.

Example: test

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 -

Example: test

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.

Example: test

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

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 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 -

Example: test

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.

Example: test

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.

Example: test

Availability

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 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 -

Example: test

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 -

Example: test

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 -

Example: test

Flip

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 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 -

Example: test

Mode Switch

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 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

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.

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

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

Example: test

Swipe to Delete

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 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 -

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.

Example: test

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 -

Example: test

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 -

Example: test

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

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 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.

Example: test

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 -

Example: test

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.

Example: test

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 -