Expressive animation

Motion enhances the user experience with moments of delight, adding beautiful utility and encouraging deeper inspection.

Micro interactions

Micro interactions are enhancements to elements or interactions that provide visual feedback and guide users in a more engaging way than a typical interaction.

Video description: A 5-second video shows a collection grid of different micro interactions. The top left tile reads “Hang tight.” and then “Almost done.” while a dashed line in ebay colors animates below. To the right is a tile with 5 icons: home, profile, search, notification, and selling. A blue indicator hovers over each icon and the icons have a popping wiggle motion. The bottom left tile shows the filled AI icon centered that swipes to the left and gets smaller, while a chat bubble appears with a typing indicator and a message. To the right of that is a bright green illustrated tile with a handbag and watch in a box. There is a white button reading “Luxury”. The illustration has a pop motion and a black outline appears around it. The button turns black and in white reads a checkmark and “Luxury”. The last tile is a shopping cart icon in a white circle on a pink background. The icon has a popping motion and a small red circle with “1” appears on its upper right. The popping motion happens as the red circle changes from “1” to “2” to “3”.

Best practice

Do use micro interactions and animations sparingly to guide attention.

Video description: A 2-second video shows a mobile listing screen with three stacked buttons. A blue “Buy it Now” button and two blue outlined “Add to cart” and “Add to watchlist” buttons. Below there is a callout with a trophy icon and copy stacked above a shipping icon and copy. The trophy icon has a spinning and small hop micro animation while the rest of the screen is static.

Don’t overuse animations together as they can be distracting.

Video description: A 2-second video shows a listing mobile screen that reads “Est. delivery Wed, Sep 15 - Fri, Oct 1”. Below is a callout with a promotion icon and copy “Take $52 off this item”. The icon is animated and goes from two tags to 3 spread out tags and back. Three stacked buttons are below followed by a callout with a trophy icon and copy stacked above a shipping icon and copy. The trophy icon has a spinning and slight hop micro animation. The shipping box icon has an animation that hops and the top flaps open.

Education

Using motion in educational experiences is a powerful tool to help tell stories in product. Whether the visuals are literal to the experience or more abstract and illustrated, we're able to grab the user's attention and articulate our message more clearly with motion.

Video description: A 6-second video shows a mobile screen with a slide up bottom sheet with a tutorial animation on top with the selling icon circled in blue and related content below. It reads “Introducing seller navigation. We’ve created a separate nav for sellers! Switch between them using the icon in the bottom right.” There is blue “Next” button on the bottom right, with a “Back” button on the left. A circular click indicator selects “Next”. The screen in the animation on top changes while the blue circle on the selling icon stays. The bottom has the the same headline as 1/1 did but with content that reads “When selected, you’ll be guided to a customizable page filled with useful tools.” and 2/2 between the same buttons. The click indicator selects “Back” and it transitions back to 1/1 notes and animation.

Celebration

Celebratory moments in product add visual delight, build trust with users, and provide clear feedback that the actions they took were worth doing. Introducing motion to these celebrations improves the entire experience by adding more personality.

Video description: A 5-second video shows a screen of 2 mobile screens side by side. The left screen shows a “Review your listing” screen of a navy chair. When “List your item” icon is selected a new screen emerges from the bottom and moves up to fill the screen with a picture of the chair and below reads “Congrats! Your listing is now live!”. The smooth transition motions end with a green circle icon with a white checkmark that pops on the chair image. On the right there is a mobile Selling screen with account profile information and illustrated tutorial videos on the bottom. When the centered “List an item” button is selected a purple screen emerges from the bottom and fills the screen. An illustration of a young man holding product tile illustrations of a shirt, bag, sneaker, and watch animate in a scrolling motion and below reads “Welcome to selling! This is your selling overview. Your space to list, ship, explore and more. Let’s go!” At the bottom is a dark purple “Finish onboarding” button.

Resources

Motion tokens

Learn about our motion tokens.

Change log

Date	Notes
Jun, 2024	Created with eBay Evo