Design strategy for adding animation to your website

Let me start by clarifying that this post is not about adding large scale, movie-like animations to your website homepage. You might not even notice some of the subtle animations referred to in this post, but they are everywhere on the modern web. Open your favorite mobile app, and even the login screen is filled with animation: bouncing icons, changing colors, update messages fading in and out. All of these small touches of animation significantly enhance the user experience. Business and Mobile app development are filled with such enhancements. So how do you include app-like user interface animation on your website?

The Game Plan

How do you plan in the design phase to make implementing animation more efficient in the development phase? Here is what the Daylight team has found to be effective.

Step 1

Animation will help shape the personality of a website. With that in mind, before you add animation you first need to decide what your brand’s voice and tone look like and then what type of animations would display that voice visually.

Jason’s Picks Example:

Problem: While working on an outdoor retailer’s website, Jason’s Picks, the stakeholders want an entirely new front-end built, and animation is desired for this cutting edge eCommerce project. The brand book describes the business as “forward thinking gear people.” They test all the products they carry and only offer the best quality and functioning pieces. The company delivers an unbiased opinion and wants the products they sell to do most of the talking for who they are.

Note: Choosing animation is subjective, so know when making your decisions that you are reflecting your design style as well as the brand’s needs.

Solution: Jason’s Picks needs an interface that sits in the background. Animations should be simple, so we’ll plan to skip the 360 flip and look more to small fades, scale changes and color shifts. The Brand wants to position themselves as experts. An excellent UI addition could be fade-ins of tool-tips that highlight website features like sorting and reviews. This type of addition would help reinforce their expertise by helping the user shop.

Step 2

Now that a style and feeling has been chosen and documented, it’s time to search for opportunities to implement animations. List the opportunities in order of importance, starting with the those that best support the product’s goals. Guiding the user through interaction points like hovering over a button, clicking a link, displaying error messages and submitting a form, should be your focus.

Jason’s Picks Example:

Problem: For an eCommerce website, collecting money is the primary goal. Before money can be collected, the product needs to be added to the cart, making the “add to cart” interaction, number one for this website.

Solution: The Buy Button animation is deemed most important. We decide to focus design time on a hover effect and success after click animation. While reviewing the Buy Button, we decide we don’t want to redirect the user to the cart after the click, so a quick pop-up or drop-down display of the item in the cart is added to the development feature list. Next, an error message is needed for the user who doesn’t select a size first. With this quick examination, we have established an Add to Cart feature that will impress the user and guide them towards the cart subtly.

Step 3

Using your new list of animation opportunities, uncover the individual components that need to be designed. How you approach the design of an animation is a bit tricky and can be handled many ways depending on team preferences and ability. One quick approach is to search for examples and compile a small library. Examples may be displayed in many respects, like screen captures, URLs of websites, Codepen examples, custom designed animation videos or links to demos. Gather whatever model type works best for your team and catalog them with your list from step 2. Now you know where you want animations and how the motion should look.

Jason’s Picks Example:

Problem: Taking the next step with the Add to Cart action, the client and development team need a visual representation of what type of animation is being recommended.

Solution: The designer finds an example here of a Cart button hover effect, and it’s shared with the team on the step 2 list. A screenshot video is taken and cataloged. The example ‘s not really what’s envisioned for Jason’s Picks but works as a talking point for creating the final. From the Buy Button animation, a stepping stone is laid for other important site button animations to follow.

Step 4

Review your final list and example catalog for consistency. This simple step is of great importance to avoid common pitfalls that come with adding animation. In Step 4 you might decide to rank the list as Phase 1 vs. Phase 2 based on expected budget constraints. Or you might even cut out some animations that seem unnecessary. Most importantly, you look for patterns and add, adjust or subtract animations so that similar components will have similar motion.

Jason’s Picks Example:

Problem: During the website build, the designer reviews the Add to Cart functionality and notices that the drop-down cart window seems abrupt. This is common, even with an organized list there will probably be holes not seen until testing in the browser.

Solution: Referring to the animation list, pop-ups are noted to have a fast to slow fade-in easing effect. It’s determined the same effect should be applied to any expanding container and the Add to Cart drop-down gets the effect added.

Common Animation Pitfalls:

• Animations that appear to be isolated extremes, standing out as odd, jarring or off-brand.
• Animations that cause browsing errors, stall-outs or other bugs like behavior.
• Animations that don’t deliver enough bang for the buck in regards browser loading time.
• Animations that get in the user’s way, slowing them down.
• Animations that lack consistency, which reduces the brand voice and general professionalism of the product.

Your Final Game Plan

All projects are different, and your game plan should be tailored to your team’s needs. The level of detail required for a small marketing website will be very different than a highly interactive web application. You might only put together a plan for buttons and text links, and that’s fine. Taking the time early on to think through animation, regardless of how detailed your plan ends up being, will enhance the importance put on animation for the life of the project. Consistency is king when it comes to animation, so plan well and review again and again after each phase.