I have a website that has an editable table with data in it.

Is capturing F5 to refresh data (with clear notification that the data was refreshed) instead of refreshing the entire page bad user experience?

Can we assume that users who know about F5 also know about CtrlR? Should i come up with another keyboard shortcut such as CtrlAltR instead?

  • 116
    I would argue that this question is equivalent to "Is breaking expected behavior bad UX?" to which the obvious answer is "yes". – msanford Nov 15 '17 at 14:30
  • 18
    On Mac F5 does not have that meaning. – Thorbjørn Ravn Andersen Nov 15 '17 at 18:49
  • 4
    Why would you assume that any of these are not unique to a particular browser, if not actually configurable by the user? – jamesqf Nov 16 '17 at 5:37
  • 7
    Merely an anecdote: I was working with Lotus 1-2-3 some years ago, and it had existed since the age of the dinosaurs. I was already used to pressing F5 for refresh, but with Lotus, F5 was (and always had been) used for Logout. So every time I went to refresh my emails... logged out. Hugely frustrating. F9 was refresh for Lotus. It worked in isolation, but as soon as you start fighting against whatever has become user expectation, you start frustrating your users. – flith Nov 16 '17 at 9:08
  • 10
    I once used a website which had done exactly that... my F5 was captured and the website showed me that it was fetching it's (maybe updated) content via ajax. My reaction was hitting CTRL+F5 instantly. If i wanna reload the site, you better let me reload the page or i will be mad at you. (Side note: I never knew that CTRL+R also refreshes the page :D) – Mischa Nov 16 '17 at 15:14
up vote 116 down vote accepted

Repurposing familiar controls to do other things is generally a bad idea as it simply means that they don't behave as the user expects them to.

If you are augmenting a control set then it's best to avoid existing controls and add new ones. That way, the controls that users are familiar with will behave as expected.

  • 4
    Does this apply to redefining e.g. the right click as many web applications do? – Pierre Arlaud Nov 15 '17 at 13:57
  • 42
    But there you have the problem. People may interact with your site and be annoyed by the site taking over keys. They press F1 to look up in the browser help if they can disable this (Firefox will introduce such a function soon) and then your site intercepts even this key. Never change something users are used to. Even overriding right click menus is bad UX, despite many sites doing so. And do you remember onrightclick=alert("don't steal my source code!")? – allo Nov 15 '17 at 14:44
  • 28
    @PierreArlaud The right click is always contextual - it's purpose is to give you a menu that is relevant for where the click happened. This is a pattern that users are familiar with - they a familiar with the fact that the right click menu will change relative to the click action. Therefore the pattern does not change. – Andrew Martin Nov 15 '17 at 14:59
  • 29
    @AndrewMartin It's still an astonishment. Why am I getting a flash player contextual menu when I was trying to download the background image? Besides, my question was pretty rhethorical, although I do agree it's really annoying that for instance the web client for outlook redefines Ctrl-R as a "reply" command. – Pierre Arlaud Nov 15 '17 at 15:34
  • 14
    @PierreArlaud In my opinion, the problem is more complex than that. This is a problem of websites becoming applications, and browser - a framework for them. How would you design Google Docs app without a custom context menu? – cubuspl42 Nov 15 '17 at 20:15

Taking over existing keyboard shortcuts (in the scope of the application the user is working in) is a horrible idea.

You don't explicitly state it, but I think your application is browser based. Since, in the context of the browser, F5 is an existing keyboard shortcut (a common one, at that), it is a bad idea.

From personal experience - I had Norton AV installed and my subscription had expired. I didn't want to renew immediately. After it expired, the app took over the F5 shortcut as such that when I pressed it, it loaded an "always on top" modal with the Norton renewal advertisements. It did this regardless of what app I was using at the time. This was so intrusive to the standard behavior i was expecting, I ended up uninstalling and stopped all of my business with the company.

This inconsistency between the behavior I expected and what actually happened creates a feeling of friction against the task I am trying to accomplish. I am one of those people who can physically feel the energy drain from my body when this type of friction occurs, which in turn, can cause your users to leave.

It would almost be like adding a new car stereo to your car that took over the gas-pedal as a way to increase or lower the volume. It's an extreme example, I know, but that's how these things feel to me.

For another example... in Chrome, in the past, the backspace button could be used to take the user back to the last page they were on (equivalent to hitting the back button on the browser). They disabled that, in favor of the proper Alt+back arrow. Thousands of Chrome users took to the support forums to protest.

Instead, perhaps have a refresh icon or button next to (or above/below) the table which a user can focus to with a single TAB key press when currently focused on/working on the grid. Once it is focused, Enter (or a click with the mouse) should trigger it. If you must, you can create a new keyboard shortcut to activate it as well, ensuring that it isn't one that is already assigned to a behavior already by the browser.

  • 30
    Off-topic comment, but just goes to show that the antivirus can easily be as bad as some of the malware it's supposed to keep out... – RomanSt Nov 15 '17 at 16:10
  • 30
    @RomanSt Norton antivirus has famously detected itself as a virus in the past. :) – Masked Man Nov 15 '17 at 16:44
  • 16
    Backspace key was a bad example; that was just a bug from the beginning. A key which does something dangerously different depending on whether focus is on in a text input box or something else is atrociously bad UX. – R.. Nov 16 '17 at 23:57
  • 8
    Related xkcd: Borrow Your Laptop – Ooker Nov 17 '17 at 3:03
  • 1
    Just my two-cents in regards to Chrome's decision to use Alt + back arrow exclusively. There have been plenty of times in which I am working on a form, tabbing/shift+tabbing from one field to another, and at some point I wish to simply delete the contents of a field. Normally this works but sometimes I end up on some sort of click-able text, icon, question mark, etc and bamm-o! by the time I look up from the keyboard I have magically ended up on some web page from hours ago and all of my form data is lost even though I press forward until I return to my form. I support Google's decision. – MonkeyZeus Nov 18 '17 at 20:42

