Path 2

Microinteractions can make a big difference

by Manuel Gonzalez

February 12, 2020

For me, the little things are what make H-E-B a big part of my life.

Growing up in the Rio Grande Valley, I have many H-E-B memories, from shopping with my mom to buying my first date flowers to spending my first paycheck on groceries. The smiling, welcoming Partners, the potential of those yellow coupons, and the pageantry of all the samples combined into a special kind of magic. 

As a product designer, my challenge is to infuse that magic into the digital world. Customers should experience that same in-store elation when they use Curbside or Delivery. The next generation of shoppers might never step foot in an H-E-B store. It's up to us to make sure their digital experience matches our amazing in-store experience. 

To capture that big picture feeling, we're focusing on the little ones: microinteractions that mimic those micro-magic moments you get in store.

A microinteraction is a single interplay between a human and the digital medium—an animated acknowledgment of a user's action. In product design, we use microinteractions to express meaning, build continuity, and create unexpected moments of delight. 

Meet their expectations

When something doesn't work the way we expect it to, that confusion creates a moment of friction that can lead to a bad experience. A system of microinteractions creates a mental map users can smoothly navigate, sparing them the mental load of figuring out how an interface works. They can focus on—and maybe enjoy—the task at hand.

We layer microinteractions into the My H-E-B app to give our users' actions context, which builds a relationship between them and the product. These manifestations of cause and effect make a product feel responsive and help users feel in control of the experience.

As we layer them in, it's paramount that the interactions are consistent—which means practicing restraint. Motion is fun! It's easy to get carried away with flashy transitions, flamboyant interactions, and lavish sequences. But, not everything needs to be animated. Microinteractions should complement your product's overarching goal, not distract from it. 

By clearly defining and assigning behaviors within the user interface, we can start to build expectations of how those certain UX elements should act. These behaviors create patterns and a system users can understand begins to emerge.

Ok, now exceed their expectations

Microinteractions give us a chance to show our personality. Each one offers a miniature opportunity to exceed our users' expectations and create unexpected moments of delight. 

It's not about shouting "personality!" with flowery language or showy H-E-B graphics. It's about mirroring what makes the experience of that moment matter. All these little good feelings add up to the big feeling of H-E-B.

Tiny delights, big implementation

"Micro" doesn't mean these interactions are any small feat. Motion and animation in digital products are still in their infancy, so a complete set of resources and standards isn't readily available. 

Traditionally, it was trial and error—a designer would define a microinteraction by rendering a video mockup and hope that the engineer could replicate it to their exact specifications. The result was often a microinteraction that functioned but didn't necessarily match the original vision.

Until recently, when it came to implementing motion or animation, you only had a couple of choices and they all came at a price. An engineer would have to manually code the motion, the designer could provide an animated GIF, or a PNG sequence could play. Dedicating an engineer's time to replicating an animation is costly and inefficient (their time is usually better spent solving bigger problems). Both animated GIFs and PNG sequences are compressed formats with a lot of limitations, and their biggest drawback is file size. A large file can bloat the software and take up unnecessary space on the user's device.

We felt like there had to be a better way.

When we decided to incorporate microinteractions, we knew we couldn’t take a one-size-fits-all approach. Instead, we work closely and collaboratively with our engineers to figure out the best ways to implement each interaction. 

If the microinteraction is a transition between screens or a transformation of a UI component with dynamic data, we distill the action to its most basic properties and articulate each over time. The engineer then translates those properties into usable code. For example, here's a microinteraction and how it's communicated:

Motion Articulation 2

We also use Airbnb's open-source Lottie library to render complex animations created in Adobe After Effects. This provides greater control over how an animation will display on-screen, and frees up the engineer from painstakingly implementing complex animations one line of code at a time. Unlike a GIF or PNG sequence, it uses lossless vector data in a much smaller file size and renders realtime, giving you the most accurate rendition of your animation. Through an After Effects plugin called Bodymovin, we export vector graphic and animation data to a JSON file, a lightweight data-interchange format. The Lottie library then reads and renders that JSON file, bringing the motion designer’s exact vision to life. These complex animations are best used in isolated moments that are meant to be informative or delightful. For example, we used Lottie for the illustrations in our welcome experience:

Even though they are more flexible, Lottie animations come at a price: because it renders in realtime, it can tax the device's processor. The more complex the animation the greater the toll. As you can imagine, subtlety is key.

Stay small and mighty

That need for subtlety speaks to the biggest guideline we use as we create these interactions—focus. Using microinteractions is about driving focus to the tasks users need to do, and that goal informs our decision making. We want to leverage the power of motion to lead the users' eyes to what's important. It's not about distraction or delight for delight’s sake. Our goal is to provide additional help and joy throughout our customers' shopping experience. It's the same goal we all have at H-E-B—no matter where our customers are.

Manuel Gonzalez is a Senior Product Designer. You can connect with him on Linkedin.

Want to use the little things to make a big impact?