Explaining the importance of micro-interactions in Experience Design.
* All the work done in this project is a property of Studio Uncommon, Bangalore
Team Size
3
Duration
6 weeks
Role
Designer & Animator
Tools used
- Sketch
- Adobe Photoshop
- Adobe After Effects
Skills
- Wireframing
- Prototyping
- Visual Design
- Motion Design
The details are not the details, they make the design
-Charles Eames
As Interaction design has grown over the years, micro-interactions & motion design have taken the front seat to resolve some of the most challenging problems in Interaction Design.
In a competitive market, it has become increasingly important to craft clear, efficient and functional applications that deliver crisp and well defined data even in the most information heavy screens.
Listed below are a few examples of how we thought micro-interactions contribute to all the interactions around us.
Micro-interactions as an innovative experience
When there is feature parity, it is the experience using the product that increases adoption and brand loyalty. The overall experience of a product relies heavily on its micro interactions. -Dan Saffer, Microinteractions
How does weather affect us? Apart from just knowing how warm or cold it might be outside, it also tells us how good you're going to feel, will it be sunny and happy or grey and dull?
To create an innovative and gripping weather application, we wanted to capture these feelings. We brainstormed about all kinds of ideas from trying to capture the feeling with icons, 3D modeling to using animations, and sliders, cards etc.
We struck upon something unique. That just the color of the sky helped captivate all these feelings. Just color by itself was a reflection of
- Temperature
- Weather
- Time of Day
- Season
Not only that, it also evoked certain emotions in people that could help captivate their attention.
Shown below are select paper prototypes that showed the various interfaces we tried that could help the audience get the most playful experience while checking the weather.
The interfaces played with tabs, motion of the icons along with the entire screen color changing etc.
And by the last prototype we struck what we wanted!
A slider with the entire background showing the color of the sky and simple geometric weather elements.
The slider allowed a playful back and forth motion which made the entire application addictive.
Micro changes for macro impact
Shown on the right is the redesign of a screen from a Indonesian delivery app who approached Studio Uncommon to help them improve their driver side application. One of the screens that needs a complete redesign was the driver response screen.
Apart from the restructuring and paring down of the data presented on the screen, the Panic Buffer timer (marked in red in the prototype below) was one of the most important elements that contributed to the change in response time.
The timer changed into a discrete step timer and given a lot more real estate. The motion added to it was made non linear which made the few seconds in between seem faster and added a little more time towards the last panic moments.
We also added a change in color from green (ok) to red (panic) which could catch the drivers attention even through peripheral vision leading to fast and stress free response.
This simple change helped improve the driver response time significantly. A good example to realise how small elements make and break the product.
Micro interactions for enjoyable feedback
Feedback is one of the most important principles of User Experience. In spite of developing the best of applications, we cannot account for user-side factors like phone storage, application speed, internet speed that can affect the experience. Feedback is a way of talking to your user.
Shown below is what we learnt about optimal response times.
We chose to design a to-do list app, but striped down it's content to a bare minimum with the use of just white screen and text. We focussed on feedback for 3 main actions i.e
Completing Tasks
We created color tags that not only acted as differentiators for the tasks but also acted as a progress bar when the action was completed.
Deleting Tasks
The act of deletion is a BIG STEP and hence the reaction must be equally prominent to strengthen the feedback. Here the card lifts up and collapses on itself. The action is timed slightly longer than the other animations to give it more importance.
Reordering tasks
The app is coded in such a way that the card always gets “picked up” at a random angle. Talk about making the app feel natural!
Microinteractions for creating Active interactions
Habituation & Active reminders
Taking a lesson from Internet Explorer and Chromes active and passive warning for security, we learnt an important lesson, an notification/ reminder or warning over times leads to habituation. People get used to seeing it so often that they almost become invisible.
Internet Explorer passive phishing warning is almost 45% less effective in stopping people from clicking on suspicious looking websites.
Study conducted by Jason Hong.
Internet Explorer passive phishing warning
Internet Explorer active phishing warning
For cases such as a medicine app, it is especially important to make sure the user never misses a dose. And how did we achieve this?
By creating Active reminders. The application requires the user to consciously drag the pill from the box to the green CTA which means taken. Doing this over and over again helps in building habits.
Micro interactions for reducing complexity
Micro interactions challenge designers to see how lightweight they can design, to reduce complexity and streamline features that could otherwise be burdensome -Micro interactions, Dan Saffer
A simple application is not the one that has less features, it the one that takes a lot of them and packs them in a way that is easy to use. A typical fitness app requires you to do at least three screen transitions for a full routine, to exercise specifics to the timer screens. We wanted to pack them into a single screen.
Slide out timer
With a simple swipe gesture, the fitness timer activates a handy onscreen timer. Since the swipe gesture is typically associated with an archive or delete function we made the timer like a slide out drawer that sits a level above the exercise card.
The timer saves you valuable real estate (eliminating the need for the card to expand or the need for an entirely new screen) thereby keeping the view of your entire exercise chart in place.