Sketching UI Animations

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 event driven applications. The term event 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 modal 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, an 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. When 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 when 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 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 this course 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't scroll down further. This way you will know that the gesture you are applying is correct. Your phone is not freezed. 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 mental models 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 too, 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 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. Easing 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. Ease out means that after a quick start there is a natural slowdown. You can use this easing 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. Easing is the opposite. After a slow start, there is a faster end. 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 element to appear and finally ease in out creates a slow start, fast changes in between and a slow end. Another important factor of timing is the duration and as a rule of thumb is in and ease out should last around 200 to 500 milliseconds, in most cases 300 milliseconds and under. It is the best choice. Now, after so much theory, let's catch. I 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 modal window pops up after the user taps on the delete button. With modal 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 arrows how the modal 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 animations 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 button is a bit delayed. It signals that this element has a different function. The fourth example is about transforming elements. For instance, transforming icons can have multiple functions on a screen. Here, I 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 male 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 a list item, a mail left, three options appear and if you swipe faster, the mail becomes archived automatically. Here I use the zoom in technique showing the three new options which are more flag and archive. And if you swipe right, you can change a mere state to unread. And it works in the opposite way as well. So you can mark an unread mail as read. 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 show the important frozen moments to communicate your ideas. So keep in mind the followings when sketching out UI animations. Know the vocabulary like ease in, ease out, fade in, fade out, bounce 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 better. And if the event is triggered by the user's action, also show what the user's action was, a click or a gesture. When 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 dotted or dashed lines for the transitions and for the new states. You will 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 a high fidelity sketch.