"Like" Button Micro-Interaction
Challenge
Create a "Like" button similiar to something on Instagram, Spotify, etc. The goal was to have it "wiggle" on Hover and fill-in on click, with some minor extra challenges!
This design was relatively simple in execution, and the learnings were in the process. It was critical to prototype the elements in the proper sequence and really think through how the interactions would play out.
Go ahead, hover then click me!
Steps:
1. Create Heart Designs
There were three categories to this: Hover inactive outline, Clicked Filled, and Hover filled.
In the "Wiggle" State, a total of six hearts were used. The initial and last heart have no rotation, while the other two rotate between -8 and +8 degrees to create the effect when hovered on.
The Clicked state features an initial heart of a larger size, so upon click, there is an expansion to show a state change.
2. Prototype Interactions
The keys here were to use "Mouse Enter" and "Mouse Leave" instead of a hover effect. This was done to avoid endless "wiggling" of the heart.
Additionally, by creating a loop, it would reset on leave and appear to be forever actionable.
To achieve the wiggle, I used a "On Delay" effect so it would act as if it was instant without any additional user action.
Finally, for the expanded "Clicked" State, a simple smart animate effect was applied. The to achieve the decrease, a longer "On Delay" was used to effectively seem like it took some time.
