Microinteractions

in User Experience

by Edina Jakab

Web Development
Professional Bachelor Programme

10th of June, 2019

 Microinteractions
in User Experience
Study programme: Web Development (pwe0918)
Name of supervisor: Simon Schmidt-Jakobsen
Hand-in date: 10th of June

Author:
Edina Jakab

Abstract

This ar�cle presents the outcomes of a detailed research and analysis of ar�cles related to user experience
design in the web industry, with the aim of inves�ga�ng the influence microinterac�ons have on users
when interac�ng with web systems. The research examines what makes interac�ons successful, and in
which cases do they damage the user experience of a product.

The findings show that there is a well-defined structure for an effec�ve microinterac�on, made of four
parts: trigger, rules, feedback and loops/modes. If designed carefully, they improve user experience by
making the product easy to use, enjoyable and engaging. However, there is a fine line between a successful
microinterac�on and a troublesome one, therefore elimina�ng errors in the user interac�on are crucial for
providing a useful and usable product.

Finally, companies that invest in implemen�ng effec�ve microinterac�ons can expect an increase in user
reten�on, and in the same �me, become their brand and products become more memorable in the eye of
the customers.

Keywords: Web, User Experience, Microinterac�ons, Web Design, User engagement

Table of Contents

1. Introduction 2
1.1. Problem Statement 2
1.2. Problem delimitation 2
1.3. Methods 2

2. Analysis and Solution 3

2.1. What is User Experience? 3
2.1.1. Usability 5
2.3. What are Microinteractions? 5
2.3.1. What is the structure of Microinteractions? 7
2.3.2. Why are Microinteractions important? 10
2.3.3. When to use Microinteractions? 10
2.3.4. When are Microinteractions ineffective? 11
2.3.5. Focus group discussion and analysis 12

3. Conclusion 16

4. Reference list 16

5. Appendix 17
5.1. Focus group 17
1. Introduction
Companies should learn that in order to stay competitive, they need to invest in User
Experience, that has a main focus on having a deep understanding of users, their needs,
values, abilities, and limitations. This is a constantly growing field that has not been fully
defined yet, however, it is necessary in order to create a successful user-centered design,
that encloses the principles of human-computer interaction (HCI).

There are many ways a product design can be improved regarding User Experience, for
example, defining personas, customer journeys, and well-planned information architecture.
However, there are some small details that sometimes even go unnoticed by the user and
result in a feeling of delight, fun and easy interaction. These small details are the
Microinteractions that users encounter on a daily basis when millions of people interact
with their smartphones or computers. However, their importance and potential of turning a
good product into a great one are not commonly known and understood. Are
Microinteractions a small price to pay in order to have a great User Experience?

1.1. Problem Statement

The goal of the research is to examine how and why Microinteractions have a positive
influence on User Experience. In what conditions do they work efficiently, and when are
they becoming a threat for User Experience on the web?

1.2. Problem delimitation

Due to a few limitations, such as time, and geographical constraints, this study has been
delimited to desktop research and participants living close to the location of the author.
Furthermore, the focus on the research has been on qualitative data, rather than
quantitative, because most of the aspects concerning Microinteractions cannot be
measured, such as emotions like happiness, delight, frustration. Articles that had no relation
to web-based systems have not been considered in this study in order to analyze valid
information that is exclusively relevant to the topic. It is important to mention that even
though some of the examples include parts of a native app or function, however, the User
Interface of these is not different from progressive web or hybrid web applications,
therefore they are valid for web-based platforms as well.

1.3. Methods
This study is the result of a thorough investigation of articles on the internet about the
broad subject of Microinteractions in User Experience, with a focus on understanding how
and why Microinteractions affect User Experience in web-based systems. The emphasis of
the qualitative research was placed on finding what are the areas of focus that show the

