Tiny dynamic details that improve UX

Microinteractions

Microinteractions are events with a single purpose and can be anything from an animation to a sound effect. They enhance the feeling of achieving digital manipulation through communicating status, providing the user with a sense of satisfaction. Common examples include loading statuses, tutorial tooltips, and even the tiny animations that pop up when you open a menu on a website.

Read more:

Though these microinteractions are all described in the context of website/app design (and are all visual), they can be extended to target other human senses such as the tactile and aural. Different apps on your phone might have a signature vibration pattern that let you know which app just sent a notification. In Red Embrace, selecting choices that give +aggressive or +charming can give a feeling of satisfaction (I’m going for aggressive options and have indeed been rewarded with choosing a +aggressive option!) or surprise (I chose A and wow it’s a +aggressive choice!) or some other emotion, when the little notification pops up in the corner. When reviewing flashcards, getting an answer correct might play a congratulatory success sound while getting it incorrect might play a sad/disappointed/try again type of sound effect, where the former typically is higher or rises in pitch and the latter is lower or starts on a higher note and descends.

All of these small design choices (animations, sound effects, popups, etc.) aim to engage the user and provoke emotional responses, resulting in more memorable experiences. Because these tiny details can be so powerful, it’s also very easy to go overboard with them. Dashboards filled with animated diagrams aggregating data are cool to see but overwhelming if one tries to make sense of it all, especially if everything is moving or sensitive to the hover of the mouse. Tooltips that force themselves upon the user with cute bouncing avatars have the best interests of the user at heart but are too aggressive and actually result in a negative experience.

The reason for babbling about these tiny details is because adding sound effects, a small loading animation to show the user that the machine is thinking, or changing the font to something appropriate, which subtly primes the user for the environment, are potent techniques to remember that can suddenly make a product gain +10 points in polish and professionalism.

Also, some of these activities may have been implemented today.

Questions or Comments?

Q: I recently bought Red Embrace: Hollywood on Steam (not on itch.io), so is there any nsfw content I’m missing? If so, is there any way to get it without buying the game again on itch.io? (Same question goes for Chess of Blades which I bought a while ago)

A: RE:H on Steam is the full version and the same as the one on itch.io. Chess of Blades (Steam) is censored and requires the free R-18 patch available on itch.io.

Feel free to send in any AG-related questions! Our Ask Box is always open.