Recommended
More Related Content
What's hot
What's hot (20)
Similar to How Animation Helps Improve Mobile UX
Similar to How Animation Helps Improve Mobile UX (20)
Recently uploaded
Recently uploaded (20)
How Animation Helps Improve Mobile UX
- 1. Nick Babich @101babich Moscow 2017 How Animation Helps Improve Mobile User Experience
- 2. Animation is a clue
- 3. 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
- 5. Is the app understanding what I’m asking it to do? Answers the question: Visual feedback
- 10. Is this working? How long will it take? Answers the question: System status
- 11. System status
- 13. Relationship #3
- 14. How these two objects are interrelated with each other? Answers the question: Relationship
- 15. Relationship
- 18. What does this element do know? Answers the question: Functional change
- 21. Orientation #5
- 22. Where am I now? Answers the question: Orientation
- 23. Orientation
- 24. Highlight #6
- 25. What’s most important here? Answers the question: Highlight
- 27. Visual Hints #7
- 28. How should I use it? Answers the question: Visual Hints
- 31. How do I feel when I use it? Answers the question: Emotions
- 32. Emotions
- 33. 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 Emotions “
- 37. What to Avoid
- 39. When Should I Add Animation?
- 40. As early as possible When should I add animation?
- 44. Apple Keynote Adobe After Effects Framer InVision Axure 8 Flinto Tools for Prototyping Animation More exploratory More tangible
- 47. Framer Tools
- 48. InVision Tools
Editor's Notes
- 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?"
- 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.
- 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.
- 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.
- 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.
- 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 )
- 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.
- 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.
- 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.
- 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
- 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.
- 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.
- 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.
- 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"
- 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.
- 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.
- 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.
- This animation answers the question: "What does this element do now after my action?"
- Hamburger icon turns into a cross after you click on it. The same part of the screen, just another state.
- 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).
- 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.
- Animation answers the question: "Where am I now now?”
- 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)
- 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.
- 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.
- For example, show that you have an incoming call at the moment.
- Visual hints help the user understand how to interact with the user interface
- They explicitly answer the question "how do I work with the user interface"
- 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.
- 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.
- We want to love our applications and websites, and animation can make your user experience truly delightful and memorable.
- 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?
- 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.
- 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.
- When an error occurs in the application.
- 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!
- Unfortunately, not always animation benefits the user. In some cases, it can worsen the process of working with the interface.
- 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?"
- 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.
- 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.
- 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.
- 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).
- Most often I'm looking for inspiration on these resources
- 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.
- Apple Keynote is like a Balsamic but for animation. You can use "Magic Move" to demonstrate how the UI should work.
- 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.
- 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.
- 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.
- 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.