How should your UI behave when the user clicks on the "Login" button, versus if they were simply to hover over it? What happens afterwards?

How do you transition to new content in a smooth and seamless way?

How will these design decisions impact the user experience (UX)?

Those are the types of questions most people don’t care to think about. Except designers.

Designers are always on this never-ending quest towards pixel-perfection, thinking about the "small stuff" such as "How fast (in milliseconds) should this ease-in animation be?" or "Should we display a progress bar for these screen transitions?" or "How do we animate the layout transition of our responsive design when the user resizes their browser?"

There are various ways our designs can react to things such as image-loading, screen transitions, and pull-to-refreshes. If you’re looking for ideas on how interaction designers are improving usability and UX by way of transitional interfaces (which commonly refers to the art and science of UI animation) check out the site called Use Your Interface.

User Your Interface is a design showcase of interaction designs and transitional interfaces from sites and apps that behave beautifully when responding to user-initiated events. Featured designs are tagged with keywords such as image rollover, menu, and loader to help you quickly navigate to the stuff you’re interested in.

This field of digital design involves movement and animation, so Use Your Interface showcases animated images.

Go to Use Your Interface


Jacob Gube is the co-founder of Design Instruct. Join him on Twitter @sixrevisions