Hacker News Reader

Comment by Klathmon | Hacker News Reader

Wow I'm surprised that many of the comments here are negative.

Despite what you may feel, animation and UI/UX are extremely important, and the suggestions in the article are not the "overdoing" that many of the comments here are complaining about.

Motion is a great tool to hide latency, give some spacial awareness, and can be an additional tool to give quick feedback on an action.

I've personally found its one of the major reasons the "average" person chooses software.

Edit: per my last line, "its" is referring to UI/UX design in general.

View on HN

And there's your answer. The average HN user and the average person are very far apart.

I personally love animation as part of good design, but I know plenty of people that don't care. Even non-tech people I know say things like 'I don't care how it looks, I just want it to work'. Which is a ridiculous sentiment, not because things need to be aesthetically pleasing to work well, but because aesthetically pleasing designs and good usability lead to you wanting to use an app more. It's not just vanity, it actually makes a difference to how you interact with software.

I think there is also space in the middle for valid critique of gratuitous motion design. Hiding latenecy with a cute animation is fun the first time you do it. By the 100th time, it's usually just slow.

I regularly out-pace guis. For example, the simple task of using google maps to go to work in the morning. This task is visually spread out with time-slowing animations that require constant active participation. It is like 5 taps made excrutiatingly long by the fact that my car is parked just far enough away from my home that wifi cuts out and the phone has to aquire 4g. Compare to Waze (also owned by Google) one tap, swipe and dialogs auto continue without needing to be "fed".

I love animation and motion graphics, but I've seen many motion devs fall into the trap of "oh this is so cool, but they won't see it unless I make it a bit longer" -- and unfortunately most of the JS animation frameworks do not encourage async interaction, so interaction phases are often held hostage to the animation cycles.

In these cases, I think motion design is rightly considered wasteful and not delightful.

Your statement, 'I don't care how it looks, I just want it to work', versus your argument against it, 'aesthetically pleasing designs and good usability lead to you wanting to use an app more' are perhaps misaligned.

Usability is not supposed to be aesthetically pleasing, it can be but it is not supposed to be. It's supposed to be usable.

If something is more usable by removing a microsecond delay, then it may not look as nice but it is more usable. I would prefer more usable to nicer looking.

Design is absolutely not just vanity, but artificial delays absolutely do hinder usability to increase the vanity. It may not "feel" as nice, but it is objectively better to use.

The Android Chrome browser is a great example. Swiping stuff around, amazing, smooth and great animations. The animations take only as long as it takes for me to use them. But when I click the button to show me more tabs, it takes a moment to swoop out, then I click and it takes a moment to swoop back in. Great, spatial awareness is introduced and it felt nice, neat.

But now I have 5 tabs open and I am trying to flip between them without losing my train of thought and all those delays add up, it is now no longer as nice to use because I feel like I am ahead of my device because it's slow, when it's really just the artificial delays.

You can still move up to the tab overview screen, it still gives spatial context, but the animation is not needed, and can be removed for better usability.

I also feel like good animations can still exist without delay in many contexts (not all). Complete the users action instantly, show them the results instantly, but in some contexts there is room to fade out auxiliary information out more slowly.

Moving up to the tab overview is a good example. The tabs can be shown instantly, and just a ghost of the previous screen could fade out behind it.

UI/UX is extremely important, but it should be remembered that it has its origins in usability and ergonomics. Does it make sense, is it intuitive, is it productive etc? Even removing features or interface elements if they're found to be confusing or unproductive. You're trying to help the user know where they need to go, or what they should do, at each step.

Animation on the other hand, is rarely important, but if used carefully can provide feedback that's difficult to achieve without. Hiding latency is another useful example. Effects on select or buttons fading in etc almost never adds anything helpful.

Trouble is UI/UX and animation is often becoming more about looking cute or professional than actually being productive or ergonomic. It's not a gain if it takes .5s longer to select each item, or takes two extra clicks. Code it to be snappy and professional (or cute, depending on app), then add animation if it's helpful at a sticking, latency or confusion point. That's very different to baking motion design into everything from the beginning, where it risks becoming style over substance.

Not to say I don't care about how things look, I do. The way it looks should be helping with what it does, not detracting from it.

Which is exactly what I am advocating. Animation is a very useful tool to improve good designs, and it can become a problem if abused just like anything else.

But nobody is advocating for abuse of animation.

Despite what you may feel, animation and UI/UX are extremely important

I disagree. Well-conceived and well-executed animations can be a nice incremental refinement on top of an already good UI. However, they won't compensate for poor static elements like a bad layout or naff icons or illegible typography. In turn, no amount of beautiful UI whether animated or not will compensate for awkward interactions or a flawed conceptual model.

Motion is a great tool to hide latency

You know what's also great for hiding latency? Designing your system properly so it doesn't have noticeable latency in the first place, which is a viable alternative in the overwhelming majority of cases I've seen advocating this sort of animation-as-band-aid.

give some spacial awareness

You know what's also great for giving spacial awareness? A UI layout where the space is used logically in the first place and different areas of significance are clearly presented. Step 1: Don't dumb everything down to nothing but flat colour boxes and line art, thus giving up a whole array of other useful visual tools and creating a whole set of problems you didn't otherwise have.

