Use Motion To Create A Better User Experience Without Distracting Users

Creating a website for a client who insists on using moving elements to make their website stand out means walking a fine line between creativity and distraction. There will always be clients who want obnoxious elements like background music, cursor trailers, and strange volume adjustment interfaces. However, some interactive elements have the potential to support user experience when implemented correctly.

Traditional advice tells designers to avoid moving elements, but moving elements can create the edge a website needs to be truly original. You don’t have to sacrifice originality to create a better user experience. Some of the top web design trends in 2019 incorporate movement into the page. For example, scroll-triggered animations, rotating animations, and using CSS to produce drop-shadows are effective at engaging users when done correctly.

Here’s how to incorporate moving elements on a webpage without distracting the user:

1. Fade the moving element into the background

Playing around with opacity is one way to make movement supportive rather than distracting. For example, Dutch Bros. Coffee uses a low-opacity mp4 file in the background for all of their locations. Each location’s page is styled in high contrast and features the address, hours of operation, and a link to a map. The content is clearly visible over the video playing in the background, and it makes you feel like you’re actually at the drive-thru window getting a coffee.

Fading a video into the background is just one way to subdue the possible distraction of a moving element. You can also make animated gifs and other animations low opacity. A video works for Dutch Bros. because the video conveys the experience you’d get at one of their locations. A video may not be the correct.

2. Automate your post sliders

If you’ve got a slider at the top of your page, automate the movement of that slider. For example, have each slide automatically move to the next after a couple of seconds, and rotate between no more than three pieces of content.

Make sure the content you feature in your slider is content you want visitors to focus on the most. A moving slider is distracting, but it works in your favor when you want visitors to pay attention to that content first.

3. Make use of state changes based on user interaction

Change the appearance of an element on mouseover. For example, if you’re asking for a donation, create a graphic that changes when a user hovers over that element. Make the change something that will make users smile.

A wonderful example of animation done correctly is Meteor Toys. When a user clicks on any of the three top menu options, the content zooms forward to meet the user. Clicking the other content on the page produces similar zoom animations that open content boxes right on the same page. This is called semantic animation.

4. Use parallax sparingly

There are an infinite number of website templates that use parallax, but when it’s not used intentionally, it doesn’t benefit the website. For instance, parallax scrolling looks cool, but if you’re just filling in a template, you’re not using the feature with intention.

Other sites like everylastdrop.co.uk use parallax to tell a story. In this case, the story is about how much water the average UK citizen uses each day, and leads the user to a short video at the end that describes how to save water. The presentation is unusual, but it’s definitely unique and engaging.

5. Remember to offer controls to users

When using movement to capture attention, remember to offer controls to users. Unless you’ve created a perfectly timed presentation, let users do their own scrolling and navigating. When users are on a website that isn’t a video presentation, they expect to stay in control.

Porchevolution.com is a great example of a site that has potential, but will lose users due to lack of controls. While the user can move this creative presentation along by clicking, they can’t adjust the volume. Since the soundtrack is half the presentation, some users will leave the site.

Keep refining your moving elements

When using moving elements on a page, continue to refine those elements based on user feedback. If you get emails or social media comments saying your animations are annoying or distracting, you may want to revamp them a bit.

At the end of the day, the coolest website in the world won’t be functional if it’s also distracting.