The BUX team has made an effort to incorporate microinteractions into the BUX design system, to give the design an extra level of polish and more engaging user interaction.
Microinteractions, also sometimes called microanimations, are the tiny movements that happen on load, hover or click. They help draw a user’s attention, bridge a visual change to make it less jarring, or create a more delightful experience. For example, when you like a YouTube video now, you may have noticed a new microinteraction when the thumbs-up icon briefly becomes an icon related to the video (like a frying pan for a cooking video) and shifts colors before settling down back into a filled thumbs-up icon. There’s even a little explosion of stars like confetti. These kinds of small animations can really bring a website design to life.
Motion with purpose
After selecting the four foundational movements, we considered how motion serves different purposes when applied to different components. A Fade Transition applied to one component wouldn't necessarily have the same purpose as a Fade Transition applied to another. We determined our reasons for motion were four overall goals:
- Elevate design: To modernize and polish components, such as subtle fade between a button-enabled state and hover state.
- Personify brand: To delight the user and create a familiar and memorable experience, such as the page load animation of the university logo in the OSU Navbar.
- Entice action: To encourage a user to take a specific action, such as the shift of a chevron from left to right, indicating a link is clickable.
- Draw emphasis: To lead a user’s eyes to impactful or important information, such as the float-up of second-level marketing headlines. Every component we added microinteractions to aligned with at least one of these categories — often more than one. Having these guiding principles ensured we didn’t animate elements just for visual appeal. Every motion was intentional and served a purpose.
Breakdown of the foundational movements
We plan for there to be several waves of microinteractions added to the BUX system, but we wanted to start at the ground level. What kind of movements did we want to make standard? Movements simple enough to build upon and give us options, but a small number of them so they still feel like an intentional part of branding. After lots of exploration and discussion, the team landed on Fade Transition, Natural Direction, Bottom to Top, and Drawing Lines. The video below shows each movement represented with a simple scarlet square.
Fade is simply a gradual shift between two states used to soften transitions between colors, sizes and other details that may otherwise feel abrupt. Natural Direction means that if there is an obvious direction an object should be moving, make it follow people’s expectations. A great example is an accordion with an arrow rotating from pointing right to pointing down — users would reasonably expect the box with more information to open downward, and to do any other direction would feel unnatural. But in cases where there is no obvious Natural Direction, we want to default to Bottom to Top. Movement upward is generally more positive than movement down; imagine a line on a chart going up. Finally, we wanted a movement that was a little more organic and offered more unique options, so we created the Drawing Lines animation. This can be applied in a variety of ways, and you’ll get to see all of these foundational motions in action.
Motion as microinteractions
Let’s take a closer look at a few of these microinteractions, and examine how they change the experience of the website for the user.
First, let’s check out a great example of the Drawing Lines motion! We applied this to the top menu hover effect. Previously, the hover state switched instantly between no underline and a dark gray underline, which felt abrupt and lacked visual interest. Now, the line animates smoothly, moving in from the left and exiting the same way, adding a subtle touch of character. This effect has been applied to all menu items that have this same dark underline, like main menu dropdowns, Tabs and Sidebar Menus. See how it adds visual interest to the page and creates a more engaging experience for exploring the website?
After such a fun effect, let’s take a look at our most basic one: Fade Transition. This one is a subtle yet effective way to make changes feel smooth and less abrupt. Our perfect example is a button. When you hover a scarlet button, the background turns dark gray. This is a pretty significant swap in colors and contrast, and while it works just fine with no microinteraction, adding a simple fade makes the overall effect more smooth. Most users won’t consciously notice this kind of effect. But when applied to several items on a page that have a high contrast hover swap, it can give the overall effect of a well-polished design. Effective motion in website design feels natural and seamless, making it almost unnoticeable — unlike abrupt state changes, which can look unfinished.
Next, let’s examine Natural Movement. Just like the Fade Transition, this one is designed to feel so natural that users may not consciously notice it. This video actually has two instances of Natural Movement (as well as a complementary Fade). On the osu.edu website, we employ sticky navigation, meaning when you scroll down the page, a simplified menu appears and stays on the page as you explore. Before microinteractions, it would appear instantly, which felt abrupt. Now, it slides down from the top, aligning with the natural position of the top menu. Imagine scrolling down and having the sticky navigation appear at the bottom and move clear to the top — it would feel disruptive to your reading experience, even though it technically follows the Bottom to Top motion. Using Natural Direction was the better move in this situation, which is why we default to it. Did you also catch that the Menu icon and text slides out from the scarlet search square? This was again to make it feel more natural and seamless.
Finally, let’s see an example of Bottom to Top. For items where there is no clear Natural Direction, we want it to default to rising up. This is frequently also infused with the Fade Transition, because we don’t want items moving up from the very bottom of the screen. Here is a great example of the osu.edu secondary page headlines floating in from the bottom. The motion helps draw emphasis to the headline and, overall, elevates the design of the webpage. While this should not be applied to every headline on a website, when used in small doses it can really spice up a static page.
Bringing it all together
It’s great seeing all the microinteractions for different components individually, but there’s a special kind of magic seeing a whole site perform together. In the video below, we mocked up the osu.edu homepage and added all the microinteractions we planned out. It’s a little different than what’s currently live, as this was an early proof of concept video, but it really showcases an enhanced experience from one user’s perspective as the pointer explores the page.
As new BUX components and features are developed, we intend to integrate microinteractions from the start. Next time you’re browsing your favorite website, take a second to hover and click around to see what microinteractions they use. Whether they’re subtle or spectacular, there’s almost always a small animation coloring each website interaction.