On the Vincit website contact form, feedback is used to let the user know if their message has been sent. The feedback is effective to a point, as it does let the user know whether or not their message was sent, but if the rocket fails to launch due to the form being incomplete, it does not let the user know what they did wrong or how to correct it, it simply says try again. If you correct the form and enter a proper email address, the rocket automatically resets, which is useful. The feedback is also applied skillfully in that feedback occurs at the point of user input and animation is used minimally (all animation is inside the Launch button). Vincit also follows Android's UI characteristics for animation in that it is fast, smooth, natural, simple, and purposeful. As for being delightful, Vincit hits the nail on the head. The micro-interaction has a personality that aligns with the Vincit brand and the rest of their website.
The Sonos heart micro-interaction is applied effectively; the user taps on the heart, and, as the heart visually changes, the background fades and a notification appears letting the user know the song was added to their music. The fault in the micro-interaction is that by tapping the heart, most users would think the song would be added to a favorites list, but the notification states “Saved to Your Music.” What does that mean? Is it now on a playlist? If so, what playlist? Where can I find my music? So, while the visual change and notification make it clear that something happened, it leaves the user with some questions. Although the fading in and out of the “Saved to Your Music” notification is minimal and happens very quickly, a frequent user may find that the notification remains open for longer than preferred, and there is no way to turn off the notification message so that the user can “love” and “unlove” songs rapidly. The micro-interaction is appropriate and aligns with the rest of the Sonos app. I think it could be made more delightful by redesigning the “Saved to Your Music” notification. What I found delightful as a designer was the background fading upon notification. It is so minimal that it took me until today, three weeks into writing about the micro-interaction, to notice it. I noticed it and thought to myself “Yaaaassss, now that’s how it’s done; not obvious and contributes to the experience; delightful!” Or, as my former tennis coach would say, “How can you hate it when you love it?”
In the (Not Boring) Weather app, the animation is used to encourage deeper engagement and provide a delightful experience. Its obvious interactions like the clouds rotating when the user taps are what draws the user in, but it’s the micro-interaction easter eggs hidden within (Not Boring) Weather that lead to deeper engagement. The animations that happen at the point of user input, are fast and visually appealing and, although a lot is happening visually, the user is not left overwhelmed or in a state of cognitive overload because (Not Boring) Weather is simply a weather app. Although Dan Saffer advises using animation sparingly because our brains respond powerfully to movement, I think it’s ok to “go big” with UI design and micro-interactions when it's something simple, like weather, a calculator, or timer. The feedback of the clouds rearranging occurs at the point of user input, delightful? Hell yes! You can read more about the multiple ways (Not Boring) Weather is delightful and how Andrew Allen aspires for his app to be the Eames lounger for the software world in the Fast Company article “The designer behind one of the iPad’s biggest apps is calling for an end to minimalism.”
An example of a micro-interaction that switches modes and how the switching of modes could be avoided.
An example of a micro-interaction that switches modes is the Adobe PDF tool of organizing and inserting pages. When you go into the tools and select “organize pages,” the screen view switches from the main view to an editing view, revealing all the pages on one screen. In this view, there are tools to rotate, insert, and delete pages. You can also click and drag to reorder pages. The switching of modes could be avoided by providing the multi-page view and its options in a sidebar or a bar along the top of the main view.