14

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.

  • 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 '14 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 '14 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. – Michael Hampton Sep 1 '14 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! – Tom Walters Sep 1 '14 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 '15 at 11:23
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
    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 '14 at 21:41
  • @PhillipW I remember using ESC a lot to close stuff in DOS. – gerstemout Aug 27 '18 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.

  • 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? – Graham Herrli Aug 31 '14 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 '14 at 8:20
  • However, this answers would not justify using the esc key in the context mentioned in the question. – kontur May 30 '15 at 11:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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