In the summer of 2016 I taught a course on interaction design with an exceptional group of students who were really hungry to dig deeper into JavaScript and the kinds of interactions that can be created to make user’s experiences with products more delightful. Articles about microinteractions and conference talks on the topic were popping up all over the place, so as a final project, students created a mini portfolio of microinteractions.
Although other topics have since pushed microinteractions out of the spotlight, it remains one of my favorite topics and provides a really interesting lens into the creation of experiences for users.
The examples provided here are by Patsy Diaz, who did a particularly good job putting together a portfolio of microinteractions that we explored in class and she adapted to her own unique style.
Microinteraction #1 Sliding Boxes
This is a fairly common interaction seen around the web, where a hover or a tap reveals more information. Patsy did a great job exploring it and creating a functional example.
Microinteraction #2 Turn Box
The early days of the web and really boring contact forms are over. There are much better ways of achieving that interaction today. Patsy provides a great example.
Microinteraction #3 Shrinking Navigation
A useful technique for keeping navigation present but somewhat out of the way as you scroll down the screen. Check out Patsy’s implementation.
Microinteraction #4 Lazy Loading Images
Waiting for images to load is no fun. This is a modern approach to a problem that has existed since the beginning of the web. Load a low resolution blurry image, and as the full size version comes in, replace it. See it in action!
Microinteraction #5 Roll Over
Roll over interactions have been around for along time, but they have needed some serious updating in the age of touch devices where there is no mouse to roll over, and tapping with your finger is not at all the same interaction. It is fun to figure out all the permutations that need to work when you add just one more input device. Try it out in both a browser and on a mobile device.
Recent Comments