How Movement Can Make or Break Your Design’s Usability

Meaningful movement is imperative to good design. The keyword here being “meaningful.”

When done well and with purpose, i.e. with meaning, movement can dramatically improve a UI (user interface), improving the user’s overall experience. However, when done poorly and with no purpose, movement can have a negative impact on the design, ultimately damaging your users’ experience.

Take the following video from Google for example. The video showcases a photo gallery on a mobile device, with two variations of the app’s movement occurring right after a photo is deleted.

You can see how important movement is in this scenario. You can also see how important the right movement is in this scenario. The first variation includes a lot of extra movement, visually showing the photo from the bottom row shifting, diagonally, up to the row above. The second variation, however, achieves the same end-result but with less movement, resulting in a cleaner and less overwhelming solution. The difference may seem insignificant, but imagine yourself deleting photo after photo after photo—that slight difference in movement will quickly become more significant.

As you can see in the video example, implementing movement isn’t quite as simple as it may seem. While there may be a million and one ways to do it, only a handful of those implementations are going to add real value to your final product. To ensure you’re adding movement to your design in a meaningful way, you need to consider the UX, the design, and the implementation.

  • UX—how will movement impact the UX?
  • Design—what will the movement look like and why?
  • Implementation—what technology can, and should, be used to implement the movement(s)?

How to Improve UX Through Movement

As mentioned above, there’s a very fine line between adding movement to your UI in a way that adds true benefit to your users and adding movement that ultimately harms your users and the experience they have. Too much movement can be incredibly distracting while no, or not enough, movement can result in a dull, confusing, and uninspired UI.

Before you begin designing anything, first ask yourself these three questions:

  1. Why do I want to add movement to my UI?
  2. What am I trying to achieve by adding movement?
  3. How will this movement help my users?

At the end of the day, some level of movement is necessary in interactive design. In the video example from above, when a user deletes a photo from their gallery, movement provides a visual cue confirming the photo was deleted. It also explains (in a visual way) how the new order of photos in the gallery was determined.

Another different, yet common trend in web design right now is the act of animating in content to a webpage as a user scrolls to a certain point on a page. Doing so can draw attention to the content, while also adding a bit of a ‘wow-factor’ to your site. However, having everything animate in on scroll would be overwhelming and off-putting to your users.

At the end of the day, movement is necessary. However, meaningful movement is preferred.

When done well, your users:

  • should benefit from the movement.
  • shouldn’t think twice about the movement.
  • will have a positive UX.

How to Design the Right Movement

As far as the visual design of micro interactions, there are a few things to consider. One, who is your audience, and two, what is the purpose of the animation? Is it to be useful? To make the user feel good? Or, is it to delight or entertain? Asking yourself these questions will help you understand if the animation or movement will be a good addition or a nuisance.

Pre-loader Animations

The best reason to use movement in design is to keep the user happy and interested while they wait for something to load. There are several reasons why this is beneficial. For example, if you create an animation that indicates how much longer the wait will be, it puts the user at ease. But, even better, if you create an animation that is fun or interesting to watch, the user will not only be put at ease, but will also be entertained, distracted, and less likely to leave your site while waiting. If your page or application takes longer than normal to load, a “percentage-done animation” is a great solution. It makes waiting a little longer bearable because it keeps the user in the loop. The user knows when they can expect the page/video/app to be ready.

There are unlimited ways to animate your wait times. It could be as simple as a preloader spinner wheel, which is pretty standard. But, if you want to go the extra mile and create something interesting or fun, there are many ways you can do just that. When making this selection, remember to go with something that aligns with your overall brand, or something that’s relevant to the subject matter that’s being loaded.

Here are a few examples of pre-loader animations:

Pre-loader animations are simple and easy to implement. They are a more straight forward design, making them the perfect solution for a bank or an industry where the look and feel is no frills:­

animation coding

 

Perhaps this animation could be used for a whale and sea life rescue organization, I love that it emits a personality:

Who says books are boring? Wouldn’t this loader be great for an online bookstore or library?

book animation

You could always have a fun animation of your company logo, which is a great way to personalize and keep it the design on brand:

google animation

­­Designing Animations with a Purpose

Movement in design is not limited to just having a pre-loader animation. Below are a few examples of animations that serve a purpose—whether it’s to help or delight the user.

