Motion UI

Motion UI

Motion UI is a standalone library that powers the transition effects used in a number of Foundation components, including Toggler, Reveal, and Orbit.

Prototype to Production

Motion UI includes more than two dozen built-in transition and animation classes that make prototyping easy. When you move to a production environment, the library gives you total control over how your effects work.

The core of the library is a set of powerful transition and animation Sass mixins, which give you complete control over the details of an effect, from what direction an element slides, to how far it spins, to how intensely it shakes. Motion UI also includes a large number of pre-made CSS classes to help you get going quickly.

Motion is the New Flat

While previewing Foundation for Apps last year, we wrote about how 'motion is the new flat'. Animation allows us to design more expressive interfaces, by giving users queues around hierarchy, spatial orientation, and more. Foundation for Apps shipped with Motion UI, a Sass library that makes it easy to create CSS transitions and animations for your designs.

As we continue to develop the Foundation family, we're looking for ways to streamline the experience of using the three frameworks. This includes more consistent styling, naming, and architecture; revamping our CLI to build projects in any of the frameworks; and building standalone libraries that can be used by multiple frameworks.

Motion design can incorporate a number of elements into it. These are shapes, text, lines, illustrations, photography, 3D objects, video, and many more. All of these elements can be animated in motion UI design for 3 major uses:

  • System status to load indicators and notifications.
  • Navigations and transitions can be used for hierarchy and connection between elements, function change, and other such effects.
  • Visual feedback for acknowledgments and results of the actions.

Designing with motion is a great way to draw user interest, lead the user’s eye to important areas of a web design, and make a website memorable, but it can also cause some technical drawbacks.

A website’s interface is an impactful point of interaction for a brand. It highlights the brand’s purpose and personality. It also serves as an introduction to what dealing with the business will be like from a consumer standpoint. UI animations are highly effective at making an impact on the user. Animations can affect business metrics by assisting in navigation and impacting user retention. The human brain is designed to notice movement. This means there is an immediate impact on the user’s first impression of the brand because animations command attention, hold interest, imply value, and make the site memorable. Once the user’s attention is captured, animations can guide the user through important elements of the website such as drawing the eye to CTAs and other important parts of navigation that drive end-results. Animations can even be used to demonstrate how something on the website works or communicate the status of an action to the user.

However, before you run and add a bunch of animations to your website, there are potential drawbacks to consider, especially if animations are not implemented properly to impact UX.  Going overboard with animations clutter the interface which leads to a bad user experience and a negative impact on loading speed. Slow loading is one of the biggest causes of users abandoning websites and animations can slow speeds down significantly if not executed with attention to quality, scaling, and minimal coding. Unoptimized animations can also result in rendering issues. Users do not want to wait for pages or animations to render, so make sure that rendering and loading take less than two to three seconds.

Consider a few points when adding UI animations to websites. Animations should add user value and not be superfluous. For animations to stand out and effectively direct the user, they need to be in an uncluttered environment and render quickly. Avoid the old-style FLASH methods and opt for lightweight JavaScripts or CSS coding instead. Utilize website builders with responsive animation effects built into their workflow to avoid any detrimental impact on mobile device usage. Pay attention to scale, rendering, and user impact through testing and examining the usage from a user standpoint. Additionally, utilizing a quality hosting service will help to ensure consistency in rendering and loading speed across all browsers and devices.

Animations are a great tool for creating an engaging website and assisting user navigation and their overall experience. If the animations capture attention and guide the user to important website elements with quick rendering, then chances are those animations will increase user retention, conversions, repeat business, and recommendations.