So, barring Google Drive and some other applications, it seems to be mostly seen as a no-no to override the browser's default right-click context menu. The pattern that seems to have emerged in lieu of this is to present a "more" button that the user clicks with their primary mouse button, that brings up a secondary interface (context menu, sidebar, bottom sheet, etc.).
I dislike this pattern however, because it takes up real-estate and draws the user's attention away from the main content. I personally find the pattern to be rather disorienting, especially when you're dealing with a grid of items rather than a vertical list.
I think a good alternative to the "more" buttons is to provide "long-press" options. This functionality can be supported across basically every browser on every device, since its technical implementation is simply a setTimeout
call.
Unfortunately, because the "more" buttons are so pervasive and the long-press functionality is so un-pervasive (in the world wide web at least). I'm struggling to find the best way to educate our users about this functionality.
Here is what I've come up with so far:
The idea is that throughout the App, when you see the touch icon on an item inside of a list, it indicates that the items can all be long-pressed. This takes up less real-estate than having "more" buttons on every single item, since only the first items in the lists have the hint. If you're on a device with a mouse, then hovering over the "touch" icons provides a tool-tip with some context.
In this specific example, clicking/tapping the cards takes you to the items dedicated viewing page, but long-pressing the cards keeps you on the same page and brings up a sidebar/bottom sheet (depending on screen width)
Can you list some shortcomings with the pattern I've come up with? How can the pattern above be improved?