Does too much movement affect the UX?

Question

I'm currently trying to design and create a "Material design" based card list. The list features individual items that can be expanded to show more information, such as a description and dynamic items.

Here is a snippet of my intended design:

So far I have gotten this to work and I like what it is doing, but I am curious if it is too much movement for the user? With MD , object movements help the user find interfaces tangible. Sometimes, there is too much movement and they don't reflect the intent of what's about to happen...

Does the preemptive margins on the element with a hover add too much movement within the list items, or is it portraying well enough what is about to happen when clicked?

Here is the CodePen linked to Proof of Concept: http://codepen.io/brycesnyder/full/yJWgjQ/

Answer 1

I agree, too much movement is distracting. Elements shouldn't be displaced much when hovering since it can cause disorientation.

I've modified your Codepen slightly:

http://codepen.io/anon/pen/XKwqdJ

The intended effect is the same:

Creating the sense of depth on hover, but without using displacement, just drop shadow and tone. This keeps elements static (good for Usability, as you correctly pointed out) but still gives a sense of MaterialDesigns "depth" effect.

Answer 2

In my opinion, you should remove the onhover movement because the whole page moves a bit and this takes up additional attentional resources for processing that movement.

Our visual system best detects movement because it is really important for our survival (if you detect coming danger fast you have better chances of escaping it). That is why every time something moves your attention focuses on it (sometimes consciously, sometimes unconsciously) to see if its potential danger.

And in your case you have a list where each item moves when hovered. This is great for directing your attention where the primary action is but it takes too much visual processing.

Instead you can add slight highlighting of the hovered element, without moving it. This way the attention is again focused to the mouse pointer, but it doesn't takes that much attentioanal resources to process the movement.

Answer 3

Following the material design guidelines, elements might be raised to gain focus. Try hovering over the buttons in this example, or larger buttons here. Elements do not change size or move on the page, but the hovered component adapts a lighter color and an increased drop shadow to imply it gaining elevation. Consider the guide on buttons, and the section

Raised buttons behave like a piece of material resting on another sheet – they lift and fill with color on press.

You may also want to consider the page on cards. See visualbear's answer for a great example.

Answer 4

OK, this question already has an approved answer, but going to the question itself, which hasn't been answered: YES, too much movement affects usability.

See, motion is used to bring attention to specific element, to drive focus to something, to provide a special display, or simply to delight.

From Material Design Motion Page:

Motion provides:

• Guided focus between views
• Hints at what will happen if a user completes a gesture
• Hierarchical and spatial relationships between elements
• Distraction from what’s happening behind the scenes (like fetching content or loading the next view)
• Character, polish, and delight

(you should also check Joining & Dividing section)

In your case, all elements (and I mean ALL) have the exact same hierarchy, so why do you need to include something that not only doesn't add anything to usability, but quite possibly affects it in a negative way?

Additionally, I think there are some misconceptions in your usage of Material Design. Cards cannot be accordions, as a matter of fact they're the exact opposite, I think that what you're looking for is Lists with Controls. You can see an expandable list (or accordion if you like) example below:

Finally, Material is mainly oriented to mobile, and in mobile you won't have any hover effect, so unless you're sure this is going to be used only on desktops, it's important to avoid any important info on hover

Answer 5

Physics is hard

Motion relates to real world physics. Because of this, users have highly refined instincts about how things should move and interact with one another. The brilliance of MD is that the Google Design team did a masterful job of creating a generalized toolkit that maps very well to those instincts. But it still needs to be used with great care.

Your solution is perfectly reasonable, it just needs refinement. Consider yourself scrolling around casually and exploring the view. Even quick, cursory motion will trigger that attention-grabbing change of state. What you really want to do is encourage users to interact when they take that slight mental pause to consider a particular element.

Timing is everything

So, how do you align with that kind of nuanced behavior? It's all in the transition timing. The hover state change feels a touch sharp right now. What about delaying the change on hover ever so slightly. Something on the order of 100–200 milliseconds will probably do. Then work with the transition after the delay. Play with easing curves and duration until it feels in sync with the user's interaction with the item.

Test endlessly

Guerrilla testing is your friend here. You're going to play with things and test it on lots of unsuspecting users. Don't ask them things like "How do you like them animations!" Ask them to do something and try to perceive little clues as to their acceptance of the mock physics you've created.

Work with pros

This sort of thing isn't for everyone. If you have the resources, a motion designer and good front end developer can go a long way here. If it's critical to your product's experience, it may be worth bringing in someone on contract to help you find the magic.

Answer 6

Animation (movement) should not be added just for fun. It should provide some value for the user. Ask yourself does it make it clearer for the user? If the answer is not or maybe, then the animation is most likely not needed. There are cases where the animation is crucial for users to understand what's going on. For example in mobile apps, if the screen transitions would not be animated you would get quickly lost.