Powerful microinteractions to improve your prototypes

Stages of the design thinking process copy

Prototypes are, by their nature, designed to be less polished than the final product. However, that doesn’t mean you shouldn’t finish the prototype as much as possible. You want to give the user a good idea of what the finished app will be like, which means adding in those little interactions that make all the difference. This gives the best possible look at your product and ensures people know exactly how it will work. But which microinteractions are the most important to focus on? Let’s take a look.

There are infinite microinteractions that you can add to a prototype, but often these end up being just a button with a verbal explanation of what will happen. What if you could just push the button and actually show your user what things will look like?

Mouse over effects

There are a few ways you can use a mouse over effect, including having the moused over button or text highlighted. For years, certain ad companies allowed small popups when you moused over an ad link.

1 4

You may also create microinteractions for mousing over by adding small lines, a zoom in of an image, or a mini animation that makes a button appear to pop up. Another option is to have the mouse change when it moves over something. In games, this may mean a search icon or a hand appears over an object you can interact with.

Tap effects

Think about Instagram, when you double tap an image you like, it adds a heart to the post. This is a very small interaction, but adding it to the prototype app means it will look more professional. There are infinite ways to create tap effects, but anything that allows someone to react to information on the screen can be considered as such. This includes hearts, likes, and similar reactions.

2 4

Another way the tap effect can play out is having a tap highlight something on a screen. This is usually seen in forms that need to be filled out, allowing you to tap on the field you want and seeing it light up. This simple confirmation that the field is ready for input is helpful in molding the user experience.

Tap and hold effects

3 4

Another option is tapping and holding an element on the screen. This is seen on apps or sites like Facebook, where you can choose a different reaction by holding the like button. If you add this to your app, consider giving the user more of a reward with a little animation or a ripple effect when they perform the action.

Tactile feedback

Have you ever had a phone vibrate when you performed an action? This is considered tactile feedback and can be quite useful in some situations. Some apps use this as a method of warning the user that what they are attempting is not possible. It can be used to mark between two time periods, as well, like a timer.

4 4

The vibration is useful if your app is meant to be used when the user may not actually be listening. Having tactile feedback allows for faster notifications.

Scroll to view

5 4

When it comes to microinteractions, you’ll find that scroll to view makes the user experience more exciting, even if they are just looking at basic information. This is often done so that as you scroll, more information pops up or new elements appear, with a small animation.

Slide in or out

6 2

Moving your mouse over something can be annoying when a further menu abruptly pops up. A very minor change to this interaction can create a smoother user experience. For example, you just need to have the menu slide out instead of popping up. It can also slide back out of view when you’re done.

This interaction may also be used on mobile by making it possible to swipe the screen and either eliminate or save the email, photo, or whatever is on the screen. It’s a relatively easy way to make it all look good.

System feedback

Most people have little patience for waiting to find out if their app is working or if the interaction they just had is actually going through. To this end, you can create system feedback microinteractions. These just let the user know that something is going on.

7 1

Often, you’ll notice that once you’ve submitted a form or clicked on a button, there is a spinning circle, turning hourglass, or another symbol that lets you know the app is working on it. This is reassuring to the user and simple enough to add for the developer. Another option is to have different icons for sending a message, having it arrive on the other person’s device, and even changing for when the message is read. You can see this in Facebook Messenger, WhatsApp, and many other messaging systems.

Microinteractions don’t need to be very complex, but they can certainly change the way people interact with your app. The better your prototype, the more likely it is to be approved.Ready to get started with creating your own high-quality prototypes in less time? Join UXPin today.

Still hungry for the design?

UXPin is a product design platform used by the best designers on the planet. Let your team easily design, collaborate, and present from low-fidelity wireframes to fully-interactive prototypes.

Start your free trial

These e-Books might interest you