When designing a product, the overall experience and interface is very important BUT it’s the little moments that really pull things together. For example, when using Instagram recently I noticed that that when you send a post as a DM (Direct Message) there’s a fun little animation, shown below.
I decided to try my hand at creating a micro-interaction for a bottom navigation bar as I don’t really see many applications using much animation there. My aim was to make each tap feel fun, bouncy, and playful. This attention to detail is something that I feel makes the difference between the best experiences and just ordinary ones. Feedback from the user clicking on these interactive elements helps foster an emotional connection and improve navigation.
The idea behind this interaction is that when you hover the mouse over the card it causes it to expand to expand and show more information. By expanding the card when hovered over, the user knows precisely where they are on a page and what they are currently focused on.
My last little animation drew inspiration from Figma's current design language. I chose bright colors highlighted with dark borders for this button and aimed to create a hover state where when over the button it expands and the arrow is bouncing side to side. This aids in telling the user that there is more to see and does so in a playful manner!
