46

You can use the "Model Human Processor" system to decide the length of an animation.* On average it takes a human 230 ms to visually perceive something, with a min/max of 70-700 ms across different people. That basically means that some people are faster at perceiving motion than others, and what some people can perceive in 100ms will take others else ...


12

The advice is: it depends. But here are numbers that can help us figure out what works best: Google ran experiments wherein their search results pages were slowed by 100 to 400 milliseconds. The slower response times had an impact on the number of searches per user: even weeks later, users from the slowed pages were not searching as much: https://research....


6

Go for it. One of the added benefits of showing immediate feedback in the button being interacted with is a reduction in duplicate form submissions. This can be really helpful in ecommerce instances where a double submission might result in a double charge. Best practice would be to limit the behavior to 'positive' additions/submissions, rather than ...


6

There are a lot of assumptions here and a lot of reasons on why, I'll try to break it down: It's a historic thing Animations as we know today, from complex Bezier-smoothed transitions to dialog pops are very recent. Back in the day, in early computer software development with UI's designed on Delphi, Java and native, we had absolutely no animations(at least ...


5

It's not particularly difficult to support a hover on desktop, but a click on mobile. The more important question is this: what are you hiding? As my friends at Hot Studio used to tell me (before Facebook ate them), you never want to make the user wait for the UI. As I subsequently tell others, the job of your interface is to inform, not entertain. Once ...


5

I guess there is no clear answer if there are standardised easings. The type of easing is depending on what additional information you want to provide on current interaction in the current context. So for example: Interaction is removing an item off screen. When the item is of high importance, it has more "weight" and is "more sticky" to remove. When ...


4

Is hover the only way you can find out that information? Would someone on a tablet, or someone using keyboard without a mouse be able to find that full information without having to select that item fully? If hover is just one way to display it - an enhancement, so to speak - then it is OK. But if you have to use your mouse and hover over the item in order ...


4

According to Google's Material Design guidelines: Larger animations on mobile devices are 300-400ms long. Smaller animations can be as short as 150-200ms. Animations longer or shorter than these can feel sluggish or difficult to follow. I think this isn't Material-specific, but a good guideline for general-purpose UI animations. I'd imagine Google ...


4

There are some comments on the question which are quite telling - some people can get stressed or anxious when they have difficulty following the motion of an animation or sequence. Yes, there is research to show that a faster animation is perceived as a faster application, but it is possible to animate too quickly, especially when the area involved is ...


4

I think the two main things to consider here: 1) How helpful is the staggered transition compared to the simple? 2) How does the animation affect long-time users vs short-term users? For number 1, yes, the staggered animation makes it clear what action clicking the tab-button caused. There's also something to say about what kind of design character this ...


3

I have always known this as expanding card, and you can search Google for that term and find examples and code to do it. However, Material Design used to call it that way, but in the new site version they call it parent-child transition. A card expands to fill the full screen using a parent-child transition.


3

It's not necessarily a bad practice to skip detail view. I think there are two salient points here: Inconsistency can be frustrating to the user. If the UI looks the same but I have to take different actions to get to the same place that's friction. I'd shoot for consistency with whichever approach you choose. What's the value in your detail view? I've ...


3

Changing chapter is a major operation, which should be handled with care. A swiping motion changing chapter is in a way careless, since users who accidentally makes the swiping action will be completely lost. Therefore I thing your best option is to use a standard hamburger menu containing the chapters and possibly subchapters as well. download bmml source &...


3

My (personal, largely unsourced) view is "as fast as possible while still communicating what you need". I almost always start with a default of 200ms then tweak, usually ending up faster. I can tell you from experience that it does vary for different types of transition: shorter animations work for smaller elements and/or small displacement. To animate a ...


3

I'll admit up-front that I'm a bit of a "Luddite" as regards web-design: I generally dislike animations, and mostly prefer clean, simple designs. Having said that, I'll try to be as objective as possible... There's an often subtle difference between having "intuitive page/view transitions" and "adding frills for the sake of it". Like so much of UI design (...


2

I would say (from personal preferences) - make them as fast as possible, without being too fast so the user can't distinguish what happened. If, for example, a navigation bar is to slide in from the left side on a button click, make it as fast as possible, without losing the feeling of the menu sliding in, thus making it look like it just suddenly appeared....


2

As always it depends. The reason it's not a best practice is because a hover state can be attained in multiple unintended ways, including scrolling as in the example you listed. In the case of Netflix, they undoubtedly knew the consequences. That's likely why the hover state has such a short timer before activating, as well as why each tile only expands ...


2

There's quite a bit on this in Google's Material Design Guide. Amongst the guidelines: Don't: Linear motion feels mechanical. Accelerate objects swiftly and decelerate them slowly to avoid abrupt changes in velocity. When an object enters the frame, ensure that it's moving at its peak velocity. The android also has animation duration constants - short(...


2

It's fine to have spinner / progress indicator in a button, but try to make the button big enough and put the indicator in the corner, so that the users don't feel distracted by the spinning indicator. A good example from Facebook iOS app login page:


2

I think this is something that should be deprioritized. It's definitely a nice-to-have, but you have to way it against other variables: how may users resize their browsers drastically on a desktop? of those users, how many are truly confused by the reflowed layout? how much time and money will it take to add these transitions? Will this affect time and ...


1

Just like Mike, I would also find it really annoying if I am asked to sign in again after registering unless there is an email verification that is required. Another thought - How would you solve cases where a user does not remember if they've previously signed up for the website? To solve this, I was thinking of a flow where we could replace these two ...


1

If the data they need to edit is the one you're showing in your screen, then it's OK. If the details are more than what you see, then you probably shouldn't skip a read state. More sooner than later, users will find themselves in one or more of these situations: Users wondering what to edit (is it just what they see? is there more?) Users wondering if ...


1

It's ok to go directly to the Edit screen if the context allows. What it sounds like you are worried about is people's dismay at not seeing the detail screen, and unless that page looks very similar to this one, I wouldn't worry. Remember — coherence over consistency.


1

How to decide on a speed for the iteration of a loading spinner... ? Experiment 1. Show users random pairs of spinner speeds. Have them choose their preferred speed of the two. Repeat.... Repeat... Repeat... Use the speed that appears to be most preferred. Experiment 2. Randomize the speed of the spinner for different users. Monitor users to see if spinner ...


1

I'd also argue it depends on the size of the spinner. Bigger views need to spin slower than smaller ones.


1

First of all ask why you are using an animation. If it is for an artistic effect then you design it for the effect you need. Since we are on UX stack exchange it probably fair to say you are looking for a functional animation, i.e. one that aids the users experience. There is an excellent introduction to this here https://www.smashingmagazine.com/2015/05/...


1

Your button should have 3 phases if you plan on using the Progress indicator inside. Static Progress Success or Failure Floating Action Buttons in Material Design use a similar concept. You might be able to relate to this example on Material Up. The Static phase indicates the action to be performed. The Progress phase has a Determinate or Indeterminate ...


1

I se no problem using such a solution, but keep in mind that: When submitted, the button shall only use the progress bar (left to right). When submission is completed, the text "Submit" shall NOT be available again, instead use that check mark indication that the submission was completed. And, of course, Use good contrast colors and remember to change the ...


1

The language switch issue could be solved by a whole number of ways to make the current language more obvious on both the switch and the save stage. The problem of adding the wrong translation to the wrong page is less easy to solve. With your current system (translator sees empty page) I don't think you're going to be able to eliminate this problem ...


Only top voted, non community-wiki answers of a minimum length are eligible