

Motion Experiments - davidbarker
http://www.michaelvillar.com/motion

======
volaski
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.

------
jerluc
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...](http://www.google.com/design/spec/animation/responsive-
interaction.html#responsive-interaction-material-response) and
[http://www.google.com/design/spec/animation/meaningful-
trans...](http://www.google.com/design/spec/animation/meaningful-
transitions.html#meaningful-transitions-visual-continuity))

------
panic
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!

------
Mithaldu
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.

~~~
andybak
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.

~~~
tenfingers
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.

------
pmontra
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.

------
vortico
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.

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

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

------
mytochar
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.]

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

