Motion Experiments | Hacker News Reader

Motion Experiments

michaelvillar.com

41 pointsdavidbarker13 comments

I think 10% of these animations look cool AND actually don't harm experience, but the rest are just confusing. These morphing animations just distract users with something that shouldn't be the focus. There are too many apps that try to make "pretty design" and they don't realize those pretty design and animation are what distracts users from the actual value the app provides. Even in cases where an app has these pretty designs and are working well, it's because the app is useful, not because the design is pretty.

These experiments look very similar in concept to many of Google's material design animation principles (http://www.google.com/design/spec/animation/responsive-inter... and http://www.google.com/design/spec/animation/meaningful-trans...)

I agree with the other commenters that some of these animations make more sense than others, but it's cool to see people experimenting in this space. The photo loading animation in particular is really nice!

Roughly 1/3 of those would be annoying and upsetting, due to wasting the users' time when interacting with software. Otoh, some of these are nice examples of juicing software, i.e. increasing the amount and readability of feedback to interaction.

Ideally animations that take an amount of time will be used to mask essential delays rather than introduce additional ones. I don't know how much this is actually true in a lot of real world implementations of 'material design' style UI but I hope it to be so.

Casually speaking - material apps don't feel any slower to me.

And it's important to remember that 'perceived speed' is the only relevant metric when discussing usability.

Most animations nowdays don't mask any actual delay, but actually introduce new ones. Often, they cannot be skipped. Even more often, they're not properly chained, in a way that breaks the interaction if you're doing something else while the animation is still completing its cycle. If the animation is is actually masking a delay, you can bet the animation is not interrupted and/or sped-up when the data is ready.

There are very few cases were animations provide visual cues which are actually an improvement. Very, very few. Touch interaction benefits for more visual feedback (such as sliding), but note that sliding in my eyes is not an animation as should be directly linked with the position of the finger.

In the last years I've been aggressively disabling all kind of animations in software which serve no actual purpose. Sadly, this kind of stuff often cannot be disabled.

That's the point of experiments - implementing them to find out which are useful and which are annoying.

My 2 cents:

1, 2, 3: OK.

4: I don't understand what's the purpose of this element. A spinner?

5, 6: OK.

7: OK, this is very similar to what slack uses to show new users what to do.

8: OK.

9: does one really want to do that to a logo? Oh well, personal choices :-)

10 to 13: OK.

14: I'm afraid it will be difficult to look at.

15: This looks dangerous. A phisher could set all the screen to a 100% div which is a link to the phished for site and get it's URL in the address bar. By carefully handling events and drawing elements it can collect clicks and keypresses and maybe MITM the real site without the user noticing. Is this called Safari link because it is how Safari displays links?

16: I don't get it. My first thought is that it was an accordion.

17: OK.

Any animations that take longer than 0ms are annoying. (i.e. I don't like animations in my UIs.) But for the general public, I guess this is pushing in some direction.

These are pretty cool. Does anyone know how these are made?

Adobe After Effects can be used to do these kind of animations, especially the smooth morphing effect from one shape to another

The numbers are backward for English-speaking countries, which I find interesting, but I'll reference them based on the numbers I see given:

17: I like it. It's a bit of a double-edged sword though, as sometimes people pause videos to not be distracted, and that sort of flickering back and forth would certainly distract me if I still had the window visible.

16: cool

15: This would be interesting to integrate with what happens when you actually click a link and it's still working on getting there, especially if you pulled your mouse away from the link before the actual page had resolved in DNS (I think that's when the URI changes on link click? I'm not sure, honestly and that's an assumption)

14: Neat trick and very pretty

13: I like how the length of the arrows increases as the system processes. As long as it's not an indeterminate progress bar (I don't know how that would be represented in this model, but that doesn't matter since it doesn't have to be), that is a beautiful way to do it. I like it.

12: I like it, as long as you could start typing during the animation. I don't like having to wait.

11: standard. good. I like it.

10: It could be useful

9: If that's what the client wants, then that's great! I certainly think it's cool.

8: I'm a bit conflicted with this one. On one hand, it's a neat trick, and exploding out at the same time as shrinking in (in the center) looks nice; but at the same time, it might get a bit old? I dunno.

7: I don't think this is rendering right on Chrome... it either has a very long animation loop, or I'm not seeing the whole thing? The button kinda gets a boil around it somewhat, or part of the way? My computer may be slowing down when trying to render it.

6: This looks like a lot of ones that already exist except more animated maybe? I find it interesting; but, I think my OCD would get frustrated since the change happens /after/ I get to the place I want to be, not at the same time. I'd end up jabbing the down or up button longer than intended. Eh.

5: there's a lot of circular activity in these options. I think I would prefer to see the button just grow in all directions at the same rate and disappear where it wasn't finished, if I were going this route; but, I'm not sure. It's okay, and something I'd tolerate if a phone OS already had it, but not something I'd add myself.

4: I don't know what this is meant for, so I can't comment

3: I'm going to guess there is a text box that would grow to the right side of this icon? I like reusing the icon as both a start search and stop search. Very nice.

2: It may just be my machine, but the graph line changes speed. I don't like that. Is it going at the same speed just laterally, making the line seem to speed up since it has to cover more distance for the rises and falls? If so, then that's okay I guess? It still feels hasty and upsetting.

1: I like the spinner. Could it just be 2 rotations instead of 3? Oh, I get it, grow, be one size, shrink. Nevermind, 3 is fine. I wonder what it would look like if it were extend to its proper size at the start of its first rotation, make a whole rotation and then shrink. I wonder how that would go. I like how it is right now, though :)

All in all, some cool ideas, many of them useful :)

[As an aside, 7->0 don't seem to load on Firefox 36.0.1, so I had to look at them in Chrome. I'm not sure why it wouldn't work in Firefox.]

the counter looks like a massive chore to implement...

Reply on news.ycombinator.com