A couple of years ago, animation was often overlooked by designers, but today the general trend is to consider animation as an essential part of user experience.
Animation can be found on many websites, either for decorative purposes, to emphasise the main content, or even as a tool for the user interface. These animations are not just eye-catchy elements but also play important role in web design, making your website more attractive and easy to use.
They can be a powerful tool for user engagement and conversion. However, you don't have to go overboard with animation effects. Truly amazing animations can be captivating, but animated elements that are used poorly can turn off users and even cause a little motion sickness.
In this new Butter Insight, we’ll share with you some tips about how to choose the suitable animation for your site and provide you with some examples of good sites that use animation in their web development effectively.
Using a few seconds of reduced motion on your website can improve the user experience. When the cognitive load for a user is reduced, it also helps them learn new skills and retain information. That’s a win-win for you and your potential customers.
Trouble is, most sites don't use it. In fact, they tend to overdo the use of movement and sound. A majority of videos on e-commerce sites play automatically with sound. Research shows that's a bad idea: according to Verizon, 92% of viewers will turn off the sound on videos that play automatically.
This is particularly true for longer videos. Shorter videos are better suited for grabbing attention, but a video is powerful in e-commerce. For example, users who view product videos are 60%-85% more likely to purchase than those who don't watch them.
So why is it when you visit an e-commerce site you're often greeted with lots of movement and sound? There are many reasons for this — for example, it's about making sure you catch someone's attention and hold onto it long enough to read the content and sales copy below the fold.
But there's also a danger in relying too much on those tactics: If you're going to be using them, the best approach is subtlety rather than shouting
With the introduction of iOS 12 and macOS Mojave, Apple has introduced a new feature that allows users to reduce motion on their devices. In other words, it's giving people with a visual disability the opportunity to reduce the amount of movement and effects on their screen.
Tapping "Reduce Motion" under the Accessibility settings in iOS 12 or Mac OS Mojave will give you two options: Reduce motion (on iOS) and Reduce motion (on Mac).
When switching on either of these features, you'll be able to customize the experience by being able to choose what type of motion or effect you would like to turn off.
For example on an iPhone, you can choose to turn off the parallax effect on your device by going into Settings > General > Accessibility > Reduce Motion > turn on Reduce Motion. Once turned on, scroll down further until you find Parallax effects and toggle them off. Make sure Reduce Motion is turned on first.
An example below, which do you prefer? (top: normal motion; bottom: reduced motion):
Have you ever had this problem? You go to a website, and suddenly your head starts spinning. There's some kind of animation on the page that triggers vertigo or dizziness. It might be an animated menu bar, a spinning logo, or even a background image that moves when you move your mouse.
The problem is that people with vestibular disorders — disorders of the inner ear affecting balance — can experience extreme discomfort from even small amounts of movement in their visual field.
Motion is everywhere on the web — from videos, animations, to even subtle transitions that are used to give visitors a more engaging experience. But sometimes, a website's design can get in the way of usability. While these designs look great, they may also cause usability problems, such as issues vestibular disorders causing nausea, migraines, vertigo, amongst other issues.
When designing a web page, it is important to keep inclusivity in mind. At the same time, design should not be at the cost of functionality.
Tone and functionality are both crucial to how your users feel about your websites and your brand. It is not just possible but strongly recommended to have a good design that makes all the users feel included.
Making sure to keep a healthy balance while adding motion to your website will help people avoid unnecessary health issues and improve your users’ experience.
Good design is in the details and animations are a way to spice up a website. They can be used for tutorials, onboarding users, showing functionality, adding a human touch, and much more. When done right, they will increase conversion rates and improve usability.
The whole point of animations is to communicate the intention of your design or add a little touch on top of it. The first impression is important, and you want it to be great. You need to keep in mind you are making a movie here, so make sure it’s fluid as well. Not only should the animation flows seem natural and smooth, but each movement should have a purpose behind it.
If you need help with your website design Hong Kong or UI design, get in touch with Butter experts!
Tiffany is a Biochemistry graduate from CUHK. After graduation, she worked as a Digital & Analytics intern at L'Oréal APAC for more than a year before joining Butter as part of the Graduate Programme. Tiffany now works closely with the Strategy and Business Development Team to meet output expectations and contributes to managing client projects within Butter.
