Blog

In the early stages of design a lot of clients ask where to get ideas for their new website, and we often instruct them to browse other websites and take notes on features that they find interesting or useful. This is a fairly standard practice across the board, and a great way to find out what options are available to clients who need a starting point. However, what seems to happen quite often is that the client sees all of the possibilities that exist and they want to throw the coolest looking animations on their own site just for aesthetic purposes. As designers, this is where we need to step in and explain that animations are not just eye candy. They exist first and foremost to enhance the user experience, and if not used properly they can easily do just the opposite.

One of the most common requests I see is the fixed header. We use fixed headers for sites with a lot of content that requires the user to do a lot of scrolling down the page. A fixed header that follows them down the page is helpful because they always make the main navigation, home link, and other useful tools immediately available. With proper animation it also adds a smooth and sleek touch that is pleasing to the eye when scrolling down. But many clients do not have enough content that would require a user to scroll far down the page. They simply want a fixed header because they think it “looks cool” and want all the cool stuff on their own site. When a user can quickly slide right back up the header with little to no effort, a fixed header just gets in the way of the reader absorbing the content. More of the content is cutoff from the header, and the animation can get annoying if scrolling up and down quickly is firing an animation constantly. This is a prime example of adding features that can actually hinder the user experience rather than adding value.

Hover effects are probably the most ubiquitous animation on the web, and they are one of the most helpful animations to users. They help indicate what can be clicked or selected, and they help guide the user to perform an action. It’s when the animation takes priority over the action that the user suffers. A hover animation should be quick, smooth, and consistent. If the user has to “wait” for animation to finish, it is taking far longer than necessary. A hover effect should be a subtle movement, or color alteration that signifies to the user that this element will perform an action to the user or guide the user to the next task. It doesn’t need to amaze the user, though there are some really cool hover animations that can really enhance a site. Its main function is to serve a purpose. We never want to decrease functionality for the sake of vanity.

Animations can add so much life and emotion to your website and should absolutely be used in instances that benefit the user. We as designers and developers simply need to guide clients to only focus on animations that are serving a purpose to the users. Finding the harmony between functionality and artistic style is where your animations will truly create a better user experience.