On an accordion or tab interface with animations, if a user rapidly clicks multiple items, which should open - first click or last click?

Question

I recently encountered a bug in tab and accordion interfaces on our website. These tabs have a bit of animation so there is a slight lag between clicking an item, and it being fully open. The bug occurred when rapidly clicking multiple tab items before the animations complete. The result is that while only one tab content is displayed, multiple tab labels are highlighted.

The simplest fix for this is to ignore subsequent clicks until the animations are complete. However, this strikes me as the wrong approach for UX. It makes it seem as though the interface stops responding.

My gut tells me that a better fix would keep the ability to click multiple items but just ensure that the last item clicked, and only the last item, gets highlighted. The interface is still responding, it does what the user asked, even if the user input is a bit chaotic.

Anyways I think I have an answer but I want to check my assumptions here and make sure I'm not missing something.

Answer 1

– multiple tab labels are highlighted –

I think the error is that multiple items get highlighted when the user makes multiple clicks at the same time, only the last one should be highlighted.

– rapidly clicking multiple tab items before the animations complete –

I try to understand the user who makes multiple clicks quickly on purpose and I see the situation in which someone who has visited the web many times no longer wants to waste time or see the animation of each tab, so they don't wait to click on the next one. My solution would be to not play the animation when clicks are immediately fast and highlight the last selected item.

This example shows the behaviour.

• Clicking each tab plays the animation showing the content
• Quickly clicking one tab after another cancel the animation and highlights the last item

Answer 2

I believe the right approach is to ignore clicks until animation completes. This helps with unintended double/multiple clicks. E.g. misclicks, hand jitter (accessibility), adrenaline rush, etc.

If such "garbage" clicks detected, it would also be good to ignore clicks for a little while after the animation completes. Say, 0.2-0.4 seconds (configurable) threshold.

Depending on how important the animation and how accustomed the users are to it, you may also consider completely disabling it.