How can we help?

Design? Check. Strategy? Check. Bulletproof code? Check! People who can manage it in an agile and efficient manner? Check. Someone to help you create your next big product? Of course.

Denver

- 1201 18th St. Suite 250, Denver, CO 80202

Grand Rapids

- 125 Ottawa Ave NW Suite 270, Grand Rapids, MI 49503

Blog

BLOG:Making Animations That Matter

Making Animations That Matter

The kind of processing power developed in our technology over the past few years is pretty impressive. The technology and platforms at our disposal are incredible to say the least, and it makes designing software, and the User Interface (UI) for it, really exciting.

One of my favorite things about designing a UI is blending different elements together - creating tighter interactions and transitioning complex ideas into streamlined workflows. For complicated design problems, I often use animations to help solve problems - they can be a powerful tool that help make tasks more manageable.

Animation has become an important tool in software despite the bad reputation it has within the software industry. When executed poorly, it can be superfluous or just downright annoying, conflating issues and leading to messy or confusing UI that distracts users from their goals. When used well, animation can actually help to solve real design problems.

Let’s get moving

Animations explain how something gets from point A to point B. It describes the reaction to an outside force and shows the results. Pages on screens change all of the time; dynamic screens are what make digital experiences unique. Using clear segues is a basic way of showing change and gives the user an explanation of the change instead of an abrupt page transition.

Feedback is another important thing animation can illustrate. It can better communicate what is happening and display the result of an action. Opening a new page or submitting a form are great examples of how animation can help users better understand what’s going on. If your software has no response after an action for more than one or two seconds, it can be severely damaging to their confidence in your software. If a form is submitted and it takes a while to load the next page, it may be a good idea to visually show that something is happening. A progress bar or visual updater can be a good tool to show that the website is working. Reassuring the user that your software works keeps the them confident and prevents attempts to resubmit the form repeatedly.

Most kinds of inputs can benefit from subtle animations. Recently we had to solve a problem with a client where we needed to take a large article with occasional data points and make it editable. We couldn’t just throw a large text area at the user as the text was broken across multiple sections and data types. The person editing the information also needed a preview before they sent it to readers. Changing text from a read-only, edit, and preview state can get really complicated. We decided on a subtle, but clear, transition between read-only and edit to emphasize the state change and give an inline preview of what the text would look like when the user was done making changes. The transition worked, and even though we are still in early user testing the results have been very positive.

While there may be instances where you want to capture the users attention, animation should be seamless and non-distracting for your users, keeping them immersed in what they’re doing. Focus is drawn to things that move, this concept dates back to the beginning of hunting and gathering. Animation can help you draw special attention to an update, or to notify the user that a file upload has been completed.

One of the more common ways to use animation to draw attention is in form validation. For example, you can give the user a checkmark by correctly inputted information or highlight the fields that need to be fixed. Animating the submit button can also be helpful to users - starting with a desaturated or inactive button lets the user know the form is not ready to be submitted. Once a form is complete and ready for submission, transforming the submit button from desaturated to rich in color helps to draw attention to the button.

Start now and start early

When adding animation, start as early as the wire-framing process. With UX and UI in mind, you should be consciously thinking about how the user flow works and whether or not a transition of states needs to be explained. Many subtle transitions and animations can reduce the cognitive load of changing screens allowing for a better overall user experience. Starting early means you are creating them as a part of the solution to the design problem. If you wait until the problem has been solved then you might just me making unnecessary transitions that could take away from the overall experience.

Every software category has a relative threshold on the amount of tolerated animation before it gets distracting. If you are building a new game, you should add a lot more overt animations than if you are building accounting software… but that doesn’t mean you shouldn’t add any. Be aware of the context and be ready to make them more subtle.

We all want to build better software, it’s certainly what drives us here at Universal Mind. Using ever advancing techniques of animation can really emphasize the quality of the software you’re building and create better user experiences. Any design element can hinder the user experience if used improperly, but when used correctly animation can build an inviting, uncomplicated piece of software for your users.