0

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.

2 Answers 2

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
0

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.

2
  • You would frustrate many experienced users with this. Being forced to watch a slow animation after every click can be a very annoying thing to fast users. I don't see the problem with instead highlighting the last clicked item.
    – Big_Chair
    Dec 2, 2021 at 8:41
  • @Big_Chair, the animation should be split second, not slow. Dec 3, 2021 at 14:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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