1
most potential for increased user retention on website and web applications, understanding
why Microinteractions work, what are the advantages and disadvantages of using
Microinteractions, and what types of Microinteractions make the biggest difference in the
quality of a web-based product. These goals were adapted into strings of keywords that
have been used in search engines like Google and Google Scholar in order to find
topic-related articles. This method resulted in various findings which were later sorted by
relevance. Some examples of the mentioned strings are the followings: “Microinteractions”,
“Microinteractions User Experience”, “Microinteractions web design”.

The relevance of articles has been decided based on a thorough reading of abstract and
conclusion, which brought the total count to one book and 3 main articles, well suited for
the paper’s objective. It is important to note that other points of interest for the chosen
articles were also the year of publication and the fact that they are peer reviewed.

Furthermore, the gathered theory has been validated by an experiment article measuring
the performance of a solution and a focus group interview. The purpose of the latter was to
gain a better understanding of how users perceive Microinteractions on web-based
platforms, and in which cases do they feel delighted or frustrated. The most relevant
information have been filtered and used for analysis.

2. Analysis and Solution

2.1. What is User Experience?

According to Wikipedia, “​User eXperience (UX) is about how a person feels about using a
system. User experience highlights the experiential, affective, meaningful and valuable
aspects of human-computer interaction (HCI) and product ownership, but it also covers a
person’s perceptions of the practical aspects such as utility, ease of use and efficiency of the
system…” (Norman and Nielsen, 2019)

Companies hire designers with the purpose of making sure their product is high quality, in
many cases the company owners don’t have the expertise to decide whether the product
has a great User Experience and at this point it is up to the designers to their job. Designers
wish to create a platform that works well, without any bugs and it fulfills the user’s needs.
This user centered design approach has several factors that make the difference between a
bad and a good User Experience. Among the research findings, there is a simple and clear
set of principles by Peter Morville that represents these factors:

2
 Figure 2.1-1. Peter Morville’s User Experience Honeycomb

In order to fulfill the user’s needs, and have a ​valuable User Experience the information
presented in the product has to be:

● Useful = The content has to be fulfill a well-defined need of the user.

● Usable = The website/application has to be easy to use by the user in all
circumstances.
● Desirable = Special aspects of the product, like identity, branding, visual effects are
used to induce positive emotions, resulting in user retention.
● Findable = It should be easy for the users to navigate the pages and find the
information they need.
● Accessible = Users with disabilities should be able to use the product to the same
extent as other users.
● Credible = Users should be able to trust the website/application and its content.

However, utility is only one aspect of system User Experience, therefore it is not enough to
meet the exact needs of the users, but it is important to create a product that is a joy to
own and use. Great User Experience goes beyond offering a product that fulfills the needs
the users believe they have, since they are not aware of the potential of a product being
more than useful. Users often don’t notice how engaged they become in using a website or
web application, because it is purposefully designed to be desirable. One popular way of
increasing user engagement is by rewarding them with obvious or subtle achievements. This
study focuses on one particular tool that has the purpose of making the product intuitive,
usable and desirable: Microinteractions. This topic will be further detailed under 1.2.
Microinteractions.

3
2.1.1. Usability
Mentioning the ​distinction of User Experience and Usability is relevant in order to have a
better understanding on how Microinteractions improve Usability, and by this the overall
User Experience. Usability is a quality of User Interface, that covers the Usable factor of the
User Experience Honeycomb by Peter Morville, in other words, how easily customers are
able to use the product and achieve their goals. When it comes to evaluating the usability of
a product, there are 5 aspects one has to consider. (Nunes, 2018)

● Learnability: This aspect refers to the time that the first time user needs to learn how
to complete the basic tasks of the web-based system.
● Efficiency: It is measured by how much time does a user that is already familiar with
the system needs to complete specific tasks on the platform.
● Memorability: After a user does not stay in contact with the platform for a longer
period of time, it can be measured how much time is necessary to complete specific
tasks.
● Number of errors: It is necessary to assess the severity of errors that the users
encounter while completing specific tasks, and whether or how quickly can they
recover from them.
● Satisfaction: After the tasks are completed, the users feel a sense of satisfaction. The
easier and faster they can complete the tasks, the more satisfaction and less
frustration will the users feel.

