User Experience is an evolving field where there is always something new that would contribute to the improvement and enhancement of the experience. Some trends like Infinite Scrolling, Minimalism, Flat UI, Bold Typography have been revolutionary in UX. But there are some silent contributors and new arrivals for UX which are unnoticed by designers, developers and the users. One such silent contributor for UX are the Sounds, Motion Animations and Microinteractions. I have already mentioned about the microinteractions in my previous article too.
Details are not just details. They make the design!
You can check them here : UX Trends 2015
Sounds and Motion Animations are pretty straightforward terms.
So what are Micro-Interactions?
It is a product use case boiled down to a single moment, focused on a single task. It concentrates on only one task. Unlocking your smartphone is a microinteraction; so is the chiming sound that plays when you boot up Windows or OS X. But microinteractions aren't restricted to computers.
Video of iPhone Lock Screen - Swipe to Unlock highlight
These small, cute interactions go unnoticed most of the time in a product, but they add so much value and emotional value to the product! Though Microinteractions have been a participant of UX for past decades, they have not been conquered Enterprise software or Business applications. But it is high time for us to leverage the awesomeness of Microinteractions and Motion Animations into our Applications.
Some interesting examples of Microinteractions I can think of are,
iPhone Alarm - When you select "Repeat" option for Monday to Friday, it automatically shows "Weekdays". How many iPhone users have noticed this?
Password Hack Alert - A Website which features the time that will be taken to crack your password instead of showing how Strong/Weak it is.
Reading List - When you scroll through the article, a progress bar fills in the left pane!
Chrome Browser for Mobile - When you open too many browser tabs in Chrome, the number changes to Smiley!
Amazon Website - When you complete a transaction, Amazon thanks you in the browser tab title.
Twitter - It asks you to grab a Coffee or check out a random article on Wikipedia while they collect the data on your tweets.
I haven't noticed any of these Microinteractions! How will they add value to my experience?
Designer Dan Saffer says,
When microinteractions succeed, even invisibly, which is how most of them do - they make an emotional difference that’s greater than the sum of their tiny parts.
The Waze navigation app : When you leave from work, get into your car, and launch Waze, it asks you, 'Are you going home?'. The software observes your routine way of doing things and makes smart suggestions. Even if they are invisible to your attention, they definitely contribute to the overall experience of using a software.
In the Wordpress when the user types an invalid username/password, the login box shakes like a head shake showing a message that your username/password is invalid. This is a very small interaction but causes a much bigger impact on the user engagement. Showing a long red colored text stating that your username or password is invalid, causes a negativity in user engagement.
Sounds play a very vital role in user engagement, especially in Mobile applications. Selecting a suitable and apt sound for your app is the key to success. You cannot use a long irritating sound for a small action on the App.
Facebook Messenger App - Sending a Like in the chat
Other Examples of sounds are,
- Facebook App Refresh – When you pull down to refresh
- Whatsapp – When you click on Voice record option
- SkullCandy - When you open their website
- Xapo - Bitcoins
Sound engage and interest users to use your apps more frequently. They must be pleasing, short and very relevant for the particular action performed. Do not choose long, boring and irritating noises for frequently performed actions.
Motion Designers are new positions that are created in creative tech firms recently which shows the importance of Motions and Animations in an application. Applications
One of my favorite animations that I came across recently is the Whatsapp's Voice Messaging feature. When the user slides to cancel the recorded voice note, the Mic icon flies and falls into a dustbin showing that the voice note is deleted.
Websites featuring Motions and Animations,
These websites have web animations that are used wisely and elegantly to engage users and convey their brand identities in the best possible ways.
Yelp Material Design Concept - A tiny animation can be seen while focusing on the search bar
Apple Watch Concept - Animations while opening the menu in a wearable
How can I leverage them in my business applications?
User Experience is a unified term across all disciplines. You cannot differentiate business apps to be professional and can compromise on UX standards. A login screen of your application can have an animation instead of negative red texts. If you intend to use red error text, you can use the words wisely which won't create a negative impact on user engagement.
Or if your business mails are sent to various time zoned persons, you could show a microinteraction as below.
These small atomic designs are going to contribute a larger part in your Application's UX and the Business goals. If microinteractions are delightful, humane, and effective, then their success accretes and trickles up into the broader user experience in general. Designers have to be very cautious and thoughtful in creating microinteractions for an Application as it is going to be the one and only task being performed.
Are Sounds, Animations & Microinteractions enhancing the UX?
Microinteractions are in existence from early 1800's starting from the On/Off switches and Push to Start buttons. Now they have taken a whole new level of existence in the digital era of Touch screens and Smart Devices. They are definitely contributing a very larger part in UX more than we could imagine. UX Designers, Motion Engineers Interaction Designers are have a bigger responsibility in designing these Microinteractions, Sound and Animations for the Applications which are going to decide the success of the entire application.
Great UI is always Invisible and so are the Microinteractions, Sounds and Animations!
Feel free to drop your comments and views on this article!