A microinteraction is a key moment in interactivity design that responds to user input with visual feedback. Microinteractions are everywhere, if one lives with an interactive screen (computer, phone, tablet, etc), chances are they see one every day.
Day 1: iPhone Switch/Button
Day 2: Option Slider
Day 3: Page Scroll
For the first three, I'm starting out simple. These are just the first ones that came to mind.
Day 4: Page Slider
Day 5: iPhone Calculator
Day 6: Volume Slider
From what you can tell by this point and onward, I am an iPhone user. The volume slider is definitely the most complex one thus far. I'm coming to the realization that this is much harder than it looks.
Day 7: YouTube Loading
Day 8: iPhone Brightness Slider
Day 9: Twitter Like
The YouTube loading animation I'm very proud of. It was difficult to get it to appear on it own so I had to disconnect from the internet and refresh my YouTube to study the animation. For the others, I just kept interacting with them on my phone to get the understanding of them.
Day 10: Custom Hamburger Toggle
Day 11: Chrome Tabs Interaction
Day 12: iMessage React
At this point I'm starting to struggle with finding microinteractions. I thought it be easier, but it's coming to my attention how often we don't use our screen mindfully. Mindful screen interaction is something I have to get a hang of for this project. Also, for the iMessage react animation I had to screen record and view it in slow motion to get it right.
Day 13: YouTube Pause/Play
Day 14: Custom Upload
Day 15: iPhone Keyboard
I'm not exactly too proud of my upload animation, but with a project like this, you have to stick with it. I do think I did an alright job with what I'm working with however. I believe microinteractions shouldn't be too over the top.
Day 16: Twitter Menu Bar
Day 17: Custom Upload Complete
Day 18: iPhone App Open/Close
The animated checkmark doesn't necessarily have to be for a completed upload, it can be a completed anything. Animating the lines for the checkmark was tough, it's painful to think that what took me over an hour will only be seen for a couple seconds. I also can't believe it took me this long to recognize the apps closing and opening on the iPhone, since it's something I use every day.
Day 19: Twitch Icon Hover
Day 20: Nintendo Switch Settings Button
Day 21: Nintendo Switch Album Button
I'm struggling a little bit to find more micointeractions from what I use, so I decided to mix things up a bit and look at a video game console. The Nintendo Switch is full of microinteractions, though I don't want to oversaturate my project with them.
Day 22: Tinder Swipe
Day 23: Notification Bell
Day 24: Custom Paragraph Button
Sometimes the most obvious ones are the hardest to remember, I finally thought of the Tinder (or every dating app at this point) card swipe. I'm also a fan of my paragraph button, it's simple but effective. The notification bell required a lot of focus and attention to detail.
Day 25: Tumblr App Menu
Day 26: Windows 10 Volume Hover
Day 27: iPhone Screen Orientation
At this point I'm grasping for straws. I had to ask my girlfriend for any ideas and she sent me a screen recording of the menu animation from the Tumblr app, since it's an app I don't own. I also think the Windows one is very specific, but interesting choice. I learned a lot about masking here, I had to use a track matte to obtain the outline effect, put a mask on the matte to get the feathering, and then parent it to the blue circle.
Day 28: Scroll To Refresh
Day 29: Discord Loading
Day 30: Custom Night/Day Mode
With this, the project comes to an end. I got to reuse my YouTube loading animation for the scroll to refresh. The Discord loading was very fun to recreate, I had to splice the logo, precomp it, rotate the precomp, and then animate the splices separately.
I had to pay close attention when I was interacting with a screen in order to find a microinteraction, as they are so ingrained into our daily lives, we hardly even pay attention to them. It put perspective on how much of our screen consumption is actually mindful (very little).
But for every microinteraction, every little animation, every element that one can click, there was thought put into it. Someone designed it, animated it, or coded it; maybe even multiple people. It is amazing how much thought is put into making microinteractions, versus how much attention users give them. My goal for this project was to put thought into the designs that users normally don't think about.