Brilliant progress bar animation and interaction in web design

Animation and interaction in web design

Could your website be improved with more user focused interactions?
Jon Strube
February 26th, 2018
Written by Jon Strube
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.Brilliant web page loader example

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.Brilliant progress bar example

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.Brilliant button interaction example

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:

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.

Are you ready for a Brilliant Video?
Typography in web design
Talk to us.
To discuss your Brilliant idea or project, call us on 01279 725358 or send us an email enquiry below…
Request support through our app
Download our Brilliant Helpdesk App!
Brilliant Helpdesk App on the App StoreBrilliant Helpdesk App on the Play Store
© 2020 Brilliant Ltd. | Company Information
Brilliant's Facebook
Brilliant's Twitter
Brilliant's LinkedIn
This website uses cookies
More information