6

When implementing keyboard interactions, platforms provide two kinds of event: "key up" and "key down". For example:

Therefore, when implementing a keyboard interaction, the developer must choose when the interaction is fired. For example:

  • In a slideshow app, the user can use the arrow keys to move through the slideshow. But should it go to the next slide when the right arrow key is pressed down, or when it is released again?
  • In a video player, the user can hit the spacebar to pause/resume. But should it pause when the spacebar is pressed down, or when it is released again?

The universal provision of both "key up" and "key down" events suggests that the answer is not simple: that, for some situations, "key down" is more appropriate, but for others, "key up" is better.

However, I can find no guidance on this. There are many descriptions of the meaning of "key up" and "key down", but none on how to tastefully choose between them for a given use-case.

In what situations should I prefer a "key up" event? In what situations should I prefer "key down"?

7
  • I don't see how this question relates to user experience? This is a programming problem, to which the answer is very dependant on what you are trying to achieve. I would suggest looking on Stack Overflow for an answer, but don't post this question on there as it's too generic.
    – musefan
    Jul 17, 2020 at 10:28
  • 2
    @musefan it's not a programming problem. I know how to implement keyboard interactions. The question is whether "key up" or "key down" interactions lead to a better user experience. Jul 17, 2020 at 11:32
  • The decision of which to use largely depends on the functionality you are trying to achieve. The answer to which will be very much a technical one, not one that is based on the user experience. The only part relating to user experience is that the function does what the user expects it to do. Even if you can put up a convincing argument that proves your question is related to UX, you would still need to make your question about a specific scenario in order to be answered.
    – musefan
    Jul 17, 2020 at 12:13
  • 1
    @musefan Actually, I think this can be answered from an accessibility point of view. Which event should trigger something is not simply a programming decision but has implications for accessibility.
    – Tsundoku
    Jul 17, 2020 at 12:51
  • 1
    @musefan Your examples sound like usability anti-patterns.
    – Tsundoku
    Jul 17, 2020 at 14:33

2 Answers 2

6

A good rule of thumb is to consider whether the action in question would be desirable to repeat without lifting your finger from the key.

For your examples, if I wanted to see a slide that was much further down the page then it would be better to register the press as soon as the key is pushed down AND to let me hold it down instead of pressing the same down key 20 times to get to where I wanted to be.

The opposite would be true for your video player's pause/resume feature. I wouldn't want to press the spacebar and accidentally hold it for too long so that it would pause & then resume again by the time I let go.

2
  • 1
    Interestingly, YouTube, Netflix, and VLC all repeatedly pause+unpause when holding the spacebar down! 🤔 Oct 15, 2020 at 10:12
  • 1
    I like the principle - if it's an action that you can "do an arbitrary amount of", then a natural interaction is to hold a key down for a length of time proportional with how much I want to do. And this necessitates acting on keydown. Oct 15, 2020 at 10:14
2

I think this is a fantastic question. Benjamin Jex's answer offers a good heuristic, but, as the comments note, even that heuristic doesn't match the behavior of many important UI surfaces.

I tried finding UX research about this (which I assume was the intent of the question) and couldn't find anything specific. However, WCAG does have guidance for pointer gestures (SC 2.5.2 Pointer Cancellation), where they strongly recommend the up event for most gestures:

For functionality that can be operated using a single pointer, at least one of the following is true:

No Down-Event The down-event of the pointer is not used to execute any part of the function;

Abort or Undo Completion of the function is on the up-event, and a mechanism is available to abort the function before completion or to undo the function after completion;

Up Reversal The up-event reverses any outcome of the preceding down-event;

Essential Completing the function on the down-event is essential.

And they explain why:

The intent of this success criterion is to make it easier for users to prevent accidental or erroneous pointer input. People with various disabilities can inadvertently initiate touch or mouse events with unwanted results.[...]

Benefits

  • Makes it easier for all users to recover from hitting the wrong target.
  • Helps people with visual disabilities, cognitive limitations, and motor impairments by reducing the chance that a control will be accidentally activated or an action will occur unexpectedly, and also ensures that where complex controls are activated, a means of Undoing or Aborting the action is available.
  • Individuals who are unable to detect changes of context are less likely to become disoriented while navigating a site.

In other words, waiting until pointer up gives users the opportunity to cancel the action and pause before initiating a change of context. I'll be the first to acknowledge that these goals do not correspond completely to keyboard presses (you can't really cancel a keypress), but I think they offer a useful heuristic:

Perhaps use KeyUp for keyboard gestures that a user might initiate but then want to pause before executing (like where undoing that action might be difficult).

For example, I want to send an IM to my boss, so I might press Enter---but before I release, I reread the message. Whereas with pausing a video, I may indeed want to pause before executing, but undoing the pause is easy.

I've also seen apps prefer KeyDown for actions they want to be perceived as "fast". For example, Edge submits searches in the address bar (and I believe Chrome's, too; disclaimer: I work for Microsoft) on KeyDown, not KeyUp, as does the chatbox submit chats on Facebook Messenger. Executing on the down saves several milliseconds, since people move their fingers slowly. Luckily, these scenarios are usually easy to undo (I can easily navigate to a different page in Chrome, even if I accidentally submitted a query).

Your Answer

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

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