Interactions are some of the more important parts of crafting a good User experience for the user. Interaction animation gives the developers and designers of the product a chance to entertain the user a little in between the functions. It does not detract from the screen interface and it allows the user to continue using the application without any rigidity or giving a forced perspective to the user. Companies started understanding the importance of interaction animation as big corporations like Twitter and Spotify have taken to using microinteractions and incorporating them into the usability of the products. There are important guidelines to be followed while crafting interface animation such as the duration and the speed of the animation, how the animation is used on to the screen, whether or not the animation has any motion blur, et cetera. However if a designer is not used to creating interface animation, they might be better off using established interface animations for certain common and well-known processes. Finding good interactions can be quite a difficult task so we have taken the Liberty of showing some of the most used and multipurpose interactions.
Usually professional applications such as finance applications that have very real monetary implications for the user generally do not require a lot of features built to keep the users attention. This is because, understandably, most people tend to be pretty careful when it comes to keeping track of their finances. However these applications tend to be having to sort through a tremendous amount of data and server overload means that sometimes the applications may take some time to display the content that the users want to see. This animation shows how a designer can help fill in that waiting gap which would ordinarily be a negative experience for the user into something positive. For example, the rolling numbers that are seen in the animation right before the final numerical amount is shown eat a vital 200 Ms that are required for the application to fetch the data from the server.
Sounds are just as critical as vision when it comes to keeping a user's attention focused on the application and interactivity is also something that can be facilitated by audio means. Users are already used to understanding the results of their actions associating them with various sounds. In this example, Aaron Iker makes the interaction work by triggering one of the Nielsen design principles. He makes sure that users recall the sounds instead of recognising them by using only popular and realistic sounds.
There are a lot of cinema app interactions on the internet. However, we like this particular animation because it focuses on something that is sometimes underrated by designers: perspective. If you notice how the screen shifts when it is time for the user to select their cinema seats, you will see how the design seamlessly shifts to a bird's eye view of the cinema, allowing the user a point of vision that tells them where the screen is going to be, what seats are booked, and which seats are available. After booking a seat the yellow “check mark'' that follows is animated slowly, which gives time for a distracted user to glance at the screen and receive confirmation that their seat has been reserved.
The whole point of animation is to make screen changes seem less rigid. Designers want the application to be interactive but they do not want it to be clunky. They want the elements to glide across the screen; for the user to have the interaction as one seamless process, not multiple processes that together form one feature of the application. This interaction does a very good job of portraying the mood that the overall purpose of the application seems to be trying to project. The user is acknowledged in the animation: wherever the user taps there is a small all button click sort of animation that acknowledges that the user has tapped on the particular element. The pull up feature that opens the “Guide To Vintage Photography” article has a very smooth easing-in time period which lets the user process all the textual content.
Interface animation should always go hand in hand with the content of the website. The action is a perfect example because even though it is not revolutionary in any particular way, it complements the content perfectly. This is a website that focuses on images as the primary form of media. It means that the majority of the interaction is happening when the user is scrolling down quickly or is attempting to go on to the next section of the website. The interactions keep the user on their toes and make sure that their attention is riveted when they come across the next image on the website. Even the animation that opens the textual content allows for a large shift of user attention.
Designing is a process that needs to have very solid foundations. However, interactions come at the very end of the designing process; one might even say they’re in the scope of the developer as much as the designer. The UX of a product is the sum of all of its features. Every single factor that the designing and development team consider during the product development goes into whether or not it is a good experience for the user. Everybody, from clients to the target audience, wants a good usability experience, which means that interactions definitely need to be paid more attention than they are given right now. These examples that we have listed are just that: examples of good work. We encourage you to use these examples as inspiration to create even better work. Do let us know if you have any particular animations that you feel deserve a spot on this list.
Interactions definitely need to be paid more attention, well we are bringing that to you now!
No-code has been booming in 2021, we felt it was just right to share a small list of the best WebFlow courses around the web.
