Motion to help enhance your designs!
Look at the image above. Which button seems better to look at? The common answer would be the second one, even though the design for both the buttons are similar. The reason behind the second one being more fun to look at is due to motion injecting life into a static design.
Modern web design is rapidly moving towards using motion to enhance and supplement human-computer interaction. Large corporations like Google and Microsoft have their own set of guidelines for design which helps bring consistency across the web. Google has even defined certain guidelines for motion under “Material Design” which we will discuss later in the article.
Apart from adding an extra ‘oomph’ to the designs, using motion also serves important functions in improving user experience. Let us discuss the nuances and the importance of motion to help accentuate designs.
Motion graphics
Let’s be honest, no one likes to read huge amounts of text on a website. Simple animations can inject life into the content by relating it to visually appealing elements. By using appropriate motion graphics, we make sure that the user engages more efficiently with the content of the product. It also adds extra depth to the design and makes it enjoyable to look at.
Adobe After Effects is a great choice for animating your designs as it allows great flexibility and detailed customizations. Besides, it uses the power of expression codes to speed up the process of frame-by-frame animation. Other than that, tools like Adobe Animate and Procreate allow for more flexibility to someone who wants to draw each frame of the animation.
Online sources like Lottie, Dribbble and Behance can be great to start with motion animation. I particularly like LottieFiles as it lets the user download the After Effects source files for customization. Moreover, it provides free animated SVGs which can be directly used across the web, iOS, Android and many other platforms.
Micro-interactions
Micro-interactions are small animations that may not be required in design but the lack of it gives you an empty feeling. In another way, they are an additional experience that is appreciated for providing instant gratification to the user. As an example, check out how the clap button glows up when you click on it. Not only that, it does so multiple times too. 😉
One of the most important functions of a micro-interaction is to give feedback to the user so they know that the system has received the command. A micro-interaction follows the 3 basic steps -
Trigger — Rule — Feedback
Every step of a micro-interaction is related to a small animation that makes the user aware of its state. Micro-interactions are usually used to undertake an action. In the example above, the user triggers the button and it changes to a counter and a circular dial that correlates to the counter. The button then shows the download progress (indicating rule). After the download is complete, the screen and the button turns to green with subtle elements to give users feedback.
Companies have come up with tools and integrations to allow designers to animate micro-interactions directly in the design software and test it out. Some of these tools include Adobe XD (using the auto-animate feature), ProtoPie, Invision Studio, Figma, etc. I work exclusively with Adobe XD and often use its auto-animate feature but I REALLY appreciate Invision Studio’s keyframe easing for motion (maybe it’s the AE junkie in me 😛)
Mimicking the real world
Motion is essential in design as it gives the users a feeling that they are interacting with real-world systems instead of a robot. Just like how a ball does not bounce with the same velocity and to the same height all the time, the cards in a web design should not move with constant velocity when swiped. This is when easing the speed of the motion comes into the picture.
A good rule of thumb is to adjust the animation in a way that it speeds up when entering the screen and gradually slows down and settles into place as it ‘loses momentum’. This makes the interactions feel realistic and not ‘blocky’. This rule is simply a starting point for imitating real-life physics and can be broken carefully to induce more creative interactions on the web.
Guidelines
Guidelines provide a great start and help maintain consistency while creating motion for a design. Google’s Material Design employs the influence of light and spatial setting to mimic the real-world movement. This lets them use the z-axis while designing an application which opens up multiple avenues for design.
While motion greatly enhances a design, it will always be supplemental to a good design. I have always believed that you cannot improve a bad design by designing mind-blowing animations. On the other hand, great designs can be made even better by simple animations like zoom, scale, and position variation. Thus, higher priority should be allotted to creating better designs and motion should just be used to improve user experience.
If you like what you read, do clap for us and check out the articles recommended by us below.
A quick guide on Android density buckets!
The business value of UX/UI designs
The art of simplicity in UX design
The effective utilization of white space in UI design
Want to say hi? Drop us a line on hello@pineapple.design
Check out our work!
