In the past couple of years, UX has changed. A lot. Not just the techniques, but also the expectations of users. This has an effect on UI design also. The constantly developing background technologies made animation finally viable. It’s not considered as a curse sent upon users by some witches of Salem, something that holds back people.
In fact, it has become a real cornerstone of User Experience since if something moves, it appears to be more alive, responsive. But this is just the tip of the iceberg since animation has many other benefits.
As I mentioned there were times when animations slowed down devices turning out to be a terrible idea for UX. Since those days are gone now you have the opportunity to pump your site/app full with fancy animations and effects.
UX isn’t about making a website or app that feels like a movie directed by Micheal Bay.
Always keep in mind that the coin has two sides and less is often more! With that being said let’s get into the process itself.
Google’s search app on iOS uses several animations to make the interface appear more responsive when results are being loaded.
Due to the immediacy of these transitions, you get the sense that the app is reacting to your input despite the fact that nothing has actually loaded yet.
„It’s the interface’s responsibility to mediate an information exchange which makes it so important. The challenge for designers is to determine when their design gets in the way of this central UI tenet.” Sophie Paxton
You have to answer two simple questions:
1. When should you discuss the animations with your developer?
As a UX designer, you have to determine where does your work connect to the development. I’m going to talk about the waterfall and the agile style. With agile, the designer has the opportunity to work with the developers in parallel on the project. To answer the question: simply as soon as possible. For an example during and within an early sprint cycle, regardless of the type of sprint, you are doing. If you wish to know more about agile, lean and design sprints I suggest you read this article.
2. What is the purpose of the animation in my situation?
Sometimes users don’t wish to read your text based how-to, no matter how easy to understand it is. With just in time animations, you can provide help in the time of need. Use the interface elements to show where the user has the opportunity to take action with gestures and as they progress, reduce the intensity of these ’tutorials’. If you are willing to highlight something on your website animate it, just make sure to keep in mind, that animations work as main headings on your website. They draw attention.
You can animate things for all kinds of reasons, for example:
- to create something attractive
- to look alive
- to increase responsiveness
- to unstuck the user from frustrating situations
- to slow down user interaction
- to build up a hierarchy
The list goes on.
Now that you have an idea of when and what should you animate, you can start thinking about the how.
As any other design process, it starts from a sketch. Now you don’t have to animate every single frame by hand on paper. There are a ton of ways of sketching. For instance, you can use a whiteboard, or an app such as Sketchbook Pro, Photoshop.
After you have all the requirements, you can start prototyping. Prototyping is a key element of UX and it gives you something to present. It reflects progress and motivates users to give feedbacks which are very important in reaching your goal as a designer.
An animation is awesome, but how can you start creating and prototyping actual animations?
There are plenty of applications for creating and testing applications, it only depends on you what tool you use.
Let’s go through a few of the many apps that are available out there. Some are free and some need investment, it really depends on you.
1. Adobe Photoshop
Yes, Photoshop is a great tool if you want to get into animation. It doesn’t require that much skill to get started, in fact, once you’ve mastered the basics you’re pretty much good to go. In case you get stuck at one point, well the good news is You can find tons of guides out there including YouTube videos, books, forums. Also during a learning process, there is a good chance that you’ll get an inspiration for your project.
For a detailed description about animating in photoshop check out this guide.
2. Adobe Animate CC
This is a real treat for animators. You might be wondering why not After Effects? While they are very look alike, Animate CCis a better choice for the web or graphic designers. The things you can do with it is just fantastic. The limit is basically your imagination and expertise. Again, you have plenty of resources to learn from.
If you don’t fear the mystical world of coding, then good news for you. This app gives you a high flexibility, with also a ton of resources that can give you plenty of ideas to choose from. Who knows you might find just what you need on a silver plate. With a bit of practice you can create neat little forms like this:
One thing is for sure,
„Some say buy a whole arsenal of equipment, while others say grab a piece of paper and pen. Tools are just tools. You are the designer, don’t forget that!”