We will not contact you via WhatsApp or other messaging platforms. Please use our official email addresses or telephone number to speak with us.
本公司不會通過 WhatsApp 與您聯繫。請使用我們的官方電子郵件地址或電話號碼與我們聯繫。
Design & Development | 3 min read

How Motion in Design Can Make Or Break Your Website

This blog is for anyone interested in website design, web development, and web design in Hong Kong. Learn how to effectively add animations to your site. How Animation Can Improve The UX of Your Website.
Motion Design Banner
Tiffany Pau
By Tiffany Pau
February 25, 2022
Share:

Introduction

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.

Providing an Option for Reduced Motion

Providing an Option for Reduced Motion


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

Reduced Motion Setting in Apple

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):

Prefer normal motion
prefer less motion

Vestibular Issues Caused by Excessive Motion

Vestibular Issues Caused by Excessive 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.

Inclusivity in Design

Inclusivity in Design


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.

Final Word

How Motion in Design Can Make Or Break Your Website


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!

Share:
Tiffany Pau
By Tiffany Pau
Digital Strategist
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.

Insights

Contact1
Join us

We’re always wanting to meet talented people who would enjoy working with us, while helping us be better at what we do.

View Jobs
Contact2
Get in touch

Looking for a strategic Digital Marketing Agency in Hong Kong? Reach out and talk to us today!

Contact Us