2.3. What are Microinteractions?

By definition, “​Microinteractions ​are trigger-feedback pairs in which (1) the trigger can be a
user action or an alteration in the system’s state; (2) the feedback is a narrowly targeted
response to the trigger and is communicated through small, highly contextual (usually visual)
changes in the user interface.” ​(Joyce, 2018)

4
 Figure 2.3-1. “A process flow indicating how Microinteractions are either user- or system-
triggered, and result in feedback communicated to the user by a small change in the user
interface.”
(Joyce, 2018)

In other words, Microinteractions are small moments, when humans interact with a system.
These individual moments have the purpose of helping the user complete a single task in a
very subtle, almost invisible way. Therefore, users might not even be conscious about the
influence the Microinteractions have on them, or notice them being there. This way, User
Experience is being enhanced by making the product easier to use. Other than providing an
intuitive design, Microinteractions also have the power to turn a simple, monotone
interface into something colorful, and fun to use. Users meet Microinteractions on a daily
basis, in simple actions that occur commonly on most of the devices, such as swiping up to
refresh data, liking contents on social media, filling out login/register forms. Designers often
user User Interface animations to enhance the Microinteractions, making them more
colorful and fun, but also making them feel closer to the real life. Hence, Microinteractions
are the main tool for systems to converse with users emotionally and add a human touch to
the interface. This personal feeling contributes to user engagement and retention, therefore
users will be interested in using the system again.

According to Dan Saffer, in his book with the title “Microinteractions”, Microinteractions are
“contained product moments that revolve around a single use case — they have one main
task.”​. These details serve the following essential functions:

• Accomplishing a single task

• Connecting devices together
• Interacting with a single piece of data

5
• Controlling an ongoing process
• Adjusting a setting
• Viewing or creating a small piece of content
• Turning a feature or function on or off

While completing these tasks, Microinteractions contribute in communicating feedback or

the result of an action, enhancing the sense of direct manipulation, helping users visualize
the results of their actions, and preventing errors. (Saffer, 2013)

Microinteractions help the products stay in the mind of the customers for a long time. These
intelligent interactions are triggered by the user’s desires and behavior. They happen
because of a need and are triggered by the user. With their help users learn at what stage is
a certain thing, what happens if they act in a certain sense, what consequences did their
actions produce and whether a certain operation was successful. They do not have to read
anything to find out these things, because a simple vibration or animation can be enough to
make the user know about them.

2.3.1. What is the structure of Microinteractions?

An effective Microinteraction is made up of four parts: “​the trigger that initiates the
Microinteraction, the rules that determine how the Microinteraction works, the feedback
that illuminates the rules, and loops and modes, the meta rules that affect the
Microinteraction​.”(Saffer, 2013)

Understanding the structure of Microinteractions is crucial in order to make a significant

and positive difference in the User Experience. Furthermore, it makes it easier to identify
pain points, logical sequences, and functional design elements that bring Microinteractions
together.

Figure 2.3.1-1.​ ​The structure of Microinteractions (Saffer, 2013)

6
Trigger

The trigger is what initiates the interaction, and it can be manual (user-initiated) or
automatic (system-initiated). Microinteractions begin based on the user’s needs: what,
when and how the user wants to accomplish a task, which determines the affordances,
accessibility, and persistence of the trigger.

The most important components of a manual trigger are digital or physical controls. These
provide the ability to engage with the Microinteractions, but also the visual affordance of it.
An example of a user-initiated trigger would be pressing the submit button on a website’s
register form, which triggers the action of registering the user.

Automatic triggers are activated based on internal or external events. In the case of
system-initiated triggers, certain requirements need to be met for activation. For instance, if
a user has typed in a wrong password, the website’s prompt asks if the password was
forgotten and whether the user wants to recover it. In this case, typing in the wrong
password is the trigger.

Rules

Once the triggering action is done, a certain function is carried out by the system following a
set of instructions or rules, so that appropriate and expected responses are provided to the
user. There may be a single rule or multiple rules that process the Microinteraction. These
are invisible to the user, with hidden parameters and characteristics that run in the
back-end of the product. The purpose of a rule is to determine how a Microinteraction
responds to a trigger and define what happens during the interaction.

An example of rules in Microinteraction on a web-based platform: when the user is

completing a login form, the system checks in the background whether the information is
correct. If the information is correct, the feedback for the user is that the input box becomes
green, or a checkmark appears next to it. Otherwise, the input box becomes green and an X
is displayed next to it to indicate that the information is incorrect.

Feedback

The third part of the Microinteraction is the feedback that lets the user know what is
occurring currently as the result of their action, by visual, audio or haptic(sensory) effects.
Feedback can have its own rules, for instance, when or how to appear. These rules may
themselves become Microinteractions on their own, as users might want to adjust them
manually as a setting. (Saffer, 2013)

7
 Figure 2.3.1-2.“Twitter’s password-selection form is a great variation on a common micro-
interaction (picking a password), with very clear feedback.” (Saffer, 2013)

Loops and modes

The fourth part determines the meta-rules and the condition of the Microinteraction after
they are completed, i.e what happens when the conditions or requirements change, the
length of the Microinteraction and whether they must be manually turned off by the user or
expire in the meantime. For example, in eCommerce, a “Buy it now” button might change to
“Buy another” when the user has purchased the item before. These customizations provide
additional flexibility through conditional logic and repetition.

A loop determines the length and repetition of a Microinteraction, for instance, the number
of times a wrong password can be typed in. These are the conditions that can happen more
than once based on certain circumstances. One advantage of loops is that they make
possible for systems to adapt to the expertise of the user. This means that the amount of
contextual information provided to the user concerning the use of the web platform, can be
reduced as they become more familiar with the system. This is a strategic technique in
information design known as progressive reduction (Saffer, 2013). Such an approach is
useful to help designers gain a better understanding of progressive reduction and other
tactics for information shaping.

Modes, on the other hand, determine what happens over time, in this case, three wrong
password inputs will result in blocking the account for a certain amount of time. These are
customizations that allow Microinteractions to focus on specific types of data. Modes

8
should be used sparingly, therefore the most reasonable use of a mode is when there is an
infrequent action that would otherwise clutter the main purpose of the Microinteraction
main purpose. For example, a select mode on a cloud storage platform allows the selection
of files only when activated, so it doesn’t interfere with other actions performed with them.

2.3.2. Why are Microinteractions important?

First of all, they make navigation easier, which should be the goal of all designers and
developers. Better navigation means users stay, buy, and visit again.

Secondly, they improve the rate of interactions, provide real-time information, and make
users feel that their experience matters. They also help guide the customers by giving them
tips and instructions wherever they are in the buying process.

Microinteractions can be considered as the little things a digital store clerk does to meet the
customers’ every need. If the digital clerks take good care of the users, they will feel good
and want to come back. Micro-interactions help improve the chances of leaving a good
impression and by this increasing user retention. (Landicho, 2018)

2.3.3. When to use Microinteractions?

Even though Microinteractions are usually great, it does not mean that all User Experience
interaction should contain one. Overusing it will saturate the design and create confusion in
the hierarchy of information. It’s important to know when to use them.

Below are some examples of Microinteractions that can provide a human touch to the
system and improve User Experience:

● Swipe feature:​ It is easier than clicking and selecting on mobile devices.

● Current system status: People like to know what is happening, so they won’t get
confused or run out of patience. For instance, an upload/download status bar that
keeps visitors updated and aware of their current action will help.
● Tutorial: Microinteractions can help create a fun and interactive step-by-step tutorial
for users to easily learn and engage with a product or service, and by this improve
the learnability aspect of the system usability.
● Calls-to-Action (CTA): People are motivated by the feeling of accomplishment,
therefore CTAs are a good way to influence users, for example in completing a
purchase.
● Animated input fields. Animations will make simple processes interesting and
clearer—such as highlighting and zooming in fields when inputting data on sign up
forms, credit card details, and the like.

9
 ● Animated buttons. These buttons guide users around the website and have
well-defined font, size, shape, color and placement. When hovered or clicked on
they have corresponding animations.
● Notifications. A simple micro-interaction via a notification can remind users to start
or finish a transaction or process that they began, but forgot to finish

Users want things to happen instantly, therefore Microinteractions should be implemented

in situations where it is possible to provide this immediate gratification to them. It is
important to make sure these Microinteractions are based on a good strategy and design.
(Landicho, 2018)

2.3.4. When are Microinteractions ineffective?

Even though the smallest Microinteractions can significantly improve User Experience,
poorly designed ones can discourage users. According to one article by Rudy Mcdaniel, if
Microinteractions were to be evaluated in an applied research, the following labels and
categories could be defined:
● Dead-end Microinteractions are “ineffective or poorly designed interactive elements
that prevent users from moving into subsequent areas of an information system.”
● Bottleneck Microinteractions are “​small interactive elements that frustrate users or
prohibit them from progressing through an information system in a reasonable
amount of time.​” These can eventually develop into a dead-end Microinteraction, if
frustrating enough for users.
● Gateway Microinteractions are ​“interactions that must be completed before access
to other areas of the information system is provided.” A login page that is both a
gateway and a dead-end Microinteraction means that the users would never be able
to experience a system fully since they can’t access the member-accessible
information.
● Springboard Microinteractions are “​small interactions that propel users into larger
or more complex interactions, thus prolonging the virtual experience. Identifying
springboard Microinteractions provides opportunities for tweaking areas of an
information system with the greatest potential for return on investment.​” This return
on investment can be measured quantitatively in terms of User Experience
satisfaction ratings, numbers of impressions, or the duration of user engagement
sessions. (Mcdaniel, 2015)

Removing Dead-end and Bottleneck Microinteractions increases the speed at which

information can be transmitted and received, thus improving the usability of the website or
web application. When implementing Gateway Microinteractions several test must be done
in order to make sure they don’t become Bottleneck or Dead-end Microinteractions, with
the risk of preventing or decreasing the number of new users.

10
2.3.5. Focus group discussion and analysis

A Mini Focus Group (See Appendix) has been conducted with 5 participants, who have been
users aged between 20 - 25 that use their smartphones and browse the web on a daily basis.
The advantage of the Mini Focus Group was that it creates a more intimate group, and
allows the moderator to manage the discussion more easily. The participants have been
presented with prototypes showing various animations and Microinteractions. They have
been given the task to think about situations when they interacted with websites or web
applications that had Microinteractions. Afterwards, they have been asked to have a
discussion and argumentation about which examples provided a better User Experience,
which ones seemed easy to interact with, and which ones had them confused or frustrated.
As a result of the focus group the following examples and, in relation, the participants’
opinions have been highlighted analysed:

Audible interactions

The first example is Facebook’s Messenger

Microinteraction, when the users send a heart emoji to the
person they are having a conversation with. The trigger is
when the users press on the emoji and it is sent, the
feedback is a big amount of hearts start floating from the
bottom of the screen until the top. The loops part defines
that the hearts stop floating as soon as they disappear, and
the mode is that this animation is only possible when the
heart is set as the default emoji of the conversation. The
animation is accompanied by sound effects that imitate
bubbling. According to one of the participants, this
animation and the sound, causes a feeling of joy: “​It’s cute.
I feel joy when that happens, especially when someone else
sends it to me. I also like the sound of it.​” The animation
intensifies the feeling the heart emoji is associated with,
the feeling of being loved and appreciated.

