3

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:

enter image description here

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?

Improve this question
3
  • I have never had development software that did not properly detect a double click.
    – paparazzo
    Jan 7, 2015 at 14:13
  • 2
    There are a few programs that have such a delay, especially on tray icons. Microsoft security essentials is a example, which open a menu after a single click with a delay and a window on double click.
    – CodesInChaos
    Jan 9, 2015 at 10:28
  • Note that operating systems have options to change the double click delay. Users with disabilities might increase that timeout to be able to double click. You'd exclude those people if you will establish your own double click timeout.
    – try-catch-finally
    May 9, 2015 at 14:11

6 Answers 6

Reset to default
4

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.

Improve this answer
0

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.

Improve this answer
3
  • I already support ctrl+click and shift+click, but I'm trying to follow Material Design principles which state to show a checkbox: google.com/design/spec/patterns/selection.html# You can see this in practice at Google Inbox, but they do not support shift/ctrl select.
    – Sean Anderson
    Jan 6, 2015 at 20:12
  • Unless I am reading it wrong it looks like it says not to use checkboxes if it is mobile, and if it is desktop you can use checkboxes. So it sounds like it is optional. Either way - if you want to keep the checkboxes I think you may have to delay the single click execution or have some other way of determining double click from single click. Depending on the technology you are using there may already be something built in.
    – J. Melis
    Jan 6, 2015 at 20:25
  • You're not reading it wrong. It also says to avoid custom analogs, but I'm unsure what that implies. That said, I haven't seen a Material Design implementation which does highlighting on desktop. The only selection I've seen is Inbox which uses checkboxes. Anywho, thanks for the feedback. Will probably find some elegant way to delay the click. It just seems clunky.
    – Sean Anderson
    Jan 6, 2015 at 20:35
0

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.

Improve this answer
1
  • I think you missed the point of the question. Of course I'm binding to the ondblclick event, but, it fires after the click event fires. The click event performs one action, the dblclick event performs another action. Double-clicking causes the click event to act twice which is undesireable. I'm trying to figure out how to intuitively work around that.
    – Sean Anderson
    Jan 8, 2015 at 18:12
0

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..

Improve this answer
2
  • How does the user know a song is selected if the checkbox isn't ticked?
    – Sean Anderson
    Jan 8, 2015 at 18:11
  • When user clicks on the song, the row could get highlighted i.e background color changes to active color
    – Ades
    Jan 9, 2015 at 8:04
0

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.

Improve this answer
0

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/

Improve this answer

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.