Chapter 30: micro-interactions

Learn the fundamentals for creating rich micro-interactions.


What you will learn

  • Learn how design and simulate micro-interactions through Invision

What is a micro-interaction?

A micro-interaction is any small task or form of communication between your app and the user. This could be actions from prompting settings, pop-ups, too singular call to actions. Users will be consciously or subconsciously drawn to this familiar form of communication. For example, this could be a pop-up when you complete an action in an app such as double tapping a ❤️, to like a photo on Instagram. (Example: Figure 4.6.1)

Figure 4.6.1

4.6.1 - microinteraction_Examples.png

Why are micro-interactions Important?

The subtle but immediate responses given by micro-interactions are arguably the most important component when forming user habits. Not only is your app talking to your user, but its responding. Your app is beginning to form a relationship with your user, and the way you craft this is extremely important.

Designing a micro-interactions

We'll use our Savemate app we just created to simulate a micro-interactions. In the design phase, you probably won't create actual animations just yet, but you can simulate the idea through some third party tools. This gives your team and developers an idea how the interaction should be executed.

First let's insert a new artboard. You can either do it in the Savemate project or create an entirely new one. Go ahead and Insert -> Artboard -> iPhone 7 to get started. This interaction is going to be a modal response to tapping the "ADD $10" button.

Let's now Insert -> Shape -> Rounded Rectangle and make it a perfect square in the middle of our artboard with the dimensions of 250pts x 250pts. Remove the borders and give it the same HEX color as our button from the Savemate homepage. I'm using HEX: #12A792.

Now let's Insert -> Text and write DEPOSIT COMPLETE!. Leave it towards the bottom of the rectangle so we have room for a cool icon. (Figure 4.6.2)

Figure 4.6.2 4.6.2 - micro-interactions_Deposit_Complete.png

Next, find an icon that can make the user feel "accomplished". Remember that this is going to display every time a user does what you (the product creator) wants them to do. This will eventually become validation they will subconsciously crave every time they deposit $10. This may seem small, but goes a long way. (Figure 4.6.3)

Figure 4.6.3 4.6.3 - micro-interactions - Deposit_Complete_2.png

Lets put those elements into it's own group and export them. With your group selected, click Make Exportable on the bottom right. (Figure 4.6.4)

Figure 4.6.4 4.6.4 - micro-interactions_Make_Exportable.png

You'll notice an export pane pop up. For now, go ahead and change the size from 1x to 2x, and we can leave the suffix blank for now (Figure 4.6.5). Now click Export and save it to your computer.

Figure 4.6.5

4.6.5 - Export_Pane.png

Lastly, let's select our home screen artboard and export that as well. Make sure to have the entire artboard selected and export it at 2x. On the right hand side, you'll see a preview of the export. Be sure to check both Background Color and Include in Export. This will make our background white instead of transparent.

Creating the micro-interactions in Invision

Great! Now that we have both our home screen and our popover exported, let's create a simulated interaction using Invision. Invision is an awesome tool for creating interactive mock-ups and sending them to friends, teammates, or clients. It's also a great way to get a feel for a product idea before any code is written.

Head on over to www.invisionapp.com and sign up if you do not have an account. It's free to sign up, and well worth the money if you would like to upgrade to a paid account.

We'll start by adding a new project. Click the + symbol to add a new prototype. We can call this Savemate, and select iPhone. Make sure Portrait is selected and click Create Prototype.

Right off the bat you'll notice we're able to drag and drop our assets into Invision's interface. Find your home screen and popover and drag them into Invision (Figure 4.6.6). Now let's click our home screen to enter edit mode.

Figure 4.6.6 4.6.6 - Invision_Drag_Drop.png

Figure 4.6.7 4.6.7 - micro-interactions_Invision_Interface.png

Here you'll find the interface you'll be working with the most.

  1. These arrows allow you to move back and forth between your uploaded assets.
  2. You can use these to navigate through sections of your entire project.
  3. This contains Preview Mode, Build Mode, Comment Mode, and History Mode. This is what you will be interacting with the most. From here you can create your hot spots, comment on your prototype, and view your history.
  4. This is where you would enter a phone number to send the prototype to. The recipient will be able to play with the prototype as if it were an actual app on their phone!

Let's jump into Build Mode, and click and drag over our button to create a hot spot. You'll notice another box appear. This allows us to choose a destination for the hot spot. Generally this could be another screen or interaction. For now, we'll select Screen as Overlay. We'll keep the Gesture to Tap, and let's select our micro-interactions popup. Keep the Position Centered and Transition Fade In.
Let's increase the BG to around 40% and leave everything else checked off (Figure 4.6.8). Go ahead and hit save! Feel free to play around with all the options in the mean time. Invision does an amazing job at simulating app experiences. You can use swipe gestures, flips, popovers and much more.

Figure 4.6.8

4.6.8 - Invision_Popover_Edit.png

Let's jump back into Preview Mode and click our button. Watch what happens! We've now simulated a micro-interactions that we can send to a developer or teammate without writing a line of code!

Wrapping up

We've merely skimmed the surface of possibilities for Invision. In this section we created a micro-interaction, but with Invision you can simulate entire app experiences before you or your developers dive into code. I'd highly encourage you to explore it in depth on your own time. I've personally used Invision for all of my personal projects as well as client mockups. It's an immensely powerful tool that can increase fluidity with your team and potential users.

Exercise

Use your imagination, and design another screen this app could have. Keep in mind the the target demographic and apps personality as you do this as well. Once your finished, go ahead and drop it into Invision and simulate the actual functionality.