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?
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.
onrightclick=alert("don't steal my source code!")?
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.
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.
onbeforeunload) or b) to save the query in localStorage and restore it after reloading the page
Commented
Nov 17, 2017 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:
Two examples:
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.
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.
