Transitions are means to communicate what is happening in the user interface. They help in establising relationship between different elements and their usability. A good transition can accurately convey the nature and behaviour of the elements in the interface.
We have surveyed many transitions used in Interaction Design(ID) and understood what each transition communicates to the user. After looking at a large number of transitions, we have concluded that transitions are trying to communicate the following:
- Creating Virtual Space
- System Status
In the following article we have explored how each of the following can be used in different ways to improve the usability of the user interface.
The user expects events to happen in causal manner. By enforcing causal relation between events and the elements, the interface can be made natural and intuitive.
Feedback — Responding to the users input.
We want to make the interface reactive to the user to give him a feeling that the device is “listening to him”. By giving a feedback, the user feels confident that his action is registered by the device.
Cloning — Causal way to create elements
Based on the natural laws, things do not appear and disappear, they can only transform from one form to another.
Hence, it is better to create elements through transitions rather than displaying them suddenly on the screen. When the user sees one element being cloned from another, he understands that the new element is part of old element i.e. the new element provides similar functionality as the old element.
Relationship Between Elements — How visually different elements are tied together
When we observe different objects inter-related with cause and effect relationship, we begin to associate both of them as single entities. By observing two things in cause and effect relation repeatedly, we make these associations stronger.
By using transitions, we can enforce this cause and effect relationship between elements to associate them with each other.
Helping the user to focus only on the elements he requires to interact. This can be done in a number of ways:
Bright and Dim
Brightening the area of interest in the screen. Since it is not possible to increase the brightness of the screen that is available, the remaining elements can be dimmed while keeping the are of interest at normal brightness.
Keeping the existing elements as they are while obscuring the remaining elements.
Motion, by its nature, has the highest level of prominence in a user interface. By using transitions, important events can be brought to the user’s notice.
Transitions which enable focus can also be used when we:
- Need to provide feedback indicating that an object is being interacted with. A common interaction is to brighten an object when the mouse is hovered over it. (Bill and Theresa)
- Decrease visual noise in an interface. Elements that are secondary can be dimmed when not in use. (Bill and Theresa)
- Indicate that a part of the interface is not ready to be interacted with, Perhaps when an application is being loaded. (Bill and Theresa)
- Help designer compensate to create a single view for an interaction. (Issara Willenskomer)
- Show important events on the screen through motion.
Creating Virtual Space
Transitions can help in creating the navigation design of the UI. The skeleton of the interface can be defined by adding transitions in between states. These transitions are governed by the defined rules of the navigation design. They are consistent throughout the interface.
Dimensionality — Providing 3D object attributes to the interface
“Providing spatial origin and departure references help reinforce mental models of where the users are in UX” (Issara Willenskomer). Dimensionality can be of three types:
- Object Dimensionality : Three dimensional objects with true depth and form
- Floating Dimensionality : Floating elements in mid air
- Origami Dimensionality : Folding
Maintaining Context While Changing Views — Transitions which allow change in view while maintaining overall context
- Slide In and Slide Out: Most monitoring applications have multiple charts and tables. These can be accessed by sliding in the charts from the side of the window.
- Faceplate: The faceplate pattern ties two panes together and gives an indication that the other pane is always hidden just below the currently visible pane.
- Flip: Another way to have two panes use the same space is to use a flip transitions. The effect works similar to flipping a card.
- Carousel: Carousels are great for extending virtual spaces. If the carousels are not animated, the user gets confused weather the content is moving left or right. Adding transitions creates the illusion that the content is being pulled into the page through carousel.
- Accordion: Accordion is a variation on a tab panel. Each panel title is the activation to slide open its associated panel. Accordions are good for collapsed modules of content. However, they should be used sparingly and have strong visual style. Normally, accordions activate on click. Activation of accordion on hover can be a bad idea.
Dolly: When the camera moves towards and away from the user. This gives an illusion of spatial depth and can show what is above or behind the current view.
Zoom: When an object scales without a change in perspection or position of the object. This helps to show that there are other objects inside the existing objects.
Parallax: Objects with different scrolling speeds are perceived to be at different distance from the user. The slower the speed, the farther the perceived distance. This can be used to define object hierarchy in the interface. When an object moves faster and is more responsive, it will be perceived to be more important since it is closer to the user.
Expand and Collapse: Helpful when there is additional content and can be accessed when the user needs them.
- Expand/Collapse of inlays: The inlay panel can be expanded or collapsed using transitions. Transitions help connect the panel to the control that activates it.
- Expand/Collapse of overlays: An overlay panel slides over the existing elements of the page. One problem with animating Expand/Collapse is that is makes the interface feel sluggish when the interaction is used too often.
These transitions can be used to (Bill and Theresa):
- Manage a lot of content or modules.
- Manage real estate on the screen.
- Emphasize the currently hovered-over object as part of a rollover system.
- Provide details about an item in a list.
- Make content available for edit. Use instead of a pop up if the content being expanded is one of many items and there is a benefit to showing the details in the context with the other items.
Notifying the user about the system
These transitions are triggered only on specific events. Unlike, the transitions in ‘Creating Virtual Space’ they need not follow rules of the interface.
Improve Perceived Performance
When a long process is running, it is better to divert the users attention towards something else. Transitions make time to be perceived faster because the user remains engaged throughout the process. User testing has confirmed that transitions improve the perceived performance of an operation.
Same Location New Action
In certain situations, the function of a button changes from its original function. This usually happens when the space is less. To bring this change into users notification, transitions can be used since they have the highest level of prominence.
The user can be notified the change in the interface by subtly highlighting an object.
Assist the user on how to interact with the interface. This can be done by hinting hidden functionalities.
Self-Healing Fade: When deleting or moving an item, it is useful to have a hole where the object once lived. Animating the filling of hole can be used to depict that the item was deleted. These transitions can be used when:
- Removing an object from a list or grid.
- To convey that the removal happened and where the object was removed from.
- Indicate the completion of a drop operation in which the dropped object was moved from one place to another.
Animation: By using animation to show where the object came from or is going, the user feels confident putting the object away in the future.
- Zoom back: This animation can be used when an animation fails during drag and drop.
- Drop Animation: When an object is drag and dropped in an area, it automatically positions and scales itself.
“If a brand were to speak to us, what would it say?” we also need to start thinking, “If a brand were to move, what would it feel like?” — Rebecca Ussai
People use the application repeatedly when it has good user experience. A brand can use animations to define their unique signature which gives the user an emotional appeal for the application.
We have proposed a new set of principles of transitions based on the meaning it conveys to the user. Our proposed principles gives designers the ability to choose which kind of transitions they want to use depending on what they want to convey to the user. We hope this project will inspire others to explore and investigate further.
This article is part of the project at Industrial Design Centre at Indian Institute of Technology Bombay. This project was guided by Prof. Venkatesh Rajamanickam. Full report of the project can be found here.