Should I ever delay handling a click event in anticipation of a double-click event?

Question

I've got an application which presents a list of items (songs) to the end user. Each song is able to be selected and the selected state is represented with a checked checkbox. It looks like this:

After talking with my users for a while I have learned two things:

1. Users like to be able to select and de-select list items by performing a single click on the item itself rather than being forced to click only inside the checkbox area.

2. Users like to be able to double-click on a list item to initiate an action such as playing the song.

However, when a user double-clicks on a song it triggers two single-click events before triggering the double-click event. This causes the item's selected state to flicker. Since they clicked twice, the state has not been affected, but visually there is a bit of confusion as the UI tries to respond to the selected state changing.

The only resolution I can think of is to delay handling single-click events until enough time has elapsed that I am sure a double-click event is not going to come. That feels like bad UX to me, though.

Is it ever appropriate to delay handling a click event? Are my users wrong in thinking about how they want to use the program? How should I approach this?

Answer 1

If I understand your problem, you're getting two single-click events followed by a double-click event and your UX is flickering as a result.

In the Windows File Explorer, double-click works by amplifying a single click:

• A single click selects the file
• Double click then opens the selected file

Can you follow a similar approach with your UX?

Perhaps you could track the time between single clicks on a given item:

• When the first single-click is processed, record the system clock.
• When a second single-click is received for the same item, check to see if it's been less than a threshold (*); if so, discard the click.

(*) You could look up the double-click timeout configured for the current user, which would guarantee you're working the same way as the OS.

Answer 2

To me it would be better to get rid of the check box and just highlight the selected item. If they need to select multiple items they can use the ctrl+click approach. This should allow you to do what you want.

Answer 3

To answer your question, no, don't re-implement the wheel. Operating systems already distinguish between single and double clicks very, very well. (They've been at it for years.)

You might want to look into your programming language and determine if there are different event handlers available for single-click and double-click.

For example, in .NET (for all your C#, VB, C++, or F# needs), there's the Control.DoubleClick event. In Javascript, there's the ondblclick event.

A caveat: if this is a mobile app, all bets are off. Double-clicking isn't really a thing in mobile.

Answer 4

Could you do the following?

• When user selects the song, checkbox shouldn't be auto ticked
• Checkbox should only be ticked when user clicks on the checkbox itself
• Double clicking directly plays the song

Note: this way, checkboxes could be reserved for editing/deleting/adding to playlist functions..

Answer 5

I guess you might want to have a look at a stack overflow answer about the same behavior. That gives you options of how to technically go about it.

However if I am to focus on usability in this forum, then having both double and single click and handling it with a timer always introduces delay for single click. It is a serious pain for power users. I remember sometime back, an Android Wrapper by an OEM had a behavior on a double tap of on screen menu key. To listen to that double tap, there was a short delay and that pushed the opening of menu. You might also be familiar with 300ms delay in mobile browsers. It is important to state that even a slight delay is generally frowned upon by the user.

Having said that, I would recommend having two modes of this screen. The simple list which plays the file when single tapped. If you long press an item, you can go in a management mode, in which you can select multiple items, copy, move, create a playlist etc. This will basically separate the different actions you want to do on an item. This would be easier for the user to follow as long press to select is a helpful and trending pattern for touch based UIs. Similar to text selection guidelines, you could have a top rack of actions for select all, clear all etc.

Answer 6

Don't implement your own double click logic.

How do you find this approach?

• Select one item by single click on the checkbox - you're now in a selection mode
• Select further items by single click on the whole item area
• Cancel selection mode by cancel button
• Directly play an item by click when not in select mode

Demo: https://jsfiddle.net/tgo3jd16/1/embedded/result/