The team at Christian Michaels had already anticipated and acted on the come-back of animation in 2018 Web Design Trends. Where storytelling and website navigation are key components for site engagement and company reputation, animation is a tool to success. Whether you wish to showcase products, guide your users, or give life to your online presence, a skilled web designer can use animation to gently entice your audience. However some website design uses animation in the extreme, leaving users dissatisfied, disillusioned and unlikely to return. With some help from our in-house web designer Ross Taylor, we want to share some top tips when using animation in your website design.
Science Says Animation Works
The human eye is attracted to motion.
Where the majority of a website is static, a web designer can use animation to draw the user to a particular part of a page. A web design company should look to create a visual hierarchy that leads the user to where they’re wanted. In ecommerce web design, you might want to present your products or product categories. Where your business is providing a service, animation can be used to highlight the service or services and act as a navigational device. Where there is a marriage of fun and functionality in web design, you have a happy user on your site. Science tells us that a happy user is more relaxed and more likely to stay on your site and crank up those conversion rates.
Subtlety is Key to Animation in Web Design
There are two main reasons that a web design filled with animation is the route to online atrocity:
All web design agencies should prioritise the user experience, within that resides the company story. What does your business offer and why should the user engage with it? Present the user with a homepage packed with meaningless motion, flashing words and images, and chunks of text flying in from all over, your company will give off the impression of a trashy funfair rather than being respectable and trustworthy. It will only serve to confuse the user, and they are likely to look to your competitors who can provide help, rather than a headache.
The more animations on a page, the slower the page will load. In a world where time is money, a slow page loading speed will frustrate the user and have them clicking on other companies’ websites. Not only that, Google takes loading speed into consideration in the search rankings where the slower your page loads, the farther you’ll be from page one.
It’s all about your brand positivity – happy users and a professional web design means minimal and considered animations. An experienced and creative web designer will know when to stop.
All Animation Should Have Purpose
Animation has three main purposes. It adds visual interest to a website. It can act as a response, for example when hovering your mouse over an item and something happens. It can also be a notification where attention is required. When animation is used without serving a purpose, it risks being a nuisance for the user and gives the impression of amateur web design practice.
Stay Away From Text Animation in Website Design
Animated text is often difficult to read and can be a distraction to the rest of the page. Additionally, when animation is used on large pieces of content, its appearance on the page can be delayed. Imagine your busy user scrolling with speed through your site. Before your animated text has had appeared on that portion of the page, the user has already passed into the next section. The website content is an essential part of the web design process providing vital information to the user about who you are and what you do. Don’t risk missed content for the sake of swinging text animations.
Hover Animations in Web Design
A good web design company will often choose to use hover animations in clients’ websites. They work by moving in some way when the mouse hovers over them. It can be a subtle touch, like an overlay of colour, or the object can move or shake. They are an easy and effective way of conveying that an element of the web design and navigation is interactive. Web designers will frequently use this tool as a navigational device, recognising that it improves website usability.
Scrolling and Smooth Transitions
A ‘slideshow’ of images on a page can showcase multiple pages or projects. There is a balance to find between engaging the user and distracting them. Images that change too frequently are jarring and distract from the rest of the page. Images that don’t change frequently enough, lose their purpose on the page. The smoothness of the transition is a key component to mastering effective animation. We recommend a minimum of 5 seconds and longer if there is a text overlay.
Where a website isn’t a full screen site, the user is required to scroll. This design decision is often taken to give opportunity for story-telling. Smooth scrolling, as with the image transitions, is essential. However it can make way for scroll jacking whereby the scrollbar works to give a series of slides, rather than the traditional vertical scrolling. The general consensus is that this should be avoided. It takes the scrolling power away from the user which can be frustrating, and unexpected. The user likes to be in control, not controlled.
Animation has the potential to push your brand positivity and online presence – when its power isn’t abused. We hope that these tips have been a useful tutorial in spotting a good web design. If you’re looking for a fresh new website design in time for spring, get in touch.
Comments