Microinteractions: every detail counts (with examples!)
2024-12-04
Do you want to leave a lasting impression? Then you should try microinteractions. At Digi-Clicks agency we’re aware that to create a satisfactory user experience, every detail counts, so what better way to demonstrate it than to incorporate these small details in key moments where the user interacts with your site?
Key points of this article:
✨Microinteractions are small, simple animations triggered by user actions to enhance the user experience.
✨Subtle animations, like Facebook's reaction icons or Instagram's heart animation, draw users' attention to key actions.
✨Microinteractions make experiences more memorable by integrating playful brand elements.
✨Microinteractions work well during loading, file uploads, social sharing, call-to-action buttons, and text selection to enhance user engagement.
*WhatsApp has a new microinteraction that indicates when a user is typing. It is a bubble with 3 dots.
Microinteractions are animations in the design of your site that are activated when people perform an action. These animations are short, simple and require no effort for the user.
But just because they are simple doesn't mean they are not valuable, in fact, there are good reasons to use them:
1. To attract attention
Example: your favorite social networks
Have you noticed that each Facebook reaction has a little animation that shows each emotion? they are subtle but they sure get attention. Just like the big heart that appears on Instagram every time you Like a photo, or the cute heart animation when you click on the Tweet.
*Facebook reactions have a micro-interaction when selecting each of them, showing the expressions of each emotion.
2. Create memorable experiences
Example: RememBear
The site to store your passwords has a simple concept, but by having "Bear" as part of their brand identity, they take advantage of it in their UX Design, as in this microinteraction of the bear that "watches" that you write your master password correctly. How could users forget something so cute?
*The RememBear site uses the bear, which is part of its brand identity, in an animation as if it "follows" what the user types when entering the password. When typed correctly, the bear shows confirmation by nodding.
3. They help confirm the action.
Example: Google
The Google Assistant has a microinteraction that indicates to the user when it is listening to your request, going from the 4 dots to lines that look like sound waves. This helps to reaffirm that you have activated the app when you say "Hey Google".
*When the Google voice assistant is activated, the logo turns into 4 small dots that then turn into sound waves.
4. To Add Personality and Delight
Example: Duolingo
Duolingo, the popular language learning app, uses microinteractions to create a fun and engaging experience. When users complete a lesson, they are greeted with a burst of animation, such as stars or confetti, celebrating their achievement. This small but impactful microinteraction adds an element of fun to the learning process, encouraging users to continue progressing.
*The Duolingo app uses microinteractions to celebrate users' achievements.
5. To Guide and Direct Users
Example: WhatsApp and Slack's Typing Indicators
These apps use a simple yet effective microinteraction to show when someone is typing in a conversation. A small "..." appears next to the person’s name in the chat, indicating that they are actively typing a response. This is a subtle but valuable way to manage expectations and prevent users from interrupting with a message that might be redundant. It also fosters real-time interaction, making conversations feel more immediate.
*Slack alerts users when the other person is writing a message with a microinteraction.
Example: Apple’s Progress Bars
Apple’s macOS uses a simple microinteraction in progress bars. As the task progresses, the bar fills up, accompanied by a slight animation to indicate activity. It’s a clear visual guide to let users know that their task is in motion, removing any doubt or impatience that might arise when waiting for something to complete. This simple feedback increases perceived performance, even if the process is taking time.
*When Apple devices update, they show the status with a progress bar.
6. To Provide Error Feedback and Prevention
Example: Airbnb
Airbnb, the popular vacation rental platform, uses microinteractions to help users prevent booking errors. When a user inputs invalid information, the platform uses color changes and visual cues (like a shake or highlight) to indicate where the mistake was made. This guides users to correct the error quickly, making the booking process smoother and less prone to mistakes.
7. To Increase Engagement Through Gamification
Example: Fitbit
Fitbit, the fitness tracker brand, uses microinteractions to gamify the user experience and motivate users to hit their fitness goals. For example, when users reach their daily step goal, the app displays a celebratory animation—confetti or fireworks—along with a congratulatory message. This type of rewarding microinteraction reinforces positive behavior and makes users feel accomplished.
*The Fitbit app uses microinteractions to celebrate user achievements.
Conclusion
These are just a few of our favorite concepts, but you can incorporate microinteractions into pretty much anything. Just be careful not to overwhelm your users with too many flashy animations or other distracting elements; this could cause them to get confused or lose their intention to act.
You can try it at these perfect moments to enhance your user experience:
- On loading pages.
- When uploading a document.
- When trying to share an article on social networks (like this one!).
- In call to action buttons
- When selecting a text
From social media reactions to language-learning rewards and onboarding guides, these subtle animations not only make your product more enjoyable but also help it stand out in a crowded digital landscape. When done right, microinteractions don’t just support your design—they enhance it, making your site or app feel more responsive, intuitive, and enjoyable to use.
If you are a business owner looking to engage your customers, use microinteractions to showcase your brand personality and provide a great user experience!
Be part of
Sign up to our newsletter to stay up to date with the latest marketing and design news.
Our
Recommendations
November: news from Twitter, Instagram, YouTube, Amazon and Taylor Swift (Yes, Taylor)
2022-12-02
This was the month of big changes in social media platforms. With the arrival of "Elon Musk's Twitter", a new opportunity opened up to create a similar site but dedicated exclusively to connecting Swiftties, i.e. Taylor Swift fans; and with new features on YouTube and Instagram, brands must adapt to stay relevant.
"Elon Musk's Twitter": a new era
At the beginning of November we were told about the billionaire's purchase of Twitter, and now, at the end of the month, not very favorable changes have been announced for the platform, its users and brands.
Among the most relevant news we have:
- The massive layoffs of employees and resignations of entire teams as they disagreed with Musk's policy to work "high intensity" shifts, which led to a temporary closure of the offices.
- The implementation of "Twitter Blue", to verify official accounts for a price of $8, resulted in huge losses for global brands such as Nintendo, as users decided to clone their accounts and pay to make them official, boycotting them on the platform.
- Omnicom, the big advertising platform, recommended its clients stop the ads of this new “Elon Musk Twitter” because his changes mean a high risk for the brand's reputation. Musk, called himself a "free speech absolutist" and this may affect the social media network's content moderation.
*Actual tweet from Musk, where it is assumed he is referencing the rumored Twitter crash.
Shopping on YouTube "Shorts"
In the YouTube short videos section, it will be possible for users to make purchases of products by 2023. Thus, a 45% commission will be paid to a select group of video creators based in the United States who sell products and in countries such as India, Brazil, Canada, USA and Australia, the feature is already being tested so that users can make purchases.
New Instagram features
Have you always wanted to be able to schedule your posts on Instagram? Now it's possible. Although this is a feature that already exists on several social media platforms and other sites such as Hootsuite, Mosseri, the head of Instagram, has announced that it is now available to do so directly from the platform, allowing Instagram Business Accounts to schedule content up to 75 days in advance.
There is also the arrival of the tool to add music to posts of just 1 photo, something that was only possible in Reels and Stories. While it is not available to all users, the feature will be below the options to tag people and add locations.
*Mosseri, head of Instagram, announced the platform's new tools.
SwiftSpace: the social network for Swifties
It's no secret the power of Taylor Swift. With her new album, she reached the top 10 on the Billboard chart, something that almost no other artist has been able to achieve; and now she is hitting the social media platforms with SwiftSpace, where fans can meet, chat and even arrange a date at the artist's next concert.
This app has already reached the #25 spot in the Social Media category of the App Store and is #13 in Spain.
This shows us that it has responded to a clear need of its followers that was probably discovered thanks to
a UX research.
Amazon Clinic: Amazon's online healthcare consulting services
The eCommerce brand's new bet is to offer medical consultations for minor ailments such as acne, conjunctivitis, migraines and hair loss. This is not Amazon's first approach to the medical category, as it also has Amazon Pharmacy, a company dedicated to the sale of medicines.
Want to learn more about how these developments can affect or improve your brand? Contact us and we will be happy to answer your questions.
Create Personas and Consumer Journeys to improve your business
2022-12-02
All the answers you need to design the perfect product or service are in the Personas and their consumer journey. Read on to find out how you can get inside the minds of your users to deliver a great experience.
Once you understand that by putting yourself in people's shoes you can understand what they are really looking for, you open up a world of opportunities to develop better strategies to reach them and make them feel satisfied with the products you offer them.
The first step: you need to create a Buyer Persona
A buyer persona, or simply Persona, is a profile you create of your ideal user based on the data you have gathered.
What should this Persona have?
1. A name and a face. Although it is a fictitious character created from customer information, giving it a name and a photo allows your team and your potential partners to recognize it more easily.
2. Their needs and goals. Analyze what they want to achieve in the short, long, or medium term and what they need to do it.
3. Their inspiration. We all have motivations to reach a goal. Here you must understand what they are passionate about and the barriers or feelings that prevent them from getting there.
4. Demographic information. This is the most analytical data about your Persona: age, where they live, their purchasing power and even how comfortable they are using digital tools.
5. Their lifestyle. What is a normal day in the life of your consumer like? what is their job? what are their hobbies? are they married, or single, do they have kids? do they like sports or music?
6. Their purchases. Analyze how often they make purchases, from which channel (in stores or online) and if possible, the amount of money they spend on them.
With a defined Buyer Persona, you can now develop a Consumer Journey
You already know what your ideal customer is like, now you need to know each step they take when deciding to buy a product. This is what is represented in the consumer journey.
What are the stages of the consumer journey?
1. Awareness. This stage is when a person "activates" a need, but does not know how to act to satisfy it. Like when you are hungry, but you don't yet know what you want to eat. It is useful for your brand to recognize what your user's need is, when it appears and what stimulates it.
2. Consideration. Your customer already knows what options he has to respond to the need he has because he has seen or heard some suggestions. People are exposed to advertising digitally, in the streets or with people's comments. This is how they learn about the options they have. Your mission is to be present in the channels they consume so that they also consider your brand among the alternatives.
3. Decision. Once the person gathers the necessary information about the options they have and prioritizes the ones that best meet their needs, that is when they decide to take action. If they are a potential customer, they will seek more information about your brand, contact you or attend one of your events.
4. Purchase. After carefully analyzing your brand, the user is convinced that you are the ideal option and decides to make the purchase. This step is vital because it is not only about a sale, but about the whole user experience: ease, speed, customer service, proximity and payment options, among many other factors.
5. Retention. After the purchase, the user defines whether he had a good or bad experience with your product or service.
A satisfied customer is a customer who is likely to buy your products again. That is why you need to follow up with a satisfaction survey to know how he/she interacted with your product and if he/she had any inconvenience after the purchase to react quickly.
Summary: These are the reasons why you should include a Persona and Consumer Journey in your strategy:
- It allows you to reach more potential customers. If you already know where people are looking for you and what needs they have, it will be easy for you to identify actions to reach them.
- Optimize your marketing plan. By knowing what stage the user is in, you can invest in solving their doubts in the channels they are looking for information.
- Improve the user experience. By doing the satisfaction survey or using one of our services people can help you identify what you can improve in the purchase and post-sale process.
December: news about AI, new features of your apps and recent UX-based ideas.
2022-12-02
This year is coming to an end, but tech innovations do not stop. Artificial intelligence was the great protagonist this month and will surely continue to be the talk of 2023, because although it represents great advances for brands, mobile apps and user experience, several people in the industry are protesting because it poses a risk to many positions that currently exist.
Lensa, the mobile app that makes portraits with AI
The app from developer Prisma Lab became a trend among millions of users for its feature to develop portraits based on users' photos for free. It is said to have generated more than 22.2 million downloads and nearly $29 million in charges for its premium features.
So far, it sounds pretty appealing. However, it sparked an outcry from millions of illustrators and game developers who disagree with the "AI-generated images" and claim that you can't call it art by comparing the amount of time and effort they put into each image vs. the immediacy of one generated by the app. Many of them fear that this is the future of the industry and the farewell to their job.
*Examples of portraits made with AI taken from Lensa's official Instagram account, versus the protest image designers have posted on social media and major design platforms.
Amazon works to eliminate barcodes
Jeff Bezos, the founder of Amazon is working on his own with Artificial Intelligence to innovate a more streamlined payment system without barcodes, which could result in faster shipments and happier customers.
This new system analyzes data from product photos, stores product dimensions, features, packaging text and more to create a unique identifier for each product. It is currently being tested and improved at Amazon's logistics centers in Barcelona and Hamburg.
Its ultimate goal is to reduce the handling of products by employees to save time, replacing them with robotic arms that are more accurate and better suited for AI to recognize each package.
Skype now translates video calls in real time
The new technology provided by artificial intelligence goes beyond mobile apps, it can also be used for voice assistants and smart cameras to enhance the user experience. This is what Skype's new TruVoice feature will demonstrate.
TruVoice allows video callers to communicate in the same language in real time and what's even more amazing is that it does it using the same voice of the person who is speaking. How? Thanks to speech recognition and language processing.
It is currently available to translate English, Spanish, French, German and Chinese; for group video calls and for phone calls.
*Conversation via Skype where two men test the new real-time translation feature in Spanish.
Instagram notes and more new features in the mobile app
In the latest update of the social media appeared the "notes", a function similar to Stories lasting only 24 hours, but these are to "share your thoughts" in a format of just text and emojis. They are visible at the top of the direct messages section and only allow a maximum of 60 characters.
To generate more interaction, Instagram is testing a function similar to what the app " BeReal '' does, where users will be asked to take a picture of their front and back camera of their phone. In addition, it will put a "pass it on" sticker so that when uploading a Storie you can nominate one of your friends to take a Storie on the same topic and thus follow a chain.
*The change from Google Data Studio to Looker Studio, reflected in its logo.
It is impossible to stop innovation and more and more brands are betting on artificial intelligence, but do you think this poses a risk to current positions in the advertising and technology industry? Tell us in the comments.