Let’s move through a few principles:

Nature: Is it following physics or is it of its own?

Although skeuomorphism has since lost favor, applying it to can help ground elements on a screen if the calls for it.

iOS and Android also have their own nature of motion. iOS has always had more exaggerated bounce and stretch. While Material design on Android is fluid and continuous. Both make sense within their ecosystems, but can look out of place for users on the opposite platform.

Is it straightforward or bouncy?

Easing is the rate of motion, it’s specified as a function. In motion software it’ll look much like those equation graphs, representing this rate, but without doing math. Without getting into too much detail, here is a chart of possible easing functions, how fast objects slows down, speed up, eases in the middle. Much like nature, easing can also set a mood. If something has no easing it’ll look robotic, straight from point a to b. Ease-out is usually a good go to, since it has a natural rest to the element without delaying further action. Adding some ease in a midpoint is a subtle way of adding importance to an element, think of it as a slow motion drift towards the camera.

Grouping: Do objects move together?

Grouping, much like the non-motion equivalent, gives order and creates affinity to objects on the screen. When applied to motion the grouping can help tell the user how objects relate and will continue to relate. If objects load in together or transition to a new screen together, it can help communicate the user journey. For example, a user taps on a button, and the button and the card it was grouped with transition into a new screen.

Which brings us to…

Transform: Does the element change?

This is the simplest to explain, the object changed in some way. Your button went from a rectangular button, to a circular floating button, the card expanded to full screen, etc. How something transforms should still relate with the mood of the app. This is where motion design can detach the user from the setting. Having a fluid liquid movement in serious office applications is out of place, that requires quick efficient movement, bad motion creates distraction, good motion adds understanding.

Value: Are you needing the value to change?

Value ties in with transform, since the object is changing, but this time you are changing the value sliders, usually opacity and size. That makes value the easiest motion principle to apply, and can a lot. Think of the simple fade in/out. If a user taps a button, and the elements fade out, while the next elements fade in, you’ve created a gentle feeling, softly transitioning between steps. While adjusting just the size down quickly can make for a pop of motion.

Parallax: Are a background and foreground element moving differently?

This one is a bit tricky, because it’s essentially an illusion. The multiple meanings of parallax (not including the former Green Lantern), don’t help matters, but at it’s core, is the background and foreground move separately. Making the background move, and the main foreground object can create the illusion that the foreground object is being moved. If both are moving, it can create speed and depth. This is a common tactic used in 2D video games. Parallax is best left to creating details (like tvOS’s thumbnails) or statement pieces (like featured carousels). While it can be used in scrolling, this can easily create an uneasy feeling, so be weary.

How can motion add value?

So why should we care about motion in an app and where does it fit into the ? If we go back to our user there are three big areas that motion can be used:

Motion can Transfer the user. Move the user to a new view or action. These can use shared element to seamlessly move the user to the new flow, Material Design utilizes this method. The standard slide over transition can move the user to a new action, or even on the same screen with changing focus down a screen.

Motion can help a user Continue. Are you moving the a user through an action? Having a continuous movement can direct the user. If the user has finished a form, a button that transitions to an active state, then relays the success of submission to the user is a continuous ux motion.

The motion of the FAB helps continue to the actions.

Alert the user! Probably the most evident form, the motion interrupts or warns. Like a sudden modal to prompt the user. Ironically this is why users do not like modals… it alarms the users. Use sparingly, when you NEED the user’s attention for a warning.

Look at the path you are on too, alerting the user is important if the user is on an unhappy path, their mindset is frustrated and distracted, drop down a ladder and alert them to a way back.

Some Don’ts

Make the user sick. This sounds silly, but some get motion sickness from apps.

Disorient the user’s actions. Unexpected motion can cause a moment of distraction and confuse.

Delay the user. How does it feel to sit through?

Overdo it. People aren’t here to see your loading animation…

Standard motion is better than bad motion.

I’ll never stop saying this, but system guidelines do exist for good reasons, they speak to how they work, so when in doubt go with them. Both Material and Human Interface Guidelines speak to motion.

Source link https://blog.prototypr.io/-a-story-in-ux-with-journeys-and-motion--two-7ed41592a163?source=rss—-eb297ea1161a—4


Please enter your comment!
Please enter your name here