2

What is the optimal or a good duration for mobile tap feedback?
Case: User taps a control/button and a comprehensive animation is used to tap show feedback. How long should it be?

A similar question was asked here in a rather global way. But it seems to me that feedback on mobile devices is faster that feedback on desktop computers.

Google has design guides about this issue and, without hinting about the animation duration, their examples seem quite fast to me.

Subsidiary question (and don't hit me, I'm not very good at UX design):
Would it make sense to have a faster animation for easing out than easing in for button feedback?
Say that my button would grow/shrink when tapped with a duration of 100ms would it make sense to have it shrink/grow back to its original size within 70-80ms instead?
The idea seems appealing to me but when I test it I find that it looks a bit weird.

If you wonder and if it makes any difference to you:
I am developing a mobile application that targets both Android and iOS using Xamarin.Forms (and NControl for animations)

1 Answer 1

1

Since you use case is rather generic (even though you have limited it to a tap interaction), I would expect that a specific answer is not really going to work for you. Let me give you some examples:

Case A - Indeterminate loading/saving button tap: when the user taps the button to save their input, an animation on the button provides feedback in the form of a loading/waiting loop. Ideally the animation should finish when the action is complete, and that would depend on factors like the network speed and the amount of information transmitted. In this case you can't specify an optimal duration.

Case B - determinate remove/delete button tap: when the user taps the button to execute a delete function that is processed locally and a tick animation is shown to indicate successful completion of the task, you would expect the feedback to be instantaneous so that the user doesn't think there's any issues with the operation that has just been performed. To provide something that is detectable but doesn't waste the user's time unnecessarily (for example, they might be deleting a few things), you want to aim for something between 0.1-1 sec according to research from NNG.

As for your subsidiary question, I think animation in general have been designed to reflect the physics of materials that they are meant to mimic, so the common slide down to refresh has the same stretch and bounce animation timing to reflect a material that can be dragged and stretched. Something that grows and shrinks at different rates doesn't necessarily reflect the properties of the button or the function that it is meant to represent, which is why you might be finding it rather weird (but still best to test with users).

2
  • Thank you for you answer. Yes my question was rather aiming at Case B and looking for a time interval a bit thiner than 0.1-1sec but I like you linking to physics. Although if you think of a sluggy plastic-button, it may expand when you press it and shrink when you stop pressing it. Also, the speed of expanding would depend on how fast you press it, and the speed of shrinking would depend on the properties of the material, so those speeds could be different too. Nov 11, 2016 at 7:28
  • 1
    @ThibaultD. Not sure about the other design/development frameworks, but Google Material Design did mention that the interactions and UI elements should reflect real world physics.
    – Michael Lai
    Nov 11, 2016 at 10:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.