Simple Micro-Interaction

FRAMER JS | SKETCH

If you are wondering, "but, what are micro-interactions?" just go here (and come back!), which is where I went when I was wondering the same thing.

 

During the four days I spent on this little funsies project, I took a look at some existing micro-interactions, and I tried designing one myself! (lazy readers, just keep scrollin' and you'll see it)

 

I started by picking something I would enjoy myself, so, I thought about a day (a weird day) in which I had to make a bank transaction while on the phone with my mom who was back in Costa Rica, at the bank, and asking me for a dozen different numbers and pieces of data at a time. Long story short, that day I became the master of copy and paste but I also became a raging monster in the McDonald's table I was sitting at (stealing Internet yesss) because WHY IS THERE NO CLIPBOARD ON MY PHONE!!!???

 

So I decided to make myself a clipboard, well, at least a prototype of one.

 

DISCLAIMER: This is a very simple, fast prototype that also served as a way for me to practice using FramerJS and Sketch (for the first time); so, I was, and still am, a noob. Some of you might be able to do this in an hour, but for me, every little success was a rejoice!

Day 1

I started off with the basics, a skeleton and the three UI elements to accomplish the "clipboard" objective; a cut and a copy button and add a new clipboard function.

 

For the latter, I tried to quickly make an icon that would say, "there are several elements here".

 

Joy of the day: make a button you can press!

 

Day 2

What happens when you open the clipboard? How to navigate it?

 

I chose to represent the stored elements in different "bubbles" where the user could view what was stored before deciding to copy something.

 

Joy of the day: Making the red panda's trajectory to the text box work!

 

Mistakes: Associating the items to the wrong icon (copy button).

Red Panda ends up on the wrong side of the text box, for those of us who write from left to right :p

Day 3

I decided to simplify the way the clipboard elements were presented, because having the bubbles represented one extra, unnecessary step to get to the actual content.

 

Furthermore, I realized that swiping was a faster, more intuitive way of navigating through units of content.

 

Joy of the day: Making the long-press function work!

 

 

Day 4: Here's how it works :)

Hold press on paste and the elements stored in the clipboard will appear, you can swipe through them until you find the desired one and then click it to paste. Easy peasy!

 

Joy of the day: I managed to darken the rest of the app when the clipboard was active to direct the attention to it.

Also, pick an item from the clipboard while being on one app and drag it to another app to be pasted in.

 

*This feature would've made my life so much easier on that "monster at McDonald's day"

As you can see, this prototype is very simple but it was a fun, easy way to explore the tools; and sometimes, its all you need to get an answer during the design process or get people to try something out.

Choosing a simple micro-interaction was a good idea because then I could focus more on learning how to make the prototype work rather than putting energy on figuring out complex wireframes or interactions.

The Walking Dino

Experience Prototyping

 ARDUINO | JOYSTICK | SERVOS | DINOSAUR SKIN | CABLES | SPONGES | ETC

My attempt at designing a hand blender for kids

old project | industrial design | 3d

© All rights reserved. Melissa Hellmund.

2018.

Contact: