This paper focuses on the role of animation in making microinteractions delightful. We first draw on customer experience literature to propose that a microinteraction is delightful when it surprises, captivates, and communicates need fulfillment. Following this notion and drawing on social semiotics, we analyze a collection of examples of microinteractions posted on dribbble.com. Observations derived from this analysis show that animation contributes to a microinteraction’s delightfulness by contextualizing, clarifying, metaphorizing, and creating a micro-narrative around its purpose, development, or outcome. A microinteraction’s animation has the power to produce “aha! moments,” in which the user notices something meaningful concerning her goals, actions, and expectations, and about the context of use. As microinteractions seriously influence the user experience, it becomes imperative to promote motion design literacy, including identifying strategies and tropes for user interface animation, among UI/UX designers. Paper presented in MoDE 21 Motion Design Education Summit (online conference) on June 11, 2021

1. DELIGHT BY MOTION
Investigating the Role of Animation
in Microinteractions
Omar Sosa-Tzec
San Francisco State University
Erik Stolterman Bergqvist
Indiana University
Motion Design Education Summit 2021
June 13, 2021
MOTION DESIGN EDUCATION SUMMIT
21

2. MOTIVATION

3. •User experiences o
f
ten involve multiple microinteractions
•Microinteractions help the user stay focused
•Microinterations help the user create a mental model of the product (system)
•Providing e
f
fective feedback is essential in UX design
•Designers use animation to enhance feedback
•Designers aim at creating delightful UX though the characteristics of delight appear unclear
Howdoanimationcontributetomaking
amicrointeractiondelightful?
Kra
f
t and Hurtienne; Sa
f
fer; Boyd and Bond; Sosa-Tzec

4. MICROINTERACTION

5. •A microinteraction is a contained product moment that revolves
around a single-use case: a tiny piece of functionality that only does
one thing
•An essential function of a microinteraction is to convey the status of
the system—it helps the user see the outcome of her actions
•A microinteraction works as a vehicle for the brand
•Microinteractions makes a product appear better integrated,
less cumbersome,easier to learn,and more interesting,likable,
and pleasant
Sa
f
fer; Joyce; Boyd and Bond
https://dribbble.com/shots/11472617-Nutrition-Scanner-App-Micro-interaction | Nutrition Scanner by YesYou Studio

6. UI ANIMATION

7. •Animation supports the user
’
s mental model and decision-making
•Animation can favorably impact a product
’
s usability
•The primary role of animation in UI is functional
•Animation provides visual comfort and aesthetics,making the UI
enjoyable,engaging,and graceful
•Animation can create micro-narratives that help the user
comprehend the information on the screen
Gonzalez; Vanderdonckt; Kra
f
t and Hurtienne; Huhtala et al; Thomas and Calder;
Chang and Ungar; Wu et al.; Chevalier et al; Dong et al.
https://dribbble.com/shots/6123058-Hide-Your-Cute-Face | Hide Your Cute Face by Ivan Bogachev

8. CUSTOMER DELIGHT

9. •Customer delight refers to the idea of going beyond customer
satisfaction by exceeding expectations
•Delight: joy + surprise
•Ful
fi
lling high-order needs can cause delight
•Captivation and interest are ingredients of delight as well
Rust and Oliver; Oliver et al.; Kumar et al.; Dey et al.;
Schneider and Bowen; Torres and Ronzoni

10. APPROACH

11. Literature Review
Delightful Microinteraction
(Tentative De
fi
nition)
Surprise
Captivation
Communication of Ful
fi
llment
Semiotics
(Theoretical Underpinning)
Syntax/Semantics/Pragmatics
Social Semiotics
Observations
Motion and Delightful Microinteractions
Structural Alterations
Materiality Perceptions
Clari
fi
cation
Biomorphism
Vitality
Analysis of Corpus
500 Shots—Dribbble.com

12. OBSERVATIONS

13. Delightbyaddingananimatedcomponenttoaninterfacewidget
’
sstructure
https://dribbble.com/shots/8424211-Smoke-Slider
Smoke Slider by Aaron Iker

14. Delightbyalteringthematerialityofaninterfacewidgetthroughanimation
https://dribbble.com/shots/5181665-Swipe-to-Delete
Swipe to Delete by Hoang Nguyen

15. Delightbyshowingaprocessoreventthatclari
fi
esthemicrointeraction
https://dribbble.com/shots/4761278-Upload-Button-Concept-UI-UX-Microinteraction
Upload Button by Pedro Aquino

16. Delightbyaddingabiomorphicdimensiontothemicrointeraction
https://dribbble.com/shots/7152633-Stars-animation
Stars Animation by Wanda Arca

17. Delightbyimbuingamicrointeractionwithvitality
https://dribbble.com/shots/5972951-Heart-button
Swipe to Delete by Hoang Nguyen

18. DISCUSSION

19. •A microinteraction appears delightful when its appearance and behavior
surprise,captivate,and communicate ful
fi
llment
•Delightful microinteractions stretch UI conventions (UI design tension)
while making use of animation to support communication
•Delightful microinteractions produce aha!moments
Sosa-Tzec; Jewitt; Lim et al.; Petersen et al.
https://dribbble.com/shots/5889083-Simple-Like-microinteraction-Principle-freebie
Simple Like Button by Oleksandr Pronskyi

20. •Delightful microinteration design illustrates how social semiotics works
•The power of a delightful microinteraction
’
s animation relies on how it facilitates
the transfer of meaning or induces interpretation
•The identi
fi
cation and organization of motion tropes and strategies is necessary
for motion design to move forward
https://dribbble.com/shots/10276145-Trash-Delete-Button
Trash/Delete Button by Aaron Iker

21. •Besides motion design literacy,designers need to understand the
semiotics,rhetoric,and ethics of delightful microinteractions as they
play a persuasive role in the user experience
https://dribbble.com/shots/5345557-Noti
fi
cation-button
Noti
fi
cation Button by Khrystina

22. Thanks!
Sosa-Tzec,O.,& Stolterman Bergqvist,E.(2021).Delight by Motion: Investigating the Role of Animation
in MIcrointeractions.InProc.ofMODE21MotionDesignEducationSummit
http://www.modesummit.com/2021/wp-content/uploads/2021/06/Sosa-Tzec_Stolterman_MODE2021.pdf