15

I'm currently working on a fairly standard website where one page lists a series of projects - clicking on a project leads to an animation and then displays detailed info for it. I've got a back link on the page to return to the full listing and I was wondering if I should add the ability to use the Esc key to go back.

But now I'm questioning if users even make use of Esc when using websites. While it's no trouble to add the functionality, I'd be interested to know if there is any data/wisdom on the subject of users using the key to jump back or if the browser's back button is used more often.

6
  • 5
    Pressing Esc on browser is used to stop the page loading. So if you implement the "Esc" for going back, you might have people getting nowhere from your site. If your user presses Esc before the page (javascript) has been fully loaded it just stops the page loading, and because the javascript isn't loaded jumping on Esc button does nothing.
    – Samuel M
    Aug 31, 2014 at 18:53
  • 4
    Personally I expect <kbd>Esc</kbd> to work on overlays on websites. For example, when I click an image and a LightBox pops up, or I click a "Details" link and instead of going to a new page the details are shown in an overlay, then I tend to press <kbd>Esc</kbd> to try and close the dialog. I am a heavy keyboard user, so it kind of annoys me when I cannot close the dialog this way and I have to reach for my mouse to find the little X at the top.
    – CompuChip
    Aug 31, 2014 at 22:23
  • 2
    I expect Esc to stop page loading, stop running scripts, cancel a pending meta-refresh, exit full-screen mode, etc. I most certainly do not expect it to go back, and I would think your site was horribly broken if this happened. Sep 1, 2014 at 0:49
  • @SamuelM That's an excellent point, although if the Esc shortcut was clearly indicated in the UI (i.e. "Close (Esc)"), wouldn't I be right in thinking people would see it as a one-off feature, not something to always navigate back? Although this leads me to think I'm over-complicating it! Sep 1, 2014 at 7:26
  • I think you should clarify your heading to match the question. The headline asks about the esc key on websites in general, whereas in the question body you are concerned with using the esc key on a website as an equivalent to going back in browsing history - two very different concerns in my opinion.
    – kontur
    May 30, 2015 at 11:23

3 Answers 3

14

From my perspective there is two views on this question:

  1. On standard websites people do not expect the Esc key to work. Instead people do (still) use the back button a lot.
  2. In animation and video the Esc key is actually a commonly known interaction pattern – at least for people that regularly use the full screen mode and want to leave it with the push of one button.

So to sum it up: usually people won't expect the Esc keyto work but your use case of having animation pages could actually suggest to at least offer this functionality for those, that are used to "leave the animation" with a push of Esc.

(see also "Is the browser back button still the second most used navigation feature?" for some further thoughts and links)

2
  • 2
    I think to clarify this: ESC is used where there isn't any navigation at all using a website (such as full screen video) - its also a gaming standard for 'close'.
    – PhillipW
    Aug 31, 2014 at 21:41
  • @PhillipW I remember using ESC a lot to close stuff in DOS.
    – user109724
    Aug 27, 2018 at 20:44
2

In general, Esc aborts an action (uploads, page loads, anything in progress) or is used to regain control over the interface (fullscreen, video playback). Those are the contexts in which users will have used it, if ever at all even for these.

The way to implement it is as an augmentation to allow keyboard focused users additional control. You can implement it with the off-chance that for some users it will be a surprising, positive, user interface interaction. While for the rest of users, it will not matter if this interaction feature remains undiscovered.

However, keep in mind to use it with aforementioned common uses. Based on those observations, using Esc to go back in browsing history seems unintuitive to me, as the user is neither aborting nor regaining control. In fact, the backspace button might seem a better fit and in line with browser implementations for going back in history.

The best way to assert if users "get it" or use it is to implement a simple tracking of the click event. If you feel the benefit for power users justifies pushing the feature, you can also nudge users towards using it, for example by cues like a little text next to an icon that they would interact with my mouse, for example:

[x] (or press Esc)

However, be aware that implementing domain-specific behaviour is rarely a good idea, as it adds additional cognitive overhead and has to be learned in the first place.

1

The Esc key is a good idea for dialogs, as some users expect that a dialog box will close with Esc. For example, Win32 (Windows) and Cocoa (OS X) dialog boxes close with Esc so including this in your website will make the site more seamless.

3
  • Both of the contexts you mention are desktop contexts. Do you have any evidence to suggest that the principle translates to a web context like the OP asks? Aug 31, 2014 at 19:02
  • 2
    I think JS lightbox (overlayed images, galleries, forms) supports ESC natively too. Not a study but an article giving +1 to this approach: uservision.co.uk/2010/07/the-charge-of-the-lightbox-brigade
    – digsrafik
    Sep 1, 2014 at 8:20
  • However, this answers would not justify using the esc key in the context mentioned in the question.
    – kontur
    May 30, 2015 at 11:21

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.