Figure 2.3.5-1. Heart emoji interaction

in Facebook Messenger

However, there is a downside of including audible effects in Microinteractions. “​Sometimes

it’s annoying. Because for example, if you are a guy, and you are out with your friends, they
will start making fun of you because they recognize the sound”​ - another participant has

11
remarked that sounds of Microinteractions can be recognized and can reveal the activities
of the user, especially when it comes to a platform as commonly used as Facebook. This also
means that using audio effects is a means of creating a strong brand that is memorable for
the users.

Password feedback

Figure 2.3.5-2. Password strength feedback Figure 2.3.5-3. Password strength feedback
with only one visible rule. Source: with visible rules. Source: jqueryscript.net
slideshare.net

In the figures 2.3.5-2. and 2.3.5-3. above, there are two examples of password strength
feedback at the trigger of filling out a registration form. In the first example, the only
requirement shown of the password is the length of 8 characters, however the user can get
different feedback based on unknown rules. This can be considered as a Bottleneck
Microinteraction, because the user gets confused and frustrated by not knowing why the
password is not strong. This situation has occurred to the participants as well, who
mentioned “​when you typed in the password, and it shows you how strong it is. But it’s
annoying because you don’t know why it’s weak.”​

Figure 2.3.5-3. on the other hand represents a situation met by another participant: “​It’s
also annoying when you have to fulfill like 5 requirements, for it to be a minimum 8
characters, one upper case, one number, one symbol, blablabla, but at least you know what
you have to do and it’s going to be strong”​ . This statement also proves that users indeed
want things to happen instantly, and they get annoyed when they have to follow more steps
in order to achieve their goals. The known rules and feedback of this Microinteraction
however, compensate for the amount of requirements and provide a faster and clearer way
to write a strong password.

12
Loading

Figure 2.3.5-4. Loading animation

“It’s annoying. Because you are thinking that it got stuck or something. I mean it depends. It
looks cool, but if it’s a slow app then it should load slowly, but then it’s bad.” P​ ressing a
button and getting a loading animation as feedback has its own advantages and risks. On
one hand, it lets the user know that the result is in progress and they need to wait, but users
are not willing to wait for too long. After some time, they start thinking that something went
wrong in the background and they will not get a result. There is risk of it turning into a
Dead-end Microinteraction by preventing the user from progressing and it can result in the
user leaving the platform and possibly not coming back.

Swiping

Figure 2.3.5-5. The feedback of swiping right on Tinder. Souce: blog.photofeeler.com

13
One of the most popular examples for swiping is Tinder’s date-matching interaction, that
allows users to like or dislike other users. ​“When you are tapping you have to aim at a
certain point on the screen. But when you are swiping you can like... do it anywhere on the
screen, or.. On a bigger area.” ​As one of the participants suggested, even though there are
two different triggers for the same rules and feedback, some users prefer to choose swiping
because it seems easier. At the same time, it can be considered a Springboards
Microinteraction, the user loops the interaction until there are available cards, by this
increasing the duration of user engagement session. Furthermore, swiping the cards left or
right gives a human touch to the interaction making the cards feel closer to real life.

Immersive interactions

Figure 2.3.5-6. Immersive interaction by Anton Skvortsov for Norde

Another example of Springboard Microinteractions are complex, but intuitive user

interfaces. Even though some participants felt like in places, there seem to be too much
information, they described the interactions as ​“...cool. It’s constantly moving and I, I, I don’t
know, it just gets you. It’s dynamic.”,​ ​“you get engaged” and ​“I want to see where it goes.
What happens if I do something else.” ​As a result, it is proven that Microinteractions can
turn a big amount of information into something fun and enjoyable to read.

