2

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:

enter image description here

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/

  • 2
    Try quickly moving your mouse over the cards. I noticed a jitter in the cards below the cursor. If you could find a way to make the transition from hovering over one card to the next seamless, this movement might become less distracting. – seth10 Aug 22 '16 at 19:50
  • 1
    @setht good catch, I hadn't seen that! will have to figure out a way to adjust the jitters... – Bryce Snyder Aug 22 '16 at 19:59
  • Note that movement can also enhance the user experience, it can affect it in a positive way as well as a negative way. – MJB Aug 24 '16 at 12:08
3

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.

  • I had originally gone with adding a hover effect to the element, but not with the lighter cards prior to hover state. Will investigate further and see how I feel about it! – Bryce Snyder Aug 23 '16 at 13:30
1

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.

enter image description here

  • I'm trying to find something more intuitive than a highlighted field. – Bryce Snyder Aug 23 '16 at 13:28
  • @BryceSnyder Wish you luck ;) – Kristiyan Lukanov Aug 23 '16 at 13:34
0

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.

0

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:

enter image description here

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

  • 1
    Great answer overall. Two things I think deserve reconsideration: 1 Material began as primarily mobile, but Google has matured it to a full cross-platform framework. 2 You mention that all elements in the OP's demo have the same hierarchy, but the hover is intended to increment the hierarchy of the item of immediate concern. As you quoted, MD accounts for this under "Hints at what will happen if a user completes a gesture". – plainclothes Aug 23 '16 at 19:29
  • 1
    "Cards cannot be accordions" -- They can, however, have an expanding effect, which this is. Maybe expanding is a better word to describe their states... material.google.com/components/cards.html#cards-behavior – Bryce Snyder Aug 23 '16 at 19:30
  • 1
    @BryceSnyder, from that same page, scroll up and you'll see the When to use section: Use a card layout when displaying content that: - As a collection, comprises multiple data types, such as images, movies, and text - Does not require direct comparison - Supports content of highly variable length, such as comments - Contains interactive content, such as +1 buttons or comments - Would otherwise be in a grid list but needs to display more content to supplement the image. The distinction is about content rather than form – Devin Aug 23 '16 at 19:56
0

Physics is hard

enter image description here

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.

  • I'm a Front End Dev working on a small team, so UX isn't my main and just currently getting into that ecosystem. – Bryce Snyder Aug 23 '16 at 20:01
  • 1
    Well, you're on the right track. The best thing I can tell you is to watch the users and make sure you don't ask leading questions. – plainclothes Aug 23 '16 at 20:04
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.