Some best practices for optimizing your app/page interaction

Good to Great UI Animation Tips

Let’s get right down to business and look at some common interaction scenarios and evolve from “fine” to “super great” with a few tweaks.

With these improvements, we made the transition between states more continuous, made it more obvious that the elements shared by the different states were the same, and thus kept the user’s attention as small as possible and made it easier to guide them.

PS: I followed The Material Motion, IBM’s Animation Principles and The UX in Motion Manifesto in The following animations. The output.

Let the content slide as the Tab page switches

The content on the left is simply fading in and out. The content on the right slides along with the TAB

  • A “not bad” animation is fading in and out of two pages
  • A “super awesome” animation lets the page slide with state to give a continuous experience

When we implement a Tab switch or other similar interaction that switches the contents of a window, we try to “associate” the content with the action that triggers the change. You can control not only their visibility, but also their location! . If you do, don’t forget to add a sliding gesture to make it “natural.”

Reuse shared elements

Click on the card on the left to highlight specific content from the bottom, and test the card on the right to fill the screen

  • A “not bad” animation shows details by sliding content up, down, left, and right
  • A “great” animation establishes a visual connection by reusing shared elements between “brief information” and “detail information.

When trying to switch between two states, find out what elements they have in common! Let them be visual wires that guide the presentation of content. We can Manifesto in The UX in Motion. Find out what type of animation we want, and I’ve used Masking, Transformation, Parenting, and Easing in this example

Make the list feel random

The stack of cards on the left comes into view by fading in, while on the right a short delay is added for each card's entry

  • An “ok” animation does this by edging into the position or transparency of a bunch of elements on the screen
  • A “great” animation adds a sense of sprawl to these elements

To complete the waterfall flow feel, try adding a small delay to this set of elements. Of course, first they have to have the same easing function and animation duration, so that they can maintain sensory consistency. Be careful not to dwell on the small details, the effect is to “whole”. Also, keep the animation clean and neat. Google recommends a delay of no more than 20ms for each adjacent element. Check out Material Motion for more examples.

Let the elements push and shove

The animation on the left has the expanded subject suddenly standing at the top to hide the sibling elements, while the animation on the right pushes the sibling elements out of the screen

  • An “ok” animation is done without ignoring the existing context
  • A “super cool” animation lets the elements influence the surroundings, the context, just as you crowd the bus

Each of your elements must be alert to whatever is around them, pushing them away or drawing them in. That’s what makes it real. For more examples, see Google Awareness

Make menus out of context

The menu on the left is so suddenly appeared, but the one on the right stretches out from the button, and it feels like waking up!

  • A “not bad” animation shows the menu roughly from the direction of the button
  • A “super awesome” animation “pops out” from where it’s triggered, like an orange cat coming out of a cardboard box when you tap it

Use a button to display more status

The Loading state is displayed with a line of text on the left, and the button on the right is displayed as a status bar

  • A “not bad” interaction adds something to show state
  • A “super cool” interaction is to clarify different states with changes to the button itself

Try using the container of buttons to contain another status indicator to provide visual feedback on a status. For example, you can add a spin around a button to indicate a Loading animation. The point here is to “enrich the experience by using areas that are already interacting with the user, especially when the user is focusing on certain buttons”. Go ahead and give the buttons more focus to add to your app!

The important things should be obvious

On the left, well, we're back to the left, where the color and position of the exclamation point are used to highlight its importance, and on the right, a little animation is added to draw the user's attention

  • A “not bad” design uses color, size, and location to show what the user needs to pay attention to
  • An “unbeatable” design uses animation to guide the user without disturbing him

When we want users to notice a really important message or action, try adding a smile animation. Start small and slowly increase the animation intensity (changing size, color, speed, etc.) to accentuate the contrast. What an important operation — but!! But!!!!! The more animations you use, the less impact each animation has, not to mention the fact that it can be annoying to your users.

The last

InVision’s Studio is an app that he used to create all the pictures on.

Happy animating!