Micro-inactions: Small details On the web that creates a great user experience

Have you ever clicked the button on the web ... Is it quiet? That's a problem!

Have you ever felt like this? You are going to press the button. "Confirmation confirmation" the most important on the website. But once pressed ... everything is "completely quiet". Nothing happened. The screen does not move. No notification message Your heart starts dizzy. "Eh ... have I pressed it yet?" "Will the money be duplicated?" Or when filling out the form. Inadvertently a little wrong Nothing hints which channels that have been missed Realizing again, the information is completely gone! These feelings of frustration, confusion and uncertainty. Is the problem that users actually encounter every day on the website that feels like "dead" or "not lively" and it is an important factor that makes good customers Of you turn back and walk away quietly

‍

Why do most websites "Lordless" and cannot communicate

This problem arises because most web people (Both designers and programmers) tend to focus on "big images". For example, the webpage structure must be beautiful, the main feature must work, the color of the brand must be correct. All of which are very important But they tend to overlook "Small details" on the way, they think that the color change button when pressing or having a small animation when loading the data is just a "decoration" that is not necessary and wasting time to do. But in reality These details are not just beautiful things. It is the "body language" of the website that uses directly to users. The "quiet" website is like we talk to people who do not nod in response, do not make eye contact or without any reactions. Finally, we don't know if he is listening to us or not. And that is the reason why many websites lack charm and create awkward experience without knowing

‍

Let the "quiet" website continue = let the customers "escape" every day

Having a website that "Can't communicate", more serious than you think. It's not just a matter of beauty. But directly affects your business Imagine:

• The reliability is reduced. Habb: Websites that do not have any feedback make customers feel insecure and unsafe. Especially when having to do financial transactions They will feel that this website "doesn't look promotion" and may be a scam website.
• CONVERSION RATE Down: When the user is not sure whether their actions are successful or not (such as pressing the add to car), the opportunity he will abandon Also known as UX that makes customers disappear very high, they will leave the website even though That is almost already shopping
• The user is frustrated and does not want to come back again: the bad experience will always be buried in the heart. If your website is difficult to use and confusing They have no reasons to come back to use again. When there are competitors who provide better experiences
• Damaged brand image: The website is your company's face. If it doesn't seem to pay attention to the small details, it reflects that your brand may be like that as well. This destroys Authority and easily accumulated confidence.

‍

The solution is "Micro-International". The secret weapon that fills the website.

All this solution is called "Micro-International" (Micro-Interction) . Speaking the easiest, it is "The small details or reactions that occur when the user does something on the website" to let users know that "I already know what you are doing." And "This is the result." It was a website that used to "be quiet" into a smart conversation partner.

According to the accepted principles of experts like Nielsen Norman Group, the composition of Micro-International Good to consist of 4 main parts:

• 1. Trigger (stimulator): is the action of users that start Interaction, such as clicking the button, scrolling scrollbar, pulling the screen to refresh
• 2. Rules (rules): is what determined that when the Trigger is happening, "What will happen next", such as pressing the 'Like' button, the numbers will add 1 and the icon will change to blue.
• 3. Feedback (response): is what the user "see", "heard", or "feel" that the rules are working, such as seeing an animation icon, has an animation coming out, hearing the "Ting" softly, or feeling a little shaking.
• 4. LOOPPS & MODES (Conditions and Loop): Is an additional rule that the Interactive will change over time or repeatedly used, such as the 'Like' button cannot be repeated. Or if pressing again will be UNLIKE

The best starting is to look for the most important points on your website, such as the Call-to-to -ction button, the payment process. Or various forms And start adding "life" or these little feedback. Understanding the psychology behind the design Will help you create Micro-inactions More powerful

‍

Examples from the real thing: when the boring form becomes a tool to impress

I would like to give an example of a B2B software company that has encountered a big problem. Customers come to the page "Request a quotation" a lot, but fill out the form very little. The team went to inspect and found that their form is both long and boring. Nothing said where to fill out. Or which channel is wrong

What to do: They decided to overhaul this form as well. Micro-inactions

