Sketching UI Animations

Krisztina Szerovay
A free video tutorial from Krisztina Szerovay
UX designer
4.6 instructor rating • 2 courses • 17,827 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 US 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 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 event the user does something on the user interface or the system initiates an action. The two most common cases are. There is a time direction for example a more 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 why 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 endpoint the BE 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 than 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 use airflows. It is a certain way we can make the 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. My 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 booths 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 used is just the end of the list. So in general it reduces cognitive load by communicating effectively. The other reason is to build on the mental models your users already have from their real world experiences. Just think about how we use buttons on our UI. We can suggest that a button is pressed and so on. And one other reason is to create a flow state. The light will 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 any mission 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 UI 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 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 you naturally 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 our right way we can make our UI feel more natural using shows how our parameter changes over time in our animation. The value changes in equal amounts over time. Generally you shouldn't use it. Ease out means that after a quick start there is a natural slowdown. You can use this easing most of the times because the first 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 easing is the opposite. After a slow start there is a faster and most of the times you shouldn't use it because the slow start can make the users feel that they have to wait too much for the aliment to appear. And finally easy 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 the ins and outs should last around 200 to 500 milliseconds. In most cases 320 seconds and under it is the best choice. Now after so my Seery let's catch I indicate that tapping on the hamburger menu I can decide by Easy's out and by swiping left it goes back in the same way. In the second example a model 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 that dismisses it. Here I indicate with arrows how the model window appears first. It's bigger and then it shrinks the circle example because 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 element. Applying this in our animations can prepare the users minds and it gives them clues. In this example the two input filters are moving together showing that they have the same nature and the button is a bit delayed. It's sign that this element has a different function. The force example is about transforming elements for instance transforming icons can have multiple functions on a screen. He indicates that these two curved lines morph into these acts showing that the sound is of another example of this morphing is that when you press or hold a mirror inside your JIMEOIN app this icon flips and changes into a checkmark showing that this item is selected. The final example is from the eye for me application. If you open the inbox and swipe a list item a mail left city 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 Flegg and archive. And if you swipe right you can change Ahmir state to and read. And it works in the opposite way as well. So you can mark an e-mail as read you can also create a storyboard showing the key elements of the animation and it's different from the storyboard. I talk about in the next chapter. But the idea is the same show the important frozen moment to communicate your ideas. So keep in mind the followings when sketching out you animations know the vocabulary like Easy in easy 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 changes rather. And if the event is triggered by the user's action also show what the user's action was a click or a gesture and you sketch out UI animations and notations are even more useful. Indicate which elements are part of the animation and also use the zooming technique. Use doated or best lines for the transitions and for the new state U.V. Use 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 don't have to include each little detail just sketch out your idea. Capture how the animation will work and you should search for inspirations 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.