User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
Simple question from a dev... I'm a non UX expert. When does a action, such as press a button or hover over a icon, how long should I delay the animation to show the interaction?
I looked on Google Design and for their drawer/side panel button I saw the animation delay was 0s.
EDIT: I believe there might be a misunderstanding in which I apologize. I am asking how long show the delay be before a animation starts, not how long a animation should be.
Instantaneous animation aren't really possible, but they would be the best. The max length of delay between click and animation is 0.1s.
Quote from Nillsen Norman study:
"0.1 second is the response time limit if you want users to feel like their actions are directly causing something to happen on the screen. For example, if you click on an expandable menu and see the expanded version in less than 0.1 seconds, then it feels as if you made the menu open up. If it takes longer than 0.1 seconds for the revised state to appear, then the response doesn't feel instantaneous — instead, it feels as if the computer is doing something to make the menu open."
Although as BrunoH said it is different for tooltips and hover interactions. For that another quote from NN:
"For hover interactions, the timing guidelines for speed of visual feedback and exposing hidden elements must be broken down into more steps:
Mouse cursor enters target area: display visual feedback within 0.1 seconds. Wait 0.3–0.5 seconds.
If cursor remains stopped within target area, display corresponding hidden content within 0.1 seconds.
Keep displaying the exposed content element until the cursor has left the triggering target area or the exposed content for longer than 0.5 seconds."
My gold rule is 0.2 seconds. But it depends a lot on what type of animation you are using. For example, impactful fades can last a lot longer, and slide animations tend to be faster.
Longer animations are less and less common, and I’m also seeing a trend of using no animations at all. I still like them when they prove to make the user experience better.
There should be no delay at all. However if you are asking what should be duration of animation, the answer is "it depends" - in depth answer is here: https://uxdesign.cc/good-to-great-ui-animation-tips-7850805c12e5
My default is 0.25 sec. But this is not delay, this is duration. Delay is zero.
It depends on the components and elements. The main reason for using motion in components and elements in the user interface is suggesting action and making the events clear for the users, so your main action after deciding on using motion or not is answering two questions: First, is this recognized at all? and after that, is this annoying? to answer these questions you can read the Numerous researches:
"Numerous researches have discovered that optimal speed for interface animation is between 200 and 500 ms. These figures are based on the particular qualities of the human brain. Any animation shorter than 100 ms is instantaneous and won’t be recognized at all. Whereas the animation longer than 1 second would convey a sense of delay and thus be boring for the user."
The reason to have an animation is to give the user an immediate feedback on the interaction. This is the reason why there should be no delay to start the animation at all (as the others already stated). But: There might be an exception. You mentioned hover: It depends what the animation would be. Is it let's say a list and you just wont to point out on which list item the user hovers it is OK to start the animation immediately. But if the animation is to display something like a tooltip. There should probably be a delay. Since you do not want to pop up tool tips all the time if the user only wants to move the mouse from lets sys left to right of the screen to reach something.
