Is there a logical alternative for the Escape key?

Question

I have a game that can be played in your browser. It's a retro game (multiplayer snake) and the menus and your snake can only be controlled using your keyboard. Mouse input is ignored.

I was using the Esc key to cancel all sorts of actions, like cancelling a confirm popup, going back a step in a menu, exiting a game, cancelling focus on an input field.

The problem is that my game supports html5 fullscreen mode, and browsers will exit fullscreen mode when Esc is pressed. I cannot override that because of browser security.

At first, I thought I would just use both Backspace and Delete to trigger a cancel action, and promote these keys in the initial instructions. Problem is that these keys already have a function when an input field is focused, so I need something else to cancel that.

Also, I'm afraid users will use Esc anyway because they expect it to cancel things. So maybe I should support it when not in fullscreen, and add an alert popup when entering fullscreen that Esc will now exit fullscreen mode and you must use some other key for cancelling. But changing the keyboard layout halfway is not ideal.

I could also skip fullscreen mode entirely because Esc is essential for a good UX of the game and there is no acceptable workaround.

How would you solve this?

Answer 1

Training users to do something different than in the usual way is extremely hard to do. This might be especially true in a computer game where the actions are less thought-through and often reflex-like.

So you'd run into problems even if you laid the Esc functions on a different key. Users still would expect the confirm popup to close and might get confused if they exit fullscreen instead. This can get really frustrating if this happens multiple times.

As I can't give you implementation hints how to hack around this problem, the only possibility I see is what you have already suggested:

I could also skip fullscreen mode entirely because Esc is essential for a good UX of the game and there is no acceptable workaround.

Answer 2

While in general, it is definitely preferable to design the interface in a way that users are already used to, due to external technical limitations that you have no influence on, this is not possible in the described case. Hence, there is no choice but have users adapt to a different convention.

What you can do now is make that adaptation as easy as possible for them: Displaying the available input all the time may visually overload your screen, but how about notifying exactly the users that do press Esc during full-screen mode? This requires two things:

• You need to be able to capture the Esc keystrokes (even though they invariably terminate full-screen mode).
• You need to know whether your game is (was ...) currently in full-screen mode.

Then, display a message such as "Unfortunately, some browsers automatically exit full-screen mode upon Esc. Therefore, you can also use some alternative key to trigger action XYZ." That way, the message reaches exactly the users who would otherwise press Esc when they shouldn't. As mentioned by msparer, input in games is often reflex-like, but then, loads of games require more than the few "standardized" keys (e.g. w, a, s, d for direction control), because they have custom functions, and thus assign additional keys that users may not be used to. It is always a matter of how smoothly the users can be supported in their adaptation to the game.

One thing I would strongly recommend against is skipping full-screen mode altogether. You state that some users may be confused by the effect of the Esc key when in full-screen mode, but even if you are not successful in quickly making users used to an alternative key as described above, that cannot justify punishing the other users who get along well with a different key. In the worst case, that can lead to unhappy users who would get along with the alternative key (they are denied a feature - mind you, an optional one, that can be turned off by whoever doesn't like it - because others do not get along with it well), and unhappy users who do not get along with the Esc key in full-screen mode, because they don't see the problem and the explanation sounds rather convoluted (i.e. not suitable for being explained at all).

Answer 3

For many retro keyboard-based games, I've seen them put key Legends at the bottom similar to this:

Ok I know that the example is a host file change but the idea is there where the available commands are explicitly placed.

Or you can introduce the keys on the first screen to show how to use the game like this instruction screen:

Answer 4

Instead of just trying to provide a 1-for-1 replacement for Esc , you could implement a workaround in each case. For example, in your "confirm" popup, have a "confirm" option next to a "cancel" option; if the user wants "cancel", they press an arrow key to switch to the other option, and then the same button they use to confirm menu options.

You could similarly add a "back" option in menus, use arrow keys or Tab to switch input fields, etc.

As for exiting the game, I think that can stay on Esc, because if they're exiting the game they probably want to exit fullscreen as well!

Answer 5

My suggestions are:

• Q is a traditional key for exiting in old PC games. You can try this. And of course you need to show a tip like Q:exit/back on the bottom of the page.
• For menu based interaction, depending on how you trigger the confirm action, I'd use the opposite for cancel/back. E.g. ← for → or Q for enter. And again, show instructions on the bottom of the page.
• For dialogs with input fields, have 'cancel' and 'confirm' buttons the bottom and allow user to traverse to there by pressing ↓ or tab. Highlight the buttons clearly when hovered.

Users might still hit esc in the beginning. But as long as they learned that it's not giving them expected results and you have clear instructions on how to do it, they'll learn quick enough.