14
3. Conclusion
Microinteractions revolutionize the User Experience of web-based systems. The users are
given only the information that interests them, they know from the first second what is the
status of an action, what happens after the action is completed and what to do next.
Navigation becomes a fun game for adults, which makes the user want to know more about
the company’s products or brand, increasing user engagement and retention.

In order to design an effective Microinteraction, the following four parts need to be

planned: triggers that initiate it, rules that determine how it functions, feedback that the
rules generate, and the loops and modes that are its meta-rules. Poorly designed
Microinteractions that prevent the user from achieving their goals within the product leave
the users with a feeling of frustration and disappointment, by this, they risk a decrease in
user engagement sessions. Therefore, even minor details deserve close attention, because
attention to each and every detail is key to a successful, easy to use human-computer
interaction.

4.Reference list
Saffer, D. (2013). ​Microinteractions.​ O’Reilly Media, Inc.

Nunes, I. (2018). ​Advances in human factors and systems interaction.​ Springer International
Publishing AG, pp.164-174.

Mcdaniel, Rudy. (2015). Understanding Microinteractions as Applied Research Opportunities for

Information Designers. Communication Design Quarterly. 3. 10.1145/2752853.2752860.

Nielsen Norman Group. (2019). ​The Definition of User Experience (UX)​. [online] Available at:
https://www.nngroup.com/articles/definition-user-experience/ [Accessed 2 Jun. 2019].

Joyce, A (2018). ​Microinteractions in User Experience.​ [online] Available at:

https://www.nngroup.com/articles/Microinteractions/ [Accessed 2 Jun. 2019].

Norman, D. and Nielsen, J. (2019). ​The Definition of User Experience (UX).​ [online] Nielsen Norman
Group. Available at: https://www.nngroup.com/articles/definition-user-experience/ [Accessed 5 Jun.
2019].

Usability.gov. (2019). User Experience Basics | Usability.gov. [online] Available at:

https://www.usability.gov/what-and-why/user-experience.html [Accessed 9 Jun. 2019].

Uxbooth.com. (2019). ​Utilizing Micro-interactions to Enhance Your UX Design | UX Booth.​ [online]

Available at:
https://www.uxbooth.com/articles/utilizing-micro-interactions-to-enhance-your-ux-design/
[Accessed 9 Jun. 2019].

15
5.Appendix

5.1.Focus group
Location: Denmark
Date: 06.06.2019.
Number of participants: 5 (P1, P2, P3, P4, P5)
Name of participants: Confidential
Moderator: Edina Jakab (M)

M: Can you think of any examples when Microinteractions have been exaggerated?
P1: Umm.. sometimes animations can be too long.
M: Do you ever send hearts on messenger? And what do you think about the hearts that fly
all around?
P2: It’s cute. I feel joy when that happens, especially when someone else sends it to me. I
also like the sound of it.
P3: It was cute in the beginning. But sometimes it’s annoying. Because for example, if you
are a guy, and you are out with your friends, they will start making fun of you because they
recognize the sound.
M: So what about the password feedback?
P3: In one case when you type in the password, and it shows you how strong it is. But it’s
annoying because you don’t know why it’s strong.
P4: It’s also annoying when you have to fulfill like 5 requirements, for it to be minimum 8
characters, one upper case, one number, one symbol, blablabla, but at least you know what
you have to do and it’s going to be strong
M: And what do you think about these kind of Microinteractions, when a menu expands and
turns into a list by an eye-catching animation?
P5: It’s more interesting than clicking just one button and suddenly the menu appears.
M: What about when you submit something and you have this loading circle thing, how do
you feel then?
P1: It’s annoying. Because you are thinking that it got stuck or something. I mean it depends.
It looks cool, but if it’s a slow app then it should load slowly, but then it’s bad.
M: What about swiping? Do you find swiping easier than tapping on a button?
All: Yes.
M: Why do you think it’s that?
P2: Let me check… For example when I have to message someone in my contact list, I could
swipe left. But I don’t use that. It’s annoying. But I use the swiping right for calls.
P4: I don’t agree, I use that quite a lot.
M: So which swipings do you use?
P2: Like on Messenger when I swipe it up and down.
P3: That’s scrolling.

