Animation and interaction in web design

Could your website be improved with more user focused interactions?

Animation has almost become a staple of modern web design and used in the right way can greatly improve how users interact with your website. By using small animations and interactions, we can communicate messages creatively. We can guide the users attention to action buttons and influence the users behaviour's in accordance with the websites goals.

It is well known that we are attracted to motion, which makes animation the perfect tool for drawing attention and reinforcing the actions a user is performing, or required to perform.

One of the most simple and widely used forms of animation which has been around since the conception of the web page is the loading or activity animation. Formally created with flash of by animated gif, 'page loading' animations are now created with javascript and pure css to create some very attractive and creative animations. If your website processes data and other submitted user information then an animated loading graphic can reduce the users focus on loading times.

Progress Bar

Progress bars and multi-step progressive elements can not only enhance the look of your website, but inform your users that something is happening or in process.

Rollover Action

Hover and click animations have also been around forever with the use of desktop browser, rollover states. If a user cannot be sure about a features function, we will instinctively test it by moving our mouse curser over it to see what happens, reinforcing this will an animation give users instant recognition that it is something they can interact with and take action by.

Tap Action

For touchscreen devices and tap action provide the user a brief reward and reassurance that the tap has registered, before completing the task behind the button.

Story telling

Once upon a time, we used to insist that all relevant and important content fit above the fold (by which I mean the screen before the need to scroll), thanks to larger screen resolutions, mobile responsive website display and a better understanding of how users interact with websites, we are now more comfortable knowing that users are quite happy to scroll down a website and can therefor design the web page accordingly.

Some websites choose to give pages a parallax effect, making foreground and background elements move independently of each other. Some website use motion to scroll with great effect which can animate an element as the user scrolls up or down.

Here are some great examples:

Firewatch
The Porsche evolution

Creative animations can not only simplify user journeys and speed up interaction times they make your user experience truly delightful and memorable.