2020
Animating for usability
When and how can I use motion in a meaningful way?
First of all, we 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, it has 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 the differentiator between your product and the competition.
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 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. It's useful to use vertical motion for vertical scrolling and horizontal motion for horizontal scrolling.
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 the screen.
Focus
Motion focuses attention on what's important without creating unnecessary distraction. Motion guides user attention in a smooth non-disruptive way. Remember old video 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
By placing your UI components on different depths the designers can tell the user what objects in the interface are higher priority. Stack the UI in a physical world and let the layers move accordingly: what is closest move faster, and thing in the back move slower. 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 because it zooms in and out of content.
Hanna Edghill
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.