There’s a company, Makerbots, who makes and sells 3D printers. Their users are likely clever because they are inventors, right? Then you can probably count on them appreciating a clever and smart animation. On the mobile version of their site, when closing the menu on the mobile version of their website, the “hamburger” icon, or the three horizontal lines that represent the mobile menu bar, animates back into place by looking like it’s being printed. This is a subtle and clever idea, and works to create a more personal experience.

purpose animation

On the MailChimp website, they help users visualize the time they’re entering by creating a second checkpoint to ensure users are inputting the correct time. There is a small clock icon that simply changes the hands to the corresponding input time. This is a great example of meaningful movement in design because the animation is purposeful. By creating this animation, it helps users feel confident and it helps MailChimp ensure that their customers are happy with their product. It’s a win-win!

schedule animation

Some animations are purely stylistic. If that’s something your audience would appreciate, then I say go for it. When used correctly, animations can elevate a design. It can take a clean and modern design to the next level and make it feel futuristic and smart. The example of movement in design below helps the design feel less clunky by not having to reload entire pages.

website animation

You can also make an emotional connection with users by pulling design elements from a point of interest. Below is an example of Google implementing this when users search for Bletchley Park, which was the central site for British codebreakers during World War II. As you can see, the name Bletchley Park animates in, which cleverly explains the background of this park. This is intended to entertain users and to drive users to want to visit and learn more about the park.

map animation

As another example, you may have noticed Facebook recently added some nice, feel-good animations. After posting a photo or video and then coming back later to find (like me) that you have hundreds of likes, it temporarily animates a burst of hearts and thumbs up according to the amount interaction friends have had with your post. This animation is entertaining, but it’s also a nice, visual cue that lets users know how much interaction their posts have received.

Lastly, a fun example for the Star Wars fans out there. Everyone knows most Star Wars fans like to apply Star Wars aesthetics and design elements anywhere possible. So, Spotify took their fans into consideration when turning the play bar into a light saber that grows as the length of the song gets longer. This is a great example of considering your audience before implementing an animation.

spotify star wars animation

Designed Animations Gone Wrong

Do you remember, way back when, when the internet was just a baby—it was so poorly designed and slow! Or, do you remember, that first time you opened Photoshop and went crazy with all the possibilities like crazy filters and lens flares? Or, do you remember using Flash? Let’s not go there again.

How did we manage all those crazy animations and lack of internet speed? There is definitely a difference between good and bad motion design, and it’s crucial to know the difference. Take the following gifs as an example:

Good glitter gif:

Bad glitter gif:

Luckily, we’ve all grown up and realized that tasteful/subtle design is much more pleasant for everyday use. So, go forth and be smart, tasteful, clever, and fun with your animated designs.

How to Properly Implement Movement

Technologies at Your Disposal

Movement can take shape within web via many technologies. It started in HTML, with the <marquee> html tag, which simply shifted text from one side of the page to the other.

The marquee tag has been deprecated, and its use is highly discouraged from both the people who write the HTML specifications, as well as just about any web developer on the planet—regardless of how alluring its nostalgia is.

After a few other technologies were introduced to the web, such as Macromedia Flash (now owned by Adobe), Dynamic HTML (DHTML), Java, CSS, JavaScript, Scalable Vector Graphics (SVG), and Canvas, the internet is finally beginning to mature and settle into a recommended subset of tools for animations.

Simple two-dimensional animations involving the four primary methods of transforms—translate, scale, rotate, and skew, or basic visual animations are generally created on the web via CSS with a sprinkle of JavaScript. Combining these four transformations in different ways gives a large amount of options for conveying or reinforcing the visual and emotional connection with the content it applies to. The limitation here is that CSS is not able to manipulate specific vectors of a shape; only applying to the shape as a whole.

For more advanced and organic two-dimensional animations, SVG has settled in as a great way to apply the four basic transformations on a per-vector basis, rather than the per-shape basis that CSS has to offer. SVG, combined with JavaScript libraries such as snapsvg.io can be a great way to create highly detailed, very flexible, and highly controlled animations on the web.

For the more advanced, three-dimensional animations, the <canvas> element can be used alongside JavaScript to create some pretty stunning environments.

Following are some basic concepts for understanding and implementing two dimensional animations using CSS for the desired mood of a design. Because of the complex nature of implementing SVG animations and three dimensional animations, we’re forgoing those technologies in this post for the sake of brevity. I encourage you to seek out tutorials on the use of snapsvg.io and three.js for more information on implementing more rich, diverse, and complex animations.