Always follow the principle of least astonishment. The use of F5 in this situation would be considered astonishing.

There are cases when keys should be overridden in order to provide the least surprising behaviour. A common case is applications that are traditionally desktop based but are now running in a browser window that acts as a thin shell. In this case it would be logical to override (ctrl/cmd/super)O to open a document as part of your application rather than within the browser.


In your particular case, I wonder if it's necessary for the user to manually refresh the table. It may be better for the data to automagically update so that it's always current. If a user's changes need to be explicitly committed then an override of (ctrl/cmd/super)S to perform this action would make sense.

The only time I have ever done this, was with an internal systems diagnostic web page that allowed admin users to enter raw a raw SQL query to run against a database.

The users were accustomed to using SQL Server Management Studio, which executed the query using the F5 shortcut. Users complained that pressing F5 would refresh the page, making them lose their query. Pressing F5 was so ingrained in muscle memory for them that, even though they knew it would refresh the page, they hit that key automatically to run the query.

After updating the page to capture F5 and cause it to run the query instead, the users were much happier.

  • 2
    alternative solutions would be to a) ask the user if he wants to leave the page when a query is in the page (onbeforeunload) or b) to save the query in localStorage and restore it after reloading the page – Leon Adler Nov 17 '17 at 15:19

There are times when it is acceptable to "capture" controls to do common things the browser didn't intend to do. But they are very limited. They should not be a rule of thumb but an exception.

For example if you press F5 while adding an answer you get a dialog asking "Are you sure" (essentially). While "capturing" the navigate away from page (the refresh) is generally bad, in this case it's a good thing.

Other really good examples are right click context menus in complicated web applications. For example Reports that intercept right click to "download as PDF" or "download as Excel". May WYSIWYG text editors capture and replace the right click.

If used very carefully, it can be a great tool. If abused it can make you UX worse then a puppy-murdering cannibal. The trick is to only do it when nothing else makes sense. When there is no other way, and when your 100% certain that the original action is not the action the user would actually want.

P.S. For this answer I'm not counting the fact that the the dialog happens on navigation and not on key press, just that it pops if you smash F5.

The other answers make it clear that breaking expected behaviour is bad UX. I would like to make the additional point that you do not know what the user's keyboard looks like, and what their existing keyboard shortcuts are: defining keyboard shortcuts with no way to change them is also bad UX.

It is therefore good practice to implement keyboard shortcuts as follows:

  1. Your web application defines several actions, such as "Refresh table" or "Move to next table"
  2. Your web application binds these actions to sensible default keys, such as r for "Refresh table" and n for "Move to next table".
  3. The user can adjust the keybindings in the web application's settings.

Two examples:

  • An Ukrainian user might want to bind "Move next table" to the д key, for дальший.
  • A user of the Vivaldi browser might have r (for 'rectangle') already bound to "Capture Area to File"; now they can't refresh a table without entering screenshot mode. They enter your settings, and bind "Refresh table" to u (for 'update), instead.

Having established that changing the action of well-established keyboard shortcuts is bad UX, here is a suggestion for better UX:

Detect when the user has pressed F5 or Cmd-R to reload the page, and show them a "did you know?" popup to advertise your custom keyboard shortcut:

You can press Ctrl Alt R at any time to quickly refresh the table data

#discoverability

You might also want to reduce the annoyance of this popup by: only showing it once per day, or only on pages with a table, or only until the user has used the shortcut a few times.

It is usually executed poorly and/or in an attempt to enforce some kind of DRM/"stealing" protection. When I do intercept the default controls in the browser, it's only to fix glitches that sometimes appear with a complicated AJAX-driven layout changing what the user sees. For example when the mouse wheel or the arrows scroll the wrong part of the page instead of what has been overlaid by the script. Then I also hooked the ESC key that normally aborts the loading of the page and stops GIF animations to only abort and close the thing loading in an overlay. I also changed the drag behavior from its default drag-and-drop to something like what you see on Maps sites. It will control the scrolling. But I still offer the user the option to select between viewing modes and these wild features are disabled by default.

  • Pages that hook ESC annoy me. – Phil Nov 20 '17 at 6:10
  • If they are ad popups, yes. My implementation is useful though and I wager you would use it naturally as I intended it and you wouldn't even realize your hate could be triggered. Plus only the first press is hooked to close the overlay; the next one is already handled by the browser normally. – Zdenek Nov 21 '17 at 21:04
  • Yes, it's generally pages that use JS for obnoxious reasons, for instance initially displaying the content and then deciding they don't like the fact I use an adblocker so will yank the content and replace it with a whinge. If the original use of JS isn't obnoxious, then I probably don't want to kill it off. – Phil Dec 5 '17 at 5:27

For the specific case of F5/reload, I would instead recommend implementing a service worker for your site, which would handle local caching of all your page's assets.

This way, the page won't be refreshed (from the server) unless you specify it, whereas the data will always be updated.

For the user, the effect is exactly the one you want - only the data is refreshed. But the expected functionality remains in place, as it should from a UX POV.

  • 1
    The problem with this is that if I as a user press F5 and I don't see the data change because it's cached locally, I will feel like the page is broken. Even if I only loaded the page 5 seconds ago and the data is autorenewed every 15 seconds, I still want to see the data refresh, especially if it's time-based data. Like, if your page shows something's progression or someone's location, if I refresh the page, i want up to date information. I don't want to see the situation from 60 seconds ago, especially if I loaded the page 10 seconds ago. Apple Find my Friends does that and it pisses me off. – Nzall Nov 20 '17 at 13:37

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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