Learn the fundamentals for creating rich micro-interactions.
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)
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.
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
iPhone 7 to get started. This interaction is going to be a modal response to tapping the "ADD $10" button.
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.
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)
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)
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)
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.
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.
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
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.
Here you'll find the interface you'll be working with the most.
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
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.
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!
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.
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.