16
P2: Oh okay then.. When I have many tabs open in Google Chrome. I don’t close them with
the X, I swipe it instead.
P5: Oh, so when the button is far from your finger, in a hardly reachable place, you rather
swipe?
P3: Not necessarily. It’s easier like this. It’s easier to just swipe it, so yeah…
P4: Is it really easier to swipe than tap?
P3: More like.. When you are tapping you have to aim at a certain point on the screen. But
when you are swiping you can like... do it anywhere on the screen, or.. On a bigger area.
M: And what do you think about menus? Like not necessarily this one. When a burger menu
icon turns into an X.
P1: I think it’s okay. It’s more engaging.
M: Have you ever used a website where you had to type in your credit card details? I’m just
thinking that you are on the payment page, and then you type in your details, and when you
press add card, a physical card appears with the information that you typed in. I think that’s
nice because it looks like it’s a real life one.
P2: Hm.. yeah I kind of feel like I made an achievement with that physical card.
P3: I think it’s just intuitive that I can see it on the screen.
M: What about when you have a toggle, and on one side there’s light mode the other is dark
mode.
P5: I don’t swipe it, I just click it. It’s too small to swipe it.
P1: Or like when there’s dark mode on the phone. I know if it’s one and off because the
theme changes and the toggle is to the left or right.
M: What do you think about small and detailed animations like this. What would be the
difference if it wasn’t there.
P2: It’s cute but it’s useless.
P3: I think it depends on where it is. More like.. If it’s in theme with the site like sailing,
going to the beach then it makes sense, but if it’s just for fun, I also think it’s useless.
M: What about this one, with the volume what is the difference if the animation is there or
not.
P1: It’s doper.
P3: If you put it without the sound box thing… speaker yeah, it’s nicer to the eye when you
see what the scale actually does. You don’t have to read it you just see it and you know
what it is.
P4: It’s easier just to see something, like an icon, then to read to know what it is.
P2: Like a logo, you don’t read Nike, you just see the logo and you know it’s Nike. Like the
visual and text thing.
M: What about when you turn the wi-fi on? When you tap it, it does the animation. What if
there was no animation. Or even if there’s no icon.
P5: I haven’t even observed that my phone does this.
P2: It’s not that important. You don’t focus on the little thing. I mean it’s a nice touch but
you focus only on it changing colors and then you know it’s, oh it’s working now.

17
M: What about when you submit a form and then you click on register and nothing
happens.
P2: That’s not good, because you think that is not working. And then you start pressing it
like a bunch of times and it says that you have registered already. So you need at least one
window change, or like a thing to say, oh it’s done!
P1: And this is what I have been thinking about when the menu turns into an X.
P2: But see here it changes from plus. No. It’s a burger menu, it changes to plus, then to X.
You see it’s two steps.
P3: Yeah and what’s the plus for?
P2: It doesn’t bother me.
P2: Wait I think that’s too much.
M: And these 3?
P3: I prefer the second, the simplest one.
P1: The third is not good because it looks like it’s lagging and it’s complicated. But I like the
first one actually.
P4: Yeah the third one is too much it’s like lagging and yeah.
M: What about this last one?
P1: I kind of feel immersed in the app.
P3: Weeell.. Too many elements. Too much things in the background.
P4: But the animation it’s cool. It’s constantly moving and I, I, I don’t know, it just gets you.
It’s dynamic.
P2: Yeah like you get engaged.
P5: I want to see where it goes. What happens if I do something else.
P2: Also when you tilt your phone and things are happening in the background. Like that
was cool when it first came out.
M: Only when it came out?
P2: Yeah I mean you get used to it. You need something new always. It’s just like with any
other thing. You get bored of them.
M: Thank you all for participating.

18