Principles of UX in Motion

Principles of UX in Motion 🚀

Courtesy of @bazen.agency
⠀
How do you enhance your UX with animation in your projects?
⠀
@easyease_ae from @bazen.agency is explaining to us the basic manifesto of UX in animation.

01: Easing

Objects in real don’t just start and stop instantly, and almost never move at a constant speed. When we open a drawer, we first move it quickly and slow it down as it comes out. Drop something on the floor, and it will fi. accelerate downwards, and then bounce back up after hitting the floor.

02: Offset and Delay

Offset & Delay is the second of only two UX in Motion Principles that is influenced by Disneys Animation Principles. The utility of this principle is that it pre-consciously sets the user up for success by ‘telling’ the user something about the nature of the objects in the interface.

03: Parenting

Parenting is a powerful Principle that ‘relates’ objects in the user interface. In the above example, the ‘scale’ and ‘position’ property of the top or ‘child’ object is parented to the ‘position’ property of the bottom or ‘parent’ object. Parenting is the linking of object properties to other object properties.

04:Transformation

Transformation is the most discernible, largely because it stands out. A ‘submit’ button changing shape to become a radial progress bar and finally changing shape again to become a confirmation checkmark is something that we notice. It grabs our attention, tells a story, and h. completion.

05: Value Change

Text-based interface objects, that is to say, numbers and text can change one of those ‘elusive obvious’ concepts. Text and number changes are so common that they pass us by without us bringing to them distinction and rigor to assess their role in supporting usability.

06: Masking

The act of masking asking can be thought of as a relationship between the shape of the object and its utility. Because designers are familiar with ‘masking’ in the context of static design, it behooves us to bring distinction to the UX in Motion Principle ‘Masking’ as it occurs in time, as an act, and not as a state.

Bonus — 4 tools that may be useful in your designer way:

Flowkit — allows designers to create frighteningly fast user flows within Sketch and Figma.
Webflow — all-in-one web design tool that allows users to design, build, and launch responsive websites visually.
Crello — the simplest online image editor. A simple but powerful tool to create awesome designs for any social media format — posts, covers, graphics, and posters using the best software on the web. It’s easy! A lot of animated designs.
Funnelytics — an incredible tool that helps you build the best marketing funnel mapping.

Be free to send us any feedback by reply or reach us in DM on Instagram
Do you want to receive insights using FB Messenger or Telegram or Email? 👈 Subscribe now.