Schlürf Episode 2: Micro-interactions can have a macro effect ;)

In today’s experiment we imagined what it would look like if our friends at Schlürf added a micro-interaction to their product listing page.

Micro-interactions are often overlooked and considered details, but in reality, they help to elevate and add a human touch to our designs. When implemented correctly they are engaging and give us very much appreciated feedback by answering questions such as “Am I using the interface the way I’m supposed to?” or “Has my action (press, tap, swipe…) been properly recorded?”.

What we came up with is a smooth transition where product cards are just a tap away from unfolding into product pages. The main rule here being consistency by displaying the product card information the very same way on the product page.

Another common issue we wanted to address is the ‘Add to Cart’ button positioning on Mobile. More often than not, the limited viewport on Mobile makes the ‘Add to Cart’ button invisible after only a scroll or two, while it’s one of the few “money-making” call-to-actions and therefore should have the visibility it deserves.

This is why we also added a prominent sticky ‘Add to Cart’ button at the bottom of the viewport. People can scroll and read the products specifications as much as they need to while the “trigger” (the CTA) is visible and accessible, which wasn’t the case before.

Are you using micro-interactions in your design? Let us know which ones!

If you missed episode 1 you can check it out here: Have you ever wondered what could be other people’s navigation habits? 🙂

Brought to you by:

• Lauri – UX/UI Design
• Franz – UI Animation
• Gauthier – Copy
• Team UXD – Brainstorming