How Animation Helps Improve Mobile UX

Nick Babich @101babich
Moscow 2017
How Animation Helps
Improve Mobile User
Animation is a clue
When to animate
1. Visual feedback
2. System status
3. Relationships (hierarchical and spatial)
4. Functional change
5. Orientation
6. Highlight
7. Visual hints
8. Emotional engagement
Visual Feedback
Is the app understanding what
I’m asking it to do?
Answers the question:
Visual feedback
Visual feedback
Visual feedback
Visual feedback
Visibility of System
Is this working? How long will it
Answers the question:
System status
System status
System status
How these two objects are
interrelated with each other?
Answers the question:
Functional Change
What does this element do
Answers the question:
Functional change
Functional change
Functional change
Where am I now?
Answers the question:
What’s most important here?
Answers the question:
Visual Hints
How should I use it?
Answers the question:
Visual Hints
Visual Hints
How do I feel when I use it?
Answers the question:
Put your hand on a hot stove for a
minute, and it seems like an hour. Sit
with a pretty girl for an hour, and it
seems like a minute. That's relativity.
— Albert Einstein
What to Avoid
What to avoid
When Should I Add
As early as possible
When should I add animation?
How Animation Helps Improve Mobile UX
Prototype, prototype, prototype
Codrops (
Be Inspired!
Apple Keynote
Adobe After Effects
Axure 8
Tools for Prototyping Animation
More exploratory
More tangible
Apple Keynote
Adobe After Effects
How Animation Helps Improve Mobile UX
1 of 49

More Related Content

Similar to How Animation Helps Improve Mobile UX(20)

Content is KingContent is King
Content is King
NUS-ISS324 views
CSE 401.pptxCSE 401.pptx
CSE 401.pptx
reading73 views
How to Gamify a MOOCHow to Gamify a MOOC
How to Gamify a MOOC
Ehab Abu Dayeh23.2K views
Mark Filippi386 views
MB outreachMB outreach
MB outreach
Mark Filippi302 views
Usability reports for prototype jam Nov. 30 2015 presentationUsability reports for prototype jam Nov. 30 2015 presentation
Usability reports for prototype jam Nov. 30 2015 presentation
Missouri Western State University6.1K views
Can we predict your sentiments by listening to your peers?Can we predict your sentiments by listening to your peers?
Can we predict your sentiments by listening to your peers?
International Federation for Information Technologies in Travel and Tourism (IFITT)53 views
Serious games   cwltgmSerious games   cwltgm
Serious games cwltgm
David Farrell558 views
It quizIt quiz
It quiz
Mkaur01237 views

Recently uploaded(20)

Presentation (1).pdfPresentation (1).pdf
Presentation (1).pdf
hjksa16 views
scribddarkened352233 views
Benzodiazepines--Medicinal ChemistryBenzodiazepines--Medicinal Chemistry
Benzodiazepines--Medicinal Chemistry
NarminHamaaminHussen6 views
Viking passive.pdfViking passive.pdf
Viking passive.pdf
Matis Velt15 views
217 Drive - All on upper.pptx217 Drive - All on upper.pptx
217 Drive - All on upper.pptx
vidstor28213 views
3 Dark Design Templates3 Dark Design Templates
3 Dark Design Templates
Pixeldarts14 views
Anti-Cancer Drugs-Medicinal ChemistryAnti-Cancer Drugs-Medicinal Chemistry
Anti-Cancer Drugs-Medicinal Chemistry
NarminHamaaminHussen7 views
Task 3 copy.pptxTask 3 copy.pptx
Task 3 copy.pptx
ZaraCooper216 views
UX Camp Nov 2023_upload.pptxUX Camp Nov 2023_upload.pptx
UX Camp Nov 2023_upload.pptx
Amir Ansari49 views
Here_Process bookHere_Process book
Here_Process book
nykimstudio15 views
Figma Prototype A to Z.pdfFigma Prototype A to Z.pdf
Figma Prototype A to Z.pdf
Atiqur Rahaman15 views
Anthelmintic Drugs-Medicinal ChemistryAnthelmintic Drugs-Medicinal Chemistry
Anthelmintic Drugs-Medicinal Chemistry
NarminHamaaminHussen5 views
Doing Footwear - Footwear FactoryDoing Footwear - Footwear Factory
Doing Footwear - Footwear Factory
Doing Footwear8 views
The Last GrainsThe Last Grains
The Last Grains
pulkkinenaliisa36 views
Nomor Meja RUANG-4.docNomor Meja RUANG-4.doc
Nomor Meja RUANG-4.doc
ssuserc40b916 views
Task 3.pptxTask 3.pptx
Task 3.pptx
ZaraCooper217 views
evidence .pptxevidence .pptx
evidence .pptx
npgkddpbpd9 views

How Animation Helps Improve Mobile UX

Editor's Notes

  1. My name is Nick and today I'll tell you about why animation is so important in modern interfaces and how we can think about animation in the context of improving the user experience. This presentation will be my answer to the frequent question "How do I, as a UI and UX designer, find out where to use animation to improve usability?"
  2. Animation is often perceived by designers as something that makes the user's work undoubtedly more enjoyable, but overall it does not really matter. Therefore, it is added to the interfaces last, like makeup. But this is completely wrong. Animation should be built into the user interface from the very beginning, be its integral part. Why should we use animation in the project? The answer is on this slide. Animation is a hint. Thanks to the animation, we can reduce the cognitive load.
  3. On this slide, I listed the main groups of animation. Immediately I will say that some animations are not representative of only one group, and may overlap with others. I highlight the following 8 possibilities for using animation and for each of them I'll give examples. With the exception of the last point, they all significantly reduce the cognitive burden.
  4. When we talk about animation, most often we mean interaction. Our experience and impression of the product are formed from a combination of factors, with the interaction playing a fundamental role. Visual feedback is incredibly important for any interaction with the graphical user interface.
  5. The feedback is directly tied to the user action - this is the most natural form of notification about the result of the operation, which was initiated by the user. In fact, any user expects (consciously or not) that its action will be the response of the system. And a good interactive design provides this feedback.
  6. The simplest example that all users are familiar with is the reaction of the button to the click. This particular example is rather skewomorphic (because in it we observe the laws of physics, you can see it in the shadows, which vary depending on the state of the button). But this example is very well perceived by users. In real life, objects react to our interaction, and that's how we expect our user interface to work. Elements of the user interface, such as buttons and controls, must convey a sense of the real world, even if they are behind a layer of glass. This example seems so obvious that some of you will doubt its usefulness. However, not so long ago on many sites it was possible to meet buttons that did not respond to pressing and in order to avoid pressing again, next to the button they displayed the inscription "Please do not press the button twice." (I'm talking about the example with the button Pay )
  7. Also, animation can be used in a frequently encountered object like Tab bar. Animation in this case allows you to enhance the effect of the action.
  8. Visual feedback is also useful when you need to inform users about the results of an operation. As an example on this slide, you can see the shake animation when the password is incorrectly entered into iOS. Animation in this case takes more time than instantly displaying a small error icon. And at first glance it seems that it is superfluous. But in reality the user may need some time to understand what happened and find the error message, instead of noticing the animation and instantly understanding the action. This example is taken from the Stripe application, in which the animation is used in a very large amount. Literally, every user interaction with the forms of this application has an annexed feedback.
  9. One of the first 10 heuristics of Jakob Nielsen for convenience, the visibility of the status of the system remains one of the most important principles in the design of the user interface. Users want to know their current context in the system at any one time, and applications should not make them wonder about what's happening-they need to report the current status to the user with appropriate visual feedback.
  10. Animation in this category answers the questions "Does the system work? How long will the operation take? "It prevents the ambiguity of the current state
  11. One of the first animations I ever saw was a cursor flashing on the MS-DOS command line. It was friendly and an invitation - like: "forward, type something." But this flashing cursor has an important functional purpose - if the flashing stopped, it meant that it seems like there are some problems with the operating system.
  12. The process of loading data is an excellent opportunity to use animation. For example, animated boot panels show how quickly the process passes, and sets the expectation of how quickly the action will be processed. Such animated load indicators are recommended for use with operations that take longer than 10 seconds.
  13. Animation allows you to incredibly well convey the state of the relationship between the two objects. People like to see the cause-effect relationship. When we see that there are two events, one is the cause, and the second is the effect of the action, we like to think that the second event was caused by the action.
  14. Animation in this group allows you to answer such a question as "How these two objects (for example, the screen) are related to each other"
  15. Apple iOS itself is a good example of meaningful transitions. When the first iPhone came out, many people were delighted with this device, exclaiming "it's so much easier to work with." Actually, this achievement of Apple was achieved largely thanks to the animation. Let's pay attention to our devices for a second. A small screen area and the need to transfer all information, taking into account that each application is a multi-level stack of screens. Without animation, transitions would be incredibly complex. On this screen is one of my favorite animations. In iOS 7, for the first time, the Zoom-in animation was demonstrated, which allowed users to understand the current context when starting the application or moving into the depth of the folder. In the example below, the user selects a folder or application and scales it into a detailed view (or directly to the main application screen). Why I like it so much. It's simple. It was often difficult for me to visually determine which application I'm in, and when I saw this effect with the iOS update, it was a great relief for me.
  16. Let me give an example. Imagine that this is a simple one-page document. And if you click on Contact, in the example on the left we know that something happened, but we do not know what exactly. Changes in the state occurred suddenly. The effect of such a change in cognitive psychology is called blindness to change - when a sudden change in the visual stimulus does not allow users to notice new information. When a user clicks on Contact, his brain does a lot of work in order to understand what happened and compare the Before and After states. Often after such interaction users exclaim "And what now happened." Animation is able to fill these gaps of understanding of the state.
  17. Change the functionality for the current objects. Due to the small size of the screen, we often have to use the same screen area for different functional purposes. A common practical example of such behavior is a button whose functionality changes under certain conditions. Animation shows how these two objects are interrelated.
  18. This animation answers the question: "What does this element do now after my action?"
  19. Hamburger icon turns into a cross after you click on it. The same part of the screen, just another state.
  20. Another common example of such a change in functionality is the "Play" and "Stop" buttons. Converting a play button to a pause button means that the two actions are related, and one click makes the other visible. In a number of cases, the animation action extends not only to the button itself, but also to the transition between screens for different states (this is done in order for the transition to look smooth and not intermittent).
  21. This type of animation allows users to save the context. Animated transitions act as intermediaries between different states of the user interface, helping users understand what changes will occur on the screen.
  22. Animation answers the question: "Where am I now now?”
  23. Animation can help the eye to see where a new object comes from or where it is hiding (and where it is most likely to be found again). In this example, we give the user information that allows him to understand how he moves in the process, and that this process is a linear, interrelated sequence. This is the option of direct communication with the user and allows him to interact better with the interface (to understand where he is now relative to where he came from)
  24. Thanks to the property of animation to attract attention to ourselves, we can use it to accentuate the user's attention on something. Our brain and eyes focus on moving objects - it's a reflex.
  25. This type of animation answers the question: "What is the most important in this interface at the moment?" This is especially useful when you want to highlight something on a page with many elements or details.
  26. For example, show that you have an incoming call at the moment.
  27. Visual hints help the user understand how to interact with the user interface
  28. They explicitly answer the question "how do I work with the user interface"
  29. It is often necessary in cases when it is necessary to demonstrate how to work with a particular object. For example, when using gesture-based navigation - in this case, the user clearly sees that the scrolling function is available for the map collection.
  30. Skillful use of animation in the application allows not only to improve the user experience, but also to distinguish the application from competitors. After all, animation and emotions are interrelated. We can say that the animation joins us on an emotional level. Unique parts can stay in the users' memory for a long time.
  31. We want to love our applications and websites, and animation can make your user experience truly delightful and memorable.
  32. Let's take as an example the time to wait for the application to load. The load indicators are important for the user. Allow to understand the status of the system. In this example, I use the standard iOS boot system indicator. Quite boring, but useful. But who said that waiting time should be boring?
  33. Speech about the fact that time is relative. Perception changes our reality. In the project ui, we can change the subjective perception of time. If the application gives users something interesting while waiting, users pay less attention to the very fact of waiting. So that people do not get bored, expecting something, entertain and distract them.
  34. For example, the loading indication can be something fun or cute. While you download content, you enjoy this animation. Incredibly beautifully done. This is just one example of where the animation can give emotions. A few more examples.
  35. When an error occurs in the application.
  36. One of my favorite animations. Such obvious functionality of a site, as the form of authorization too can use animation in order to give emotions. Present your animation with some love, and your user will love your product back!
  37. Unfortunately, not always animation benefits the user. In some cases, it can worsen the process of working with the interface.
  38. A serious problem today is the "Dribbbleisation of Design" - namely, focus only on the visual representation. Many product designers pay more attention to work that looks beautiful, without any thought of functionality or actual usability. Animation should always serve a purpose. Animations should never be created just for the sake of animation. When the animation does not correspond to a functional goal, it can even be annoying, especially when it slows down the process, which can be faster without animation. In this example, you can see the annexed concept of receiving a PayPal receipt. This animation looks great, but at the same time it is excessive and hinders the natural flow of applications, because the transaction scan takes almost 4 seconds. For this purpose, a simple smooth animation of the receipt will be more suitable (simply because it takes less time). Even good animation can be annoying when it abuses. When developing the animation, ask yourself the question: "Will the animation annoy the 100th use, or is it universally comprehensible and unobtrusive?"
  39. Finding places where animation is appropriate is only half the story. A common question is when I should add animation to the project. We all faced the fact that Project Manager asks to add UX at the very end of the project. And we all know that this is impossible.
  40. Animation can not be so easily inserted at the last minute in an already ready project, it must be present in the project from the very beginning, to be an integral part of the first interactive prototype.
  41. I really hope that your process looks like this. Already in the planning and design phase, you have a set of places in which you will add animation. If you are going to use animation in your projects, each of the animations should be well-designed, and this is possible only when the animation is a natural part of the design process.
  42. Another important point is that until you use the real animation in your product, you can not tell whether it's right for the user flow or not. This will allow you to test the animation even at the stage of prototyping, to eliminate those problems that I mentioned earlier (eye-candy and animation that does not stand the time).
  43. Most often I'm looking for inspiration on these resources
  44. On this slide, I listed all the main prototyping tools, starting from the more visual (for example, Apple Keynote), finishing with the application tools that allows you to write code.
  45. Apple Keynote is like a Balsamic but for animation. You can use "Magic Move" to demonstrate how the UI should work.
  46. Adobe After Effects allows you to do almost anything. He has only one minus. A fairly complex interface for beginners. But you can get used to this too.
  47. Framer is an autonomous environment for prototyping and development. It integrates with Photoshop and Sketch. This is essentially a tool that allows you to write code and animate it at the same time. It uses JavaScript as a language. In addition, on their site you can see many examples of animations that you can use as a template in your projects. Although it does not create code ready for production, it helps designers share prototypes that seem real.
  48. This application includes a large set of animated transitions and gestures. What I like about InVision is that the tool allows you to easily view your design on any device.
  49. We can no longer think of user interfaces as static constructs and add interaction magic later. Instead, we must use the interactive nature of mobile applications from the very beginning and take it as a natural component. When the animation is built into the user interface correctly, it can turn a digital product from a sequence of static screens into carefully thought-out memorable experience.