It was all about bringing a little style, and a little bit of life, to the otherwise static realm of the web page. Mind you, most had probably not yet considered the ways that animation could enhance usability. Still, if the popularity of gifs showed us anything, it was that people wanted to bring animation to their web pages. Thus began the era of dancing babies and other horrors best forgotten. They were introduced in 1987, just in time for the early days of the Internet as we know it (more or less). gif files are, it turns out, older than I am by about two years. We might not be using far too many leather textures anymore, but we’re still trying to imitate the real world.īefore we get onto more practical things, let’s take a look at how animation on the Internet came to its present (and very cool) state. When used right, animation is designed to mimic real-world interactions. This triggers the same feelings (or at least very similar feelings) in them as the ones they experience when they interact with physical objects. They have successfully interacted with the interface, and have caused something to change. That illusion of motion, when applied correctly, is what tells the users that they have actually done something. This would be why people are always saying things like “animation makes our websites (or presentations, or whatever) come alive.” It might be overused, but it’s a phrase that elegantly captures the purpose of animation in web design. It’s the closest we get to capturing life in our art. After all, you are also a user.Animation is no longer a novelty for web designers…it’s becoming the basis of effective interaction design.Īnimation is change, and motion. If you can get answers to these questions correctly and you are satisfied with the design, more often than not, the visitors would also find it attractive. The most important question that you need to reflect on is that have you managed to improve user experience by using it? Is it making them happy or proving to be a useless distraction? In the age of smart phones, when making a website is an imperative, you have to make your website responsive and quick. Overusing it could make the page really slow. Isn’t it cool?Īlthough animation is great, there is a limit. A new form of animation is to use a colored circle like a halo around an icon and as you point your mouse arrow towards it, the circle starts to spin. Sometimes, the icons become bigger in size as you hover your mouse over it and encourage you to make the click. What do you think about a prompt that slides down slowly or a pop-up that appears almost from the thin air to draw your attention to a call to action? All these effects have improved interactivity of your website. This design imitates the “head nodding from side to side” gesture that you often make when you know you have made a mistake.
#Website design animation password#
For example, when you are filling the password field of an account that you have on a website and mistakenly you key in a wrong password, immediately the field shakes to tell you that you are wrong.
Right amount of animation can engage the audience and also guide them to the CTAs where they can convert. Using CSS and Javascript codes have also made the pages less heavy and improved the loading speeds beyond belief.
It was much later that graphics designers started to understand the potential of animation to improve user experience and also drive sales by increasing conversion. Moving animators and gif files were used previously to add a fun element to the design and break the monotone of the presentation. Adobe flash revolutionized animation and the use of vector graphics in web design. However, you will have to get the mix of textual content, visual content and animation effects right if you don’t want the loading time go up drastically.Īnimation is not entirely new. It can make the user interface intuitive and make it easier for the visitor to get around your website. Animation is a subject which has been related to games and creating nice effects but its potential in improving user experience has been underexplored.
0 kommentar(er)
