1. How to Create Insanely Cool UX
Designs Using Micro-interactions?

2. Micro-interactions are all around us!
Applications, websites or appliances, all are
micro-interaction-driven. Was turning off
the alarm on your mobile phone,
The first thing you did in the morning?
Hey! You began your day with a micro-
interaction. That is, you engaged with the
user interface of your phone in a single
moment.

3. In fact, you would continue to engage in more
such moments with your electronic devices
throughout the day without even thinking about
them because these moments are so small.
Recognizing the invisibility of these micro-
interactions is very crucial for designers. It
enables them to improve user experience vastly
by designing and differentiating a great product
from a good product. Micro-interactions can
literally make or break a product.

4. Being a web design company, we at Helios
Solutions pay attention to minute details as well
as the big picture. As a result, we have always
succeeded in exceeding client
satisfaction with our products and services.

5. What is a micro-interaction?
A contained product moment that revolves
around a single use case that accomplishes one
main task. It can be a single piece of
functionality that exists on its own or it may
exist around other pieces of larger features. It is
intuitive and invisible; we almost fail to notice it
unless it goes horribly wrong. Wondering how?

6. Imagine you are in a concert, seated spellbound
listening to the captivating voice of the singer.
Suddenly, the ringer of your phone is all over the
place. You realize that the ringer-off button is
hard to find when you urgently need to silence
it. This is an example of micro-interaction
(silencing the phone) creating ill experience not
only for you but for people around you, as well.

7. How do micro-interactions differ from features?

8. • The model for micro-interactions They help us
to bridge the gap between machines and
humans by making the interactions intuitive.
• If you care about user experience, you have to
care about micro-interactions. If the latter are
poor then no matter how nicely you design
your main features, they would be always
surrounded by pain as well as frustration.

9. • We exist in a multi-platform environment and
micro-interactions can fit well into it by
creating small interactions on small devices.

10. • You can create signature moments by
designing micro-interactions properly which in
turn would not only boost adoption of your
product or services but also customer loyalty.
For example, the like-button in Facebook can
be a signature moment.
• It helps you to check and ensure that what’s
fun doesn’t become annoying after repeated
use and thus enables you to keep user
experience elegant and streamlined.

11. 1. Trigger that initiates micro-interaction. It can be:

12. • Let’s take a look at the form from Disqus.
When you begin to fill your email address, it
starts to guess your name based on your email
address. Although, this is a little thing but it is
certainly very clever.
• System trigger – the system triggers on its
own when a set of conditions are met.

13. • A very good example of system trigger is when
you are reading on Instapaper and you tilt your
phone and jerk it back, it brings up the rotation
lock. It’s like, hey! You may want this. You need
not go and dig into a setting somewhere to find
the same.
• Feedback that is generated by the rules. They are
mostly visuals but can be aural too.
• GE Café appliances, for example, have used
sound for each different actions like power on,
notification, feature on , etc.

14. • Rules that determine how the micro-
interaction functions. They are invisible and
they decide what can be done and what
cannot. It also determines how the micro-
interaction responds to the trigger being
activated.
• For instance, the rules of a lamp turn on when
the switch is flipped and stay on at full
brightness until the switch is flipped again.

15. • Loops and Modes that make up meta rules of
micro-interaction. They are more effective as
they can measure time every time.
• For example, on Facebook when you start
making too many friends, it shows a warning
like “Please slow down.”

17. 1. Bring the data forward
Do not make users to get into the application in
order to get the data.
Example: With Google chrome you can actually
see what has been downloaded, how many
things have been downloaded and also the
progress of the things that has been
downloaded without having to go into Google
chrome. Moreover, you need not go to any
other separate window as it shows you what’s
going on right there.

18. 2. Prevent the human error
Stop errors from happening! Even if they
happen, what can you do to automatically start
to fix those errors?
Example: In Gmail, if you write “I have attached
a file…” and you actually forget to attach then a
window pops up with the message, “Did you
mean to attach files…?” Although it is creepy as
Google is reading your mail, it is indeed effective
in preventing human error.

19. 3. Don’t start from zero
There is almost always something about the
user, the context, the platform, the environment
that you know what is going on.
Example: While you use navigation apps, after
sometime they get to know your behaviour and
start making suggestions or asking questions like
“Going home?”

20. 4. Use the overlooked
• You, as a designer, already have a lot of tools
or elements that are already there. What if
you can use those things instead of adding
new things onto the screen or dashboard or to
the control panel?
• Example: In chrome, when you search a word
on a web page, it just uses the often
overlooked scroll bar rather than popping up
another window. “Convey the most with the
least”.

21. 5. Speak human
• If your audience is non-technical then speak to
them in the language of human. Try to figure
out the basic message you need to convey and
use the same words your users do.
• Example: Threadless, the crowdsourced
ecommerce company uses cart with faces that
people could relate to. Sad face when the cart
is empty and when you fill things into the cart,
it changes to happy face.

22. 6. Use the long loops
• How does your micro-interaction change
when you extend it beyond a single instance
of use? How does the micro-interactions
adapt to the user behaviour after you visit it
twice, ten times or may be a thousand times?
How does the product evolve overtime?
• Example: In the foursquare app, they have
created a yearlong loop such that it thanks
you even after years. It’s kind of thanks for
hanging out with us.

23. Micro-interactions help you to consider each
detail with care. Thus, it makes your audience
feel that the product that they use is made with
utmost attention and care. This enables you to
build a long term relationship with your
customers and boosts customer loyalty. If you
are interested to create a website that appeals
to your audience, please talk to our team of
designers.

24. Hope it was a useful read! Do you think details
are important? Can micro-interactions help you
differentiate from your competitors? Let us
begin a conversation; please share your
thoughts by leaving your comments below.

25. You May Check This To Know More About
Web Design Agency
Ecommerce Development Company