Animating for usability

When and how 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, it's 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. It 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 user's 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.

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.

Usability is not only the UX 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.

For all inquiries

© 2020 by Hanna Edghill AB