The Mechanics of a Timeline

Transitions

In CSS, transitions are the building blocks of animations, and are defined as the period of change from one state to another. Think of the aforementioned transformations: translate, scale, rotate, and skew.

As a basic example, the “translate” transform is the change of an elements x and y position on the page to a different x and y position on that page. This change in position can be made over time, rather than instantaneously, to create a transition. Transitions can also apply to properties of an object outside of the basic mathematical transforms mentioned above, such as fading from a green background to a blue background; the orientation of the element has not changed, but its basic visual representation has.

Animations

Animations are the combination of several transitions. Animations allow you to run several transitions in sequence, or slightly offset from one another. Animations allow for a more complex representation of movement through those combinations.

There are three components of an animation—a transition, a timeline, and a curve. A timeline is a representation of a period of time it takes to move from a starting point to an endpoint. Transitions can only have one timeline which defines how long it takes for that transition to complete. Animations are a collection of transitions, and therefore, can have many timelines that can be merged into a single, higher-view timeline.

Curves

The last component in animations and transitions are curves. Curves (or “timing-functions”) determine how far an element should progress through its change in state at any given point on its timeline. Curves can be represented on a grid, with time as the x axis and progress as the y axis.

If you were to create an animation that ran for one second, that moved an element from one end of a container to the other, and your curve was a straight line – the element would move at a consistent rate for the entirety of that one second.

sample of element

Result:

See the Pen Simple Linear Curve by Timothy (@mindfullsilence) on CodePen.

However, if you created a curve that was sloped upwards at the beginning, and leveled out at the end, as pictured below, the transition would start out rapidly and then slow down significantly over the course of that one second:sample element 2

Result:

See the Pen Quick Start Slope by Timothy (@mindfullsilence) on CodePen.

Although both animations last exactly one second, the perception of the two are distinct, with the first seeming bland and uneventful, and the second invoking an almost jarring discomfort that relaxes toward the end. The curve is one of the most valuable components of transitions and animations for depicting emotion. Creating your own is as easy as jumping over to cubic-bezier.com and playing with the interactive tool.

A CSS Transition

Let’s finally jump into an actual example of creating a transition. For demonstration, let’s assume we’ve gathered requirements from our team for a soft transition from the right of the page in the main header. The transition should last 0.3 seconds and fade from invisible to visible as the element moves fifty pixels to the right. The intention of this animation is to pull the users attention to some important content on the page without too much excitement or disruption from the main content. We’ll start with a very basic page that contains the elements for the demonstration. See my example here.

The element we’ll be transitioning has an html ID of hero-callout, and we’ll use that to target it. We’ll first set its initial state, which has an opacity of 0, and shift the element to the right by 100 pixels.


#hero-callout {
	opacity: 0;
	transform: translateX(100px);
}

Let’s also set up the endpoint of our timeline. We’ll create some CSS rules that apply to the callout whenever it has the “fade-in-left” class:


#hero-callout.fade-in-left {
	opacity: 1;
	transform: translateX(0);
}

Our next task is to setup some simple JavaScript that adds the “fade-in-left” class to the element. This will allow us to create our final state and apply our transition. We’ll set this up on a timer so that the animation begins a few short moments after the page has loaded in.


$(document).ready(function() {
    $('#hero-callout').addClass('fade-in-left');
});

We now need to add in the transition property that tells the browser to create a tween from the starting point toe the endpoint. We’ll do this by adding some new rules to the endpoint:


#hero-callout.fade-in-left {
	opacity: 1;
	transform: translateX(0);
	
  transition-duration: 0.3s;
  transition-property: opacity, transform;
  transition-timing-function: linear;
}

This tells the browser we want to transition the opacity and transform values over a 0.6 second period of time, and use a flat line for our Bezier-curve. The linear curve here is useful for creating the “soft” feel the team described.

Conclusion

Movement in design can greatly improve the user’s overall experience, when the design of the animation/movement is done well and for the right reasons. Remember to think about who your users are, what they would be drawn to, and whether or not the animation fits into the overall strategy of your website and/or mobile application.

In the end, with the right UX tools, design elements, and technology on your side, you’ll be one step closer to creating powerful and purposeful movement in your designs.