Motion Design: Functional Animation in UX Design

Dyachenko Anastasia
Dyachenko Anastasia
CEO at Cadabra Studio. UX expert and business consultant

Less than 10 seconds are needed to check out the website we have accidentally run into. A user is hard to catch and even harder to keep – we leave at once we feel slightly bored. Like little kids, we are attracted to something bright and moving.

That is why even being adult we keen on some cartoons, comics – the stuff with animation implemented.

uiux design agency, ui/ux design agency, ui ux design services, ux design services, ux services
Over the Moon by Lidiia Piven

And digital products are not exclusion. Motion design here is not just a growing trend, it is a necessary design element. There is a wealth of ways how to use motion design. Though, there is a risk to do it in the wrong way and get a disappointing result.

There is a vital principle you should remember about while implementing animated effects into your product design – the animation should serve a purpose. It has to draw the eye to the element highlighted without being distracting and why it was used must be easy to explain.

uiux design agency, ui/ux design agency, ui ux design services, ux design services, ux services
Place 2Go in Motion by Cadabra Studio

Addressing our expertise in this issue, we offer you the shortcut of the basic ways of using motion design with the aims they are used for.

Reveal. Hide. Change. React. These minor details often stay unnoticed. Still, they are the basic effects you can add to your product. They are motion design features used to enhance the effects of mobile or computer screens.

We perceive what we see on screen as the moving dimensional elements. It is the illusion produced by animated details. There are micro-interactions – the reaction of UX elements to the user’s actions. 

uiux design agency, ui/ux design agency, ui ux design services, ux design services, ux services
Cinema App Presentation using 3D Mockup by Cadabra Studio

They serve two different goals – provide the user with visual feedback and information on how the element should be used. The special of the micro-interactions is that they must be subtle – they don’t steal the spotlight from the elements they highlight, but simply make them easier to use. Looking closer, we can suggest a few cases when motion elements worth implementing: 

  • To highlight when you turn a feature on or off.

uiux design agency, ui/ux design agency, ui ux design services, ux design services, ux services
Simple Animated Icons in Color Style by Margarita Ivanchikova
  • To let users know the action was a success (such as submitting a message through a contact form)

uiux design agency, ui/ux design agency, ui ux design services, ux design services, ux services
Chevent App by Cadabra Studio
  • To highlight specific pieces of information (such as prices within a table)

  • To animate icons on your site.

uiux design agency, ui/ux design agency, ui ux design services, ux design services, ux services
Button Bar Navigation by syful islam

Another trick is the usage of hover animations. They allow maximizing the information you provide in the space available. The key is to add information your visitors will be interested in reading about. Such animations are easy to implement, and they can add some depth to simple websites.

Talking about motion design, revealing hidden menus is often mentioned. Actually this option is quite controversial. Many people think that menus as an important part of navigation must always be visible. But in some cases, for example, when we work with a large number of pages, such kind of menu is helpful and convenient. Animation makes it less abrupt, pleasing the user’s eye.

 

Transition. Scrolling. Pacing. We began by explaining the function of motion design as a bait for the user. It grabs attention and keeps it. But if we look at it from the other perspective, we can notice that by grabbing our attention, animation can distract from something users shouldn’t pay much attention to.

Changing screens always feel slightly abrasive. Loading time is a natural drawback of the website that sometimes cannot be avoided. Blunt transitions make the website difficult to perceive and sometimes tears your UX. Transitional animation is here to fix it up and make the process of transition pleasant for the user or even unnoticeable.

Funny animation keeps the user entertained while the website is loading. Also, it can be used to remind the user of your brand identity or just to make the website more memorable. That’s how by means of motion design we can turn drawbacks into advantages.

uiux design agency, ui/ux design agency, ui ux design services, ux design services, ux services
Optimus prime vector illustration by Zahidul

The other important function of motion is scrolling. In fact, scrolling is a huge transition. Such an effect makes the transition less jarring, users get the impression that the page is real and exists behind the screen.

Scrolling is not just visually appealing, practically it is the instrument to help users interact with the product and lead them through the website or an app. Another bonus – the page that changes while scrolling can also entertain the user and thus improve your product recognition.

 

The option we rarely think of is pacing. The thing is, our brain takes some time to process the information, so abruptly changing screens and information may be confusing. Motion effects may slow it down helping users work with information and comforting them.

Educate. Inform. Delight. Motion is effectively used to give the instructions. Visuals and movement can teach better than words. Thus, motion effects are widely used for onboarding, instructions and some new features presentations.

They are more lively and bright than even illustrations, not to mentions sentences. For example, the use of hover animations usually has an educative effect – when there is a response to cursor movement, the user intuitively knows what to do.

 

uiux design agency, ui/ux design agency, ui ux design services, ux design services, ux services
Flash Market Onboarding

But the real magic of motion design is a delight. It makes a difference when you try to make something special out of the product, wish it to be remembered and shared. Options here are motion effects on the background, manipulations with a logo or just page motion.

Motion boosts users’ interest, makes an impression on them. For the business, delighted user means increasing traffic, conversion and benefits growth. 

uiux design agency, ui/ux design agency, ui ux design services, ux design services, ux services
Jewellery – website animation

 

Jewellery Website Animation

Whatever the actual practical meaning of the motion elements you use, remember about three main points – keep it simple, useful and fascinate the user, and graphics will be of great value for your business.

Frequently Asked Questions

The Healthcare industry is known for complex processes explained by the high level of responsibility.

The cost of medical app development depends on several factors like your needs, set of features, technology stack, and so on. Though our business analytics make sure to not spend an unnecessary penny.

To make a mobile app screen, you need to create a user flow diagram for each screen, draw wireframes, select design templates, and colors, create layouts, and create an animated prototype.

We usually take our clients through the following steps:

  1. Planning and Research; 
  2. Prototyping;
  3. Design;
  4. Development;
  5. Testing;
  6. Release;
  7. Maintenance.

You will participate in every stage of the development process and get regular updates.

Tell us about your project

Attach any relevant documents. Maximum 10mb

Table of Contents