Sketching UI Animations

Krisztina Szerovay
A free video tutorial from Krisztina Szerovay
UX designer
4.7 instructor rating • 2 courses • 19,336 students

Lecture description

This lecture is about sketching transitions, user interface animations are powerful!

Learn more from the full course

Sketching for UX Designers - Boost UX work with pen & paper!

Learn how to boost your UX design workflow with sketching user interfaces, animations and storyboarding.

04:42:34 of on-demand video • Updated November 2019

  • By the end of the course, you will be able to sketch user interfaces, user flows, ui animations and storyboards.
  • You will understand that you don’t need any artistic skills, sketching is about generating and communicating ideas.
  • This course is also a great starting point for other areas of visual thinking, like graphic facilitation or sketchnoting.
English [Auto] So before showing you some sketching exercises and then close this chapter with some advices, we have one more topic to cover. And this is sketching animations or transitions. As UX designers, we mainly design so-called even driven applications. The term even driven means that the application responds to the actions taken by either the user or the system. So there are two sources of the events, the user does something on the user interface or the system initiates an action. The two most common cases are there is a timed action, for example, A, the window appears after five seconds or it's an action based on the information coming from the network, like a message arrives in a chat window. Why is this important for us? Because while most of the events happen in the background, some of them appear on the user interface. So some events are directly communicated to the users by the changes of the UI. Now, those are the ones that we might want to sketch out. The question is how the change happens. These changes can have basically two forms, the simple form is that there is a starting point and a state of the UI and an end point, the B state and we only have these two states. The second form is the animation. Then we not only have these two states, but we have a transition between these two. And this transition creates the illusion of motion. So to quickly sum up, we use UI animations, then we would like to make changes on the UI in order to show or communicate something to the user. And at the same time we want it in the form that creates the illusion of motion. As you can see, this topic is closely related to user flows. It is a certain way we can make the UI change. I talk about this in a separate lecture because I believe that this technique has a great potential and if it's used in a meaningful way, it can greatly improve the overall user experience. While discourse is mainly about sketching, I would like to briefly tell you some of the reasons why we might want to include animations to give information or feedback to the user. For example, if you scroll down inside your image gallery on your phone, both on iPhones and on Android phones, there is an animation showing if you are at the bottom of the gallery and you can scroll down further this way you will know that the gesture you are applying is correct. Your phone is not free. It's just the end of the list. So in general, it reduces cognitive load by communicating effectively. The other reason is to build on the momentum. Or does your users already have from their real world experiences? Just think about how we use buttons on a UI. We can suggest that a button is pressed and so on. And one other reason is to create a flow state, a delightful experience for the user. For example, we can change how time is perceived by animating a progress bar in a specific way. We can also drive the user's attention, guide the user through the journey and animation can be good for branding to adding personality and for emotional design purposes. Clever animations can help to stand out. And I also would like to highlight that UI animations shouldn't be there just because they may look nice. You should always have reasons for choosing a certain element or a solution. This is even more important in connection with animations because we look at everything that moves. We are wired this way. It's a survival mechanism. So a meaningless UI animation will distract the user. Don't overuse animations. Before I show you some sketches, I tell you one more aspect, timing of your animations is crucial. And one important factor here is that when something moves linearly, it feels unnatural, robotic and uninteresting in nature. Things gain speed, slow down and never stop abruptly. So we can apply these rules inside our digital products so it will reflect the way our brain is programmed. To sum up really briefly, using the so-called easing in a right way, we can make our UI feel more natural using shows how a parameter changes over time in a linear animation, the value changes in equal amounts over time. Generally, you shouldn't use it is out means that after a quick start, there is a natural slowdown. You can use this using most of the times because the fast start makes your user feel that the product responds quickly and at the same time they will feel more comfortable with the app. Thanks to the natural moves, using is the opposite. After a slow start, there is a faster and most of the time. So you shouldn't use it because the slow start can make the users feel that they have to wait too much for the element to appear. And finally, ease in out creates a slow start, fast changes in between and the slow. And another important factor of timing is the duration. And as a rule of thumb is you send these out should last around 200 to 500 milliseconds, in most cases 300 milliseconds. And under it is the best choice. Now, after so much, Corey, let's catch. Indicate that tapping on the hamburger menu icon, the sidebar eases out. And by swiping left, it goes back in the same way. In the second example, a window pops up after the user steps on the delete button with the windows, the guideline is that it should come to the screen a little slower, but it should leave the screen really quickly after the user dismisses it here. I indicate with Aros how the model window appears. First it's bigger and then it shrinks. The third example builds on the principle that objects that are moving together in the same way and same speed are perceived as belonging together. And if an element behaves a little differently, it implies that it's different from the other elements. Applying this in our animation's can prepare the user's minds and it gives them clues. In this example, the two input fields are moving together, showing that they have the same nature and the pattern is a bit delayed it seiners that this element has a different function. The fourth example is about transforming aliment. For instance, transforming icons can have multiple functions on a screen. Here indicate that these two curved lines morph into this X showing that the sound is off. Another example of this morphing is that when you press or hold a meal inside your Gmail app, this icon flips and changes into a checkmark showing that this item is selected. The final example is from the iPhone mail application. If you open the inbox and swipe at least item a meal left, three options appear and if you swipe faster, the mirror becomes archived automatically. Here I use the zoomIn technique showing the three new options, which are more flag and archive. And if you swipe right, you can change a mere state to unweaned, and it works in the opposite way as well. So you can mark on unredeemable as Fred. You can also create a storyboard showing the key elements of the animation, and it's different from the storyboard. I will talk about in the next chapter, but the idea is the same. Should the important frozen moment to communicate your ideas. So keep in mind the following when sketching out UI animations. No, the vocabulary like ezine is out, fade in, fade out bounds and so on. Indicate the important factors like timing, so frequency, duration and speed, and you can indicate by using arrows the degree of rotation and the directions. You can use color to indicate the change is better. And if the event is triggered by the users action, also show what the users action was, a click or a gesture menu, sketch out UI animations, annotations are even more useful. Indicate which elements are part of the animation and also use the zoomin technique. Use DOTD or deadlines for the transitions and for the new states. UV is out most of the times with the duration, not more than 300 milliseconds. And don't forget to ask yourself, what is your goal with this sketch, who is your audience, if it's for yourself or you can present your sketch to your team? You do not have to include each little detail. Just sketch out your idea, capture how the animation will work, and you should search for inspiration on the Internet. In the next lecture, I will give you three sketching exercises and I will also show you a low fidelity and the high Fidelity UI sketch.