Arihant Parsoya
Prof.
Venkatesh Rajamanickam

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:

  • Causality
  • Focus
  • Creating Virtual Space
  • System Status
  • Identity

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.

Causality

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.

Fig. Giving visual feedback to the user on tap. (Credits: Google Material Design)
Fig. Floating button. (Credits: Google Material Design)
Fig. Siri’s interface changes when it listens to the user. Also see skeuomorphism. (Credit: Apple)
Fig. When wrong password is entered, the password vibrates similar to how people nod their head. (Credit: Apple)

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.

Fig. By creating new buttons from existing button, the new buttons are seen as an continuation of the event.

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.

Fig. Clicking on the button changes the color of the map. The transition is used to show that change has occurred in map. (Source: Exploring 2017 UP Assembly Election Results)
Fig. Apples genie effect help the user create relationship between the icon in the dock and the application window. (Credit: Apple)
Fig. By reordering, the list on the left, the cards on the right gets reordered. This shows that the list and cards are related. (Credits: AgenceMe)

Focus

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.

Fig. Google Drive dims the background of screen when you want to create a new folder. This interaction is also called the light box effect. (Credit: Google)

Obscuration

Keeping the existing elements as they are while obscuring the remaining elements.

Fig. Background apps are obscured when group of apps are opened. This helps user focus on relevant elements by reducing the visual cognitive load while retaining the context of the interaction. (Credit: Apple)

Highlight

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.

Fig. (Credits: www.Photojojo.com)

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
Fig. Object Dimensionality. (Credit: Issara Willenskomer, Virgil Pana and Eddie Lobanovskiy)
Fig. Object Dimensionality. (Credit: Issara Willenskomer, Virgil Pana and Eddie Lobanovskiy)
Fig. Origami Dimensionality(right). (Credit: Issara Willenskomer, Virgil Pana and Eddie Lobanovskiy)

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.
Fig. Side menu in iTunes comes into the screen with a transition. (Credits: Apple)
  • 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.
Fig. Carousel in Amazon website. (Credits: Amazon)
  • 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.
Fig. By tapping on song below the screen, the panel opens up with transition. Source: iTunes

Camera Motion

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.

Fig. Dolly (Credits: Issara Willenskomer)
Fig. Dolly(right) is used to show that the lock screen is located behind the home page. (Credits: Apple)

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.

Fig. Zoom(Credits: Issara Willenskomer)
Fig. Zoom is used to show grouping of photos at deeper level. (Credits: Apple)
Fig. (Credits: Smashing Editorial)

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.

Fig. Scroll speed of the image is slower than that of list. This helps establish that the list is more important than the image(Source: Austin Neill)

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.
Fig. Expand and Collapse of Inlays by Material-UI
  • 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.
Fig. MakeMyTrip uses expand/collapse transitions for filters.

These transitions can be used to (Bill and Theresa):

  1. Manage a lot of content or modules.
  2. Manage real estate on the screen.
  3. Emphasize the currently hovered-over object as part of a rollover system.
  4. Provide details about an item in a list.
  5. 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.

System Status

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.

Fig. (Source: Ramotion)
Fig. (Source: Ramotion)

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.

Fig.(Credits: Smashing Editorial)
Fig. Logo changed from “Search” to “Google” (top left) indicating change of function of the button. (Credit: Google Now)

Spotlight

The user can be notified the change in the interface by subtly highlighting an object.

Visual Hint

Assist the user on how to interact with the interface. This can be done by hinting hidden functionalities.

Fig. (Credit: Michael Martinho)
Fig. Giving a slight peek into the controles behind the screen. (Source: Moldiv)

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.
Fig. After deleting an email in Gmail app, a grey hole is created and filled using transition. (Source: Gmail)
  • Indicate the completion of a drop operation in which the dropped object was moved from one place to another.
Fig. While dragging and dropping a file from one folder to another in MacOS, transition in the right column shows that the file is removed and is added in the left column. (Source: Apple)

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.
Fig. While dragging and dropping a file into google drive, if the file is not dropped in the correct location, the file comes back to the location where it was previously located.
  • Drop Animation: When an object is drag and dropped in an area, it automatically positions and scales itself.

Identity

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

Fig (Credits: Snapchat)
Fig. (Credits: Creativedash)

Conclusion

We have proposed a new set of principles of transitions based on the 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.



Source link https://blog..io/meaning-of-transitions-a618ba0f104b?source=rss—-eb297ea1161a—4

LEAVE A REPLY

Please enter your comment!
Please enter your name here