can be an additional tool to give quick feedback on an action

True enough, but the key word there is "additional". Animating in response to every user interaction looks cute in demos for trivial gimmick apps, but gets old very quickly if you're using serious software for extended periods with numerous interactions per minute. There's also a frequent irony that those trivial gimmick apps tend to run on mobile devices with touchscreens, so all those clever button animations are right under the user's finger where they can't be seen anyway.

I've personally found its one of the major reasons the "average" person chooses software.

Really? I've never seen much evidence to suggest that in all my years doing UI design work. Much of the time, the user won't even have seen most of the animations before making a decision about whether to use the software or not. They're a nice incremental refinement, helping to reinforce an already well-designed and well-presented UI, but a major reason for choosing software? That seems highly unlikely.

You seem to be implying that I'm advocating you should give up working on a good UI in favor of animations, which I'm saying the opposite.

Animations are a tool, and should be applied carefully just like any other.

I chose my words carefully and I stand behind them. Animation is important, and it can be a great additional tool to improve usability of an application. It's not the only tool, but an additional one.

About my last line, I was talking about design and UI/UX in general, probably should have been more clear about that...

This is little more than hyperbole.

Animation is not 'extremely' important and never has been or how would we have survived all these years?

When done badly, modern motion animations are often distracting, annoying or so alien you wonder what just happened and if you just did something wrong but can't tell without doing the action again.

When done well, the only people who notice them are other designers, so are they really worth much?

That's why there's a hostile reaction.

"Animation is not 'extremely' important and never has been or how would we have survived all these years?"

Animation definitely has an important role to play in interface design and it's been used in applications for decades. For example, this video snippet of Mac OS 7 (released in 1991 - over 25 years ago) shows the animation that occurs when a new finder window opens.

https://youtu.be/f_GBeKVijWQ?t=2m16s

Can you imagine minimizing and maximizing windows without some subtle effect to show the window shrinking or expanding? Without animation, the transition would feel clunky and abrupt.

Animation can be overdone of course (even for minimising a window). And that's the real problem with animation in UI design: when it's used purely for decorative puposes or if it slows you down, it quickly becomes irritating.

Previously, animations were subtle and focused on individual actions (and limited by what the hardware was capable of). Today, animations are smoother, faster but also longer (hence the term "Motion UI") and actions are conveyed with multiple, simultaneous animations. It means that sometimes the UI can feel too busy and overdone with movement.

But maybe it's also a generational thing? Taste and fashion change and perhaps users today aren't fazed or distracted by fast motion graphics?

https://www.youtube.com/watch?v=Q8TXgCzxEnw

> Can you imagine minimizing and maximizing windows without some subtle effect to show the window shrinking or expanding?

Easily. I work mostly on Linux, and have turned off all animations. The first time I tried Windows 10, everything felt as slow as molasses. When I turned off animations, I was stunned by how fast Windows 10 was. Opening small apps (terminal, basic editor, etc.) on Linux seemed instantaneous, until I spent some time on Windows 10. Now, Linux seems noticeably slow.

> Without animation, the transition would feel clunky and abrupt.

I tried it out a few times now. It was abrupt, but not clunky. I like it this way.

A lot of OS animation is async, hence doesn't detract from speed and usability in the slightest. Obvious exception for the OS X full screen animation, which is cute twice, then you google how to make it stop. I'd like fullscreen now, not in 2 seconds thanks.

How do the animations hold up when the machine is being hammered and running heavy CPU and GPU loads? (Or normal use when a user has filled it with malware) Windows holds up far less well than OSX in this regard, but does much better than it used to back in XP days where you could watch it paint the UI piece by painful piece often under surprisingly little load. In that case any animating is not helping anyone. Wireframing minimize/maximize etc mght have been more useful.

Much more phone app animation appears to be synchronous, blocking, so the pretty animation is making the app slower. Every time. It appears often to be there as gloss. That's fine the first day when you don't know the way around, beyond that it's just slowing everyone up.

> But maybe it's also a generational thing? Taste and fashion change and perhaps users today aren't fazed or distracted by fast motion graphics?

LOL please. It's not that I am fazed and distracted by fast motion graphics, it's when it's done badly. I'd hardly call material design fast motion graphics either. MD when done right can be excellent. There's some great material design apps on my phone. I do think they went too far with the current flatten all the things cargo cult, but that's my preference. At least they didnt go as far as W10.

Let's take an example of a delete as given in the OP. We'll ignore the asking "are you sure", OK? :) Can I tap my thumb as fast as I can three times and delete 3 records? Or will I have to wait for it to catch up because of the needless cute collapsing animation? Did you actually delete 3, or just 2 because the middle tap was lost during animation play? That's just bad design for any generation, no?

Make a fast app without need for latency animations, and give me animations that are async so if I've become expert within your app I never see them because my taps cancel them. Give me a latency anim just when the network connection is rubbish, and only as long as it's needed. Now test your cute anims on an older phone, or a phone with something greedy running in background, or latency with a horrible or intemittent net connection...

I LIKE fast motion graphics in games, where they're often not fast enough, and movies :p

Reply on news.ycombinator.com