MILESTONe 5
Microinteractions
Problem Statement
To incorporate microinteractions into the high fidelity prototype we built in Milestone 4.
Our team considered the following prompts while creating WUJO's microinteractions:
Where on each screen do we want to draw users' attention?
Where is there a call to action on each screen?
When should we provide positive or negative feedback to a user action?
Where can we incorporate microinteractions to prevent user error or rework?
When do users need to provide input?
Before defining microinteractions, it may be most helpful to imagine what a webpage without microinteractions would look like. Imagine you sign are subscribing to your aunt's travel blog for the first time. You input your email and click "Sign Up". You assume you might then be taken to a page confirming your subscription. However, the page doesn't move forward, but the inputs you provided are still there. Without a microinteraction, there is no clear indication of what happened- you misspelled your email!
What are Microinteractions?
The Nielsen Norman Group (NNG) defines and depicts microinteractions as the following:
Source: Nielsen Norman Group.
Why are Microinteractions Important in Hi-Fi?
Because microinteractions provide integral feedback to users, incorporating them into a hi-fi prototype can bring a sense of clarity and completion to UI-human interactions. We have grown so accustomed to the nuances of microinteractions that they often occur subconciously, if not imperceptibly.
Additionally, NNG explains that microinteractions can also push branding efforts. For instance, the animations behind a microinteractions may have a bouncy feel, or a sleek feel. In any case, these small details can make a user's experience with an interface feel more personal or unique.
Creating Microinteractions
We identified and implemented several microinteractions, which give WUJO greater usability, interoperability, and personability. Some of our microinteractions are highlighted below, though they can be viewed to their full extent in our Figma prototype.
Splash Screen Animation
When a user first opens the app, the splash screen animation is eye-catching and instills WUJO's branding.
Pop-up Screens & Dropdown List
One interaction we built can be seen when creating an account: pop-up screens. Rather than simply switching to a fully new screen, a pop-up screen can signify steps that are part of a larger process. Dropdown lists function similarly. We built a dropdown list to allow users to select a collection, which can be seen on our Figma prototype on the Collections page.
Input Fields
We added microinteractions that simulate how a user could fill in several fields when they are signing up for an account. The highlighting feature around a field makes it clear which field a user is currently editing, and the keyboard popping up underscores this editing mode.
Screen Navigation
At the bottom of each screen is the navigation bar. Adding a microinteraction here by highlighting an icon gives the user feedback about where they are in the information architecture of our app.
Linking Button
We added a Like button, which in this case allows users to add a product to a Collection (similar to a Pinterest board) and view it later. This microinteraction greatly enhances the personalized feel of the WUJO app.
Photo Carousels
On the product page, we added a photo carousel that shows different views and dimensions of each product. This feature contributes to business outcomes, as offering more information and photos for a product may increase the likelihood of a consumer to purchase the product.
Add to Cart
Finally, we added a microinteraction that shows the user when they have added an item to their cart. The "Add to Cart" text changes to "Go to Cart", and the shopping cart icon shows the number 1, reflecting that 1 item was added.
Updated Hi-Fi Prototype
Our updated hi-fi prototype with microinteractions can be best viewed in the Figma links below.
Key Takeaways
Microinteractions are incredibly time-consuming when done right. It takes a lot of technical know-how in Figma or any other prototyping system to create a microinteraction from scratch.Similar to stop motion animation. there are many small, static steps that need to occur in succession to appear to move in synchronicity.
Microinteractions help communicate system status, prevent user error/rework, and can communicate branding.
It can help you save time to brainstorm a list of microinteractions that may be similar or the same across pages before getting started. Certain interactions we built, such as the liking icon (the heart) could be reused on several pages- the product page and the artist page, for instance- so it was important to meet as a group and ensure we weren't duplicating work.
References