• Before doing: It is a long form. More than 10 channels in one page look discouraged.
• After doing: they changed to Multi-Step Form, divided into 3 short steps with Progress Bar (Feedback), allowing the user to know that it is almost finished. Every time you fill in the correct information, a small green mark vibrate a little and have a red edge. And clear messages (feedback) and when the fill in the final step, the "Data" button will change to the rocket into the sky. With the message "Best! The team will hurry to contact within 24 hours. "

Results: Just adjust it. These Micro-inactions, Form Completion Rate, an increase of up to 60% and also received praise from customers that "It is the experience of filling out the best form ever." This is a clear example that the UX/UI is good and cares about the details. How can the person who are about to leave the web into a good customer?

‍

What do you want to do? Simple checklist for your website.

Read here You probably want to start to improve your website, right? Try using this simple checklist to start immediately:

1. Explore Key Interaction Points: Walk to explore your website as a customer. And then list out where the users have to "do" something, such as the add to Cart button, Login button, search box, formulating form, loading page
2. Make "click" meaning: for various buttons, try to add HOVER Effect (change the color or a little size when taking the mouse to point) and active state (change the color or collapse a little when pressing) to let the user know that "This button can be pressed" and "I'm pressing it."
3. Give feedback when filling out the form: adding Real-time data verification, such as on the green mark when filling cheap And up the red frame with advice when filling in the wrong way Do not wait for the user to press "send" and then say it's wrong.
4. Change the boring loading page to be useful: instead of the user staring at the white screen Or rotten icons Try changing to Skeleton Screen (the outline of the webpage to be loaded) or Animation related to your brand. To reduce the feeling of waiting
5. Create a little happiness (Delightful Details): Try to find a point to create a smile, for example, when users apply to receive news, there may be a cute animation, or when dragging the product on the basket, there is a "Tung" soft. These things help to create emotional relationships very well. Especially in businesses that need high credibility like Website for investors

You don't have to do all of this at once. Just choose 1-2 as important and start to do it. The tools like Webflow also have an interaction tools that help you create these things much easier.

‍

Questions that people tend to wonder (And the clear answer)

Q1: Enter Animation or Micro-International Will these websites slow down?
A: It's a very good question! The answer is "No, if done correctly." Micro-inactions Most of them use CSS Transitions/Animations or SVG files, which are very light and does not affect the web speed at all. What should be avoided is to use a large GIF file or an unnecessary script. Web speed is always the heart.

Q2: It's just a beautiful toy, isn't it? Do you need to do it?
A: No! As explained that its main function is "Communication and feedback" to reduce confusion Increase confidence And guide the user to the goal Beauty is just a pleasure. But its true value is to create Excellent user experience (UX) which has a direct effect on the conversion rate and customer loyalty.

Q3: If there is no basis for writing code at all Can you do these things?
A: Of course! Currently, a modern website creation platform, especially the Webflow, has a Visual interactive and animation tool that you can click to create amazing results without having to write a code, even one line. Or if wanting a results above the UX/UI Design expert , it is a shortcut to success.

Q4: Should start adding micro-inactions. Where is the best first?
A: Start with "Money-Making Actions" or the most important point for your business first, the Call-TO-Action (CTA) button (such as applying, order, contact) and of information , because the improvement of these points will affect the business results clearly and as quickly as possible.

‍

Summary: It's time to add "life" to your website. Then change the audience into a customer

At this point, I believe you have seen that Micro-inactions is not just the "small details" that can be done or not, but it is the "key" of the experience of impressive and different users. It is a bridge that connects the web function and the user's feelings. Change from uncomfortable relationships into a smooth and trustworthy conversation.

Investment is effective in paying attention to these details. Is to tell your customers that "We care about you." "We care about your every step" and this feeling will change from just "visitors" into a "customer" and finally became "True fan" of your brand

Don't let your website be just a lonely online brochure. Try to get up to explore your website now and find a "small point" that you can add "life" to it. It may be just one button and you will definitely be surprised by the great results!

Want Vision X Brain to help you "fill your life" to the website too. Micro-inactions That is both beautiful and creating business results, right? Consult our experts for free! We are ready to change your website to create a remarkable experience until customers have to wow!

‍

‍