In August, I attended the Abstractions Conference held in Pittsburgh, and particularly enjoyed hearing Karen Tang’s talk titled: "Designing the Details: How Micro-Interactions Can Elevate Your UX." While Tang mainly focused on microinteractions which happen in a complicated web application, her talk inspired me to think about how W|W, a branding agency, can and already does use microinteractions in a web setting to increase brand awareness for our clients.

Microinteractions are user-facilitated actions that lead to some kind of feedback -- for example, a user clicks a button, and some feedback is given. Dan Saffer, the author of Microinteractions: Designing with Details, wrote that this feedback, however, "is the place to express the personality of the product. Indeed, feedback could be said, along with the overall form, to completely define the product’s personality" (See page 18). 

An example of a microinteraction could simply be using language that aligns with your company or organization, in places like alerts or 404 pages. Another example of a microinteraction is how, if you are using Google Maps and the walking distance between places is more than 5 hours, the walking figure gets a hiking stick and a backpack.  Microinteractions, simply, are the small moments where user experiences are carefully designed to fit with the larger picture of your product.

Microinteractions, simply, are the small moments where user experiences  are carefully designed to fit with the larger picture of your product.

There are two websites in particular where I think W|W effectively leverages microinteractions to enforce the values and themes central to a brand.  The first example is an animation on the website we did for Nova Place, a major urban redevelopment project which houses office spaces, restaurants, modern common spaces, residential spaces, and a co-working space. The microinteraction on the Nova Place website is facilitated by a user scrolling down through the homepage, and precipitating an animation of the Nova Place logo breaking apart upon scrolling.

While the microinteraction of the Nova Place logo breaking apart only lasts a moment as you scroll down the page, the user gets to experience the logo anew through an interesting, and fun animation. The idea of deconstructing the Nova Place logo was central to the design of their branding, and this microinteraction subtly reinforces the "look and feel" of Nova Place.

The website for DLA+, an architecture and interior design firm, is another great example of how W|W has utilized microinteractions. The plus sign was an integral and distinctive feature of their logo, and is employed across the website in the design.  One of the places where the plus sign is used in a microinteraction is on DLA+’s portfolio pages. On a portfolio page, a user can click a button with a plus sign on it to see more about the staff who worked on a project, and the plus sign animates, rotating, to reveal more.

This short microinteraction makes use of the plus sign to create an animation which enforces recognition of DLA+’s logo, and the idea of DLA+ being associated with “+,” which has positive connotations.

At the end of her talk on microinteractions, Karen Tang eloquently noted:

Microinteractions are the signature moments which increase adoption and loyalty; the difference between a product you use, and a product you love, is in the microinteractions.



Using a clever and well-designed animation in a microinteraction is a significant way you can increase recognition of your brand, and its themes and ideas on the web. In contrast to a more static design, a microinteraction animation creates a personal moment that allows a user to dynamically experience your brand. These small moments, while transient, leave the user with an impression of that indescribable “look and feel” of a company, which is central to brand awareness, and loyalty.

Resources:

• Tang, Karen. “Designing the Details: How Micro-Interactions Can Elevate Your UX." Abstractions Conference, 18 August 2016, David L. Lawrence Convention Center, Pittsburgh, PA.

• Microinteractions by Dan Saffer (2013) 

• The Preface to Microinteractions by Don Norman