Subtle Beauty of Microanimations in Web Design
In our last couple posts about upcoming design trends, we’ve talked about microinteractions. But what exactly are they?
The technical definition of a microinteraction is a “contained product moment that revolves around a single-use.” In layman’s terms, it’s a small indication of sorts that something has either happened or has been triggered. They give the user a sense that something has been accomplished, almost as if they are “feeling” it happen.
Great examples include the heart that appears when you double-tap (or “like”) an image on Instagram, or the bar that slowly crawls from 0 – 100% when you’re updating your device. Does your oven beep at you once it’s done preheating? That’s a microinteraction, too!
Microinteractions aren’t limited to big names in social media and appliance manufacturers. Thanks to design tools like Divi, it’s easier than ever for a designer to knock out a design early on so they have plenty of time to dedicate to elements such as these that enhance the user experience of your website.
Microinteraction Example: Buttons and Links
Buttons and links are great places to start with microinteractions. In fact, if your site was built in the last handful of years, there’s a good chance microinteractions are already in place.
Which of these stood out to you? And how many times did you roll over the fourth button before realizing that it was not going to interact with your movement at all?
Remember: Less is More
Although each of these interactions is neat in its own way, it’s typically not good practice to cram every effect possible into one button, or even one site. Too much interaction will seem just as, if not more broken, than nothing at all.
Microinteraction Example: Page Scroll Interaction
Another great way to incorporate microinteractions on your website is to include some subtle movement as you scroll down the page. This can be achieved using a parallax image or having text or images animate as you scroll down the page.
This method is also known as a “lazy load,” because it allows the site to prioritize what appears first when a user hits the page. This shortens page load time as well as draws the user’s eye to that item in particular as they scroll. A win-win!
Remember: Subtle Animation
Did you notice the image to the right coming in as you were scrolling down? If not, try hitting your browser’s refresh button to watch the magic happen. (You shouldn’t need to scroll back to the top) Notice how it comes in slowly, yet it doesn’t have far to go before landing on the page.
Microinteractions need to be sprinkled in subtly in order to be effective (hence the“micro”). Movements that go too fast or too far are likely to be more distracting, which takes away from the user experience.
Other Microinteraction Examples
Contact forms or areas that users are supposed to interact with are wonderful spots to sneak in some microinteractions. Make sure there’s a message that appears when the user fills out the form (or makes a mistake) and also make sure that message is clear and easy to read. It may also be nice to include some personalization in the message that pops up here, too.
Another favorite microinteractions I use every day is built into any Divi menu. If you are on a desktop computer or laptop, try clicking on the little magnifying glass next to the navigation in the top right. Notice how it turns into an X and the menu slides away to make room for a place to type your query. Mobile users, tap the hamburger icon (three lines stacked on top of each other) and watch it transform into a menu!
Practice Makes Perfect (We Would Know)
Despite the name, the task of placing microanimations is anything but tiny. Movement may be involved, but it still takes a designer’s eye to know when and where to use them. Several members of the Roundpeg team have plenty of experience tackling both design and movement, as well as marrying the two.
Whether you’re thinking of freshening up your website, or need to bounce some ideas off an expert, give us a shout! We’d love to discuss how the Roundpeg crew can help you, your business, and your website thrive in 2020!