When can I

use motion in a meaningful way?

First of all need to establish what kind of motion we are talking about. Video is great for explaining complex ideas, business models, etc. A video is in one place, it's in a box, its linear: having a start and a finish and it is often not very interactive. UI motion on the other hand is built for interactivity. Rather than being confined to one area of the page, it can be everywhere on the page. It's scalable, it can be as small as a hover overlay and as big as intense parallax scroll effect. Unlike video, it doesn't have a beginning and an end. Motion can be what differentiates your product from the competitions.
 

Navigation

Motion helps orient users by showing if items move vertically or horizontally. I can be a hint to scroll even before the user does so. It can also be animation feedback that's simply correct; When the user scrolls left, a correct transition moving left helps embed that navigation into the users mind. They will get a grip of the app faster if the movement matches the interaction.

Transitions

Thinking about transitions is a must, it's a key moment when we explain to the user what will happen next and where we are going. If contextual transitions are used effectively, the user will transition to a new screen state with a clear understanding of how the new screen is an extension of the page they just came from. Always animate content coming into the screen, not leaving the screen. The user's focus is already on the next screen after an action, and don't want to spend time waiting for the old content to leave.

Add focus

Motion focuses attention on what's important without creating unnecessary distraction. Motion guides user attention in a smooth non-disruptive way. Remember old tv-games where a landscape would look all colorless and static, and then one thing would glimmer, spin and look very vibrant and 3D? You knew instantly to try to interact with it to move along in the game.

Space and depth

This has been used quit a lot in the flat minimal trend. Instead of making things look 3D, you let them be flat but move like they are stacked in a physical world. What is closest move faster, and thing in the back move slower. Designers can tell the user what objects in the interface are higher priority.


Another way to treat depth is to make it clear to the user on what depth in the phone they are at. On the home screen, inside of an app, inside a menu, in a popover etc. The 'open animation' when you open an app from the home screen is a good example, when you are zooming in and out of content.

Micro-interactions

Micro-interactions revolves around a single use case, one main task. Every time you set an alarm, write you password, turn up the volume, liking something on Twitter, emptying the trash, you are engaging with a micro interaction. They can indicate progress, failure of success, or just create small visual effects purely to enrich user experience. These are my favorite to conceptualize and animate! I think lots of UX animations are way to in-your-face and distracting, wasting your time as a user, forcing you to wait for them to play out. I get really excited when I see these small animations that are not mush more than a wink of an eye, a lil' whistle saying come this way, follow me, look here. People are well versed in UI by now, they know in their backbone how an app works. We don't need an actual arrow pointing down for us to know to scroll, a subtle motion hint is sufficient. These hints are really powerful at engaging and helping users as they navigate.

5 tips on how to animate for usability

Meet users expectations

We want to minimize the gap between what the user expects and what they experience. How users perceive what an object is when it comes to weight, position, rigidness and how it behaves. If motion is made well in terms of timing, speed, easing and how it feels, it becomes invisible and seamless. If it doesn’t make sense; if it’s too fast or linear, it breaks expectations and distracts. This is a place where skeuomorphism still lives, in the easing, behaving according to real world physics. Linear easing looks weird and unnatural if I swipe very quickly. If I throw a ball with full power, the ball wont fly through the air in a steady slow speed, it will have easing to it.

Don't distract or make the user wait

Sometimes there is room to do elaborate animations with longer loops, like empty states and splash screen. Then there is other occasions where we don't want to distract the user, or make them wait for an animation to finish. The loader is one of those examples. The loop shouldn't be longer than 1.5 sec or something like that, preferable shorter. Think about what mode the user is in, do they want to be dazzled and delighted, or are they in the middle of completing a task or solving a problem.

Every keyframe is telling the user something

Every choice you make in your animation will convey something to the user. Even before the user registers what these objects are, the designer has already communicated through motion. If element are moving into the screen, how you group them will effect how to user perceives what is clickable and what belong together.

Treat if like a choreographed dance

Think of a transition like choreographed dance move. First the content on screen moves out, text goes first them image a bit slower, then in comes the new image and lastly the new text. The last thing to move is where you want the users eye to land. Aim to remove as many steps as possible or combine steps to make the motion less messy and the transition faster. Plan your animation by sketching it on paper in steps; use classic storyboarding. Then you can start removing or merging steps, decide what steps are very fast and what steps are slow.

Be creative

Try to imagine there is no rules, forget everything you know about classic UI. If you where to invent the new rubber band effect, or the new dropdown menu, what would it be? Motion is not only easing and bounces, it's a whole new layer to UX and it opens up for new ideas. When you start to think about not only the static pages, but what happens in between them in transitions, everything appears in a new light.

Usability is not only the UX designers responsibility!

I want us all to agree on that usability is not only the interaction designers responsibility.

 

Working in a studio, being part of a design team with UX, visual designer and developer, I experienced that it was quit easy to take the back seat when it came to usability, only making thing look pretty. But when I started doing animation, a lot of ideas actually came from me rather than the UX designer. Same thing might happen for developers now that Lottie has entered the scene, the dev. team inching closer to the design team and ideas might pop up on how to solve problems in a technical way. This is the goal, to attack the problem from all angles; interaction, visual and technical. I believe motion is what will bring them all together.