The Non-tragic History of Mouse Clicks and Contextual Menus

Left click, right click, and the potentially tragic double?click.

A person stands in an empty field with a gun. In the distance, their target’s silhouette approaches from the horizon. They pull the trigger twice with no intention to shoot a bullet, yet.

This is a history of mouse clicks, human-computer interaction, and why the double click is not used for activating a context menu in any system, including Macs, PCs, mobile devices, and websites.

The double click is meant to be a constructive action that leads to its target being opened for more viewing or augmentation. This is why double click opens files on desktops and on other UI that is meant to mimic a file system, such as Google Documents. In Google sheets, double clicking a cell tells the system that the user wants that cell to be opened/expanded for augmentation; this web app mimics a desktop program called Excel, but the use of double click for this purpose makes sense and is intuitive to the user, even once that has never used Excel.

Finally, part of the reason web apps can safely mimic the double click behavior of desktop Steffens without worrying about users not understanding is because the double click will always follow the single click for multiple reasons: 1) the user is familiar with the use cases of double click from their desktop, and 2) if single click doesn’t do anything or is slow to do something, the user will click multiple times out of frustration, impatience, or, in the case of reason #1, experimentation.

The web is a very different place from the desktop. Unlike on a desktop filesystem where a double click opens a file, takes you to a file, and a single click confirms an action on a button, users of the web have always expected a single click to fulfill both of those intentions. Single click a link to open that link. Single click a button to submit. Over the years, as web UIs became more complex, the double click has been introduced as a sort of hidden convenience: click this button in the bottom left of the video player to expand it to full screen, or just double click anyway on the video to achieve the same toggle.

The reason these conveniences work with double click is that there is no way for the double click to lead to unintended consequences, such as accidentally submitting a form or deleting the video. Instagram popularized the double click on the web version of its app by offering the convenience to like a post by double clicking the image; the system is opened for augmentation and immediately augmented. Again, there’s no way to cause a destructive consequence here, and the desired outcome is achieved intentionally via the constructive action of a double click, fitting the historical usage.

Hold on to that thought for a moment as we briefly explore the historical use of right click in desktop systems as well as web apps. On a Windows desktop, before you open a file, you might want to know more about it or see other actions you can take without opening it.

To answer your inquiry, the system provides what can be thought of as a context menu. To access this context menu, you can right-click. In the context menu that is presented, you can take an action via a single (left) click on any of the menu items to get more info on the file, delete the file, and more. The same can be achieved on Macs and other desktop operating systems via a right-click.

Macs call the right-click a secondary click, and they offer gestures, such as tapping with two fingers instead of one, as alternative means for achieving it on their modern mouse and trackpad offerings. In any case, you access the context menu via a right-click.

The same is true for accessing context menus on web apps. In any browser, you can right-click anywhere to get a context menu with actions you can take to get more information and actions about the webpage or a specific element in it. You can single (left) click one of the menu items to carry out an action or open a view with more information and/or augmentation options.

Some mature web apps choose to override the browser’s context menu with their own in order to provide their users with relevant menu items within their web app. Examples of this are all Google office apps, such as drive, sheets, docs, and slides; Figma, Canva, Miro, and so many more.

If you no longer need a file and want to keep your Drive tidy, the easiest way to delete a file is to right-click on the file. This will bring up a context menu. ?—?Business Insider’s Review of Google Drive

How do they do this?

They intercept a browser event called “contextmenu”, and they use information from that event to determine what to offer in their context menu. The “contextmenu” event is emitted by the browser only when the user right-clicks with a mouse or long presses their mobile device screen. That brings us to the right-click on mobile interfaces.

On Android you can long press to reveal the a context menu in apps that support it or any app that has text that can be selected. You can also long press apps on the home screen to get a context menu of actions you can take.

A context menu interaction object tracks Force Touch gestures on devices that support 3D Touch, and long-press gestures on devices that don’t support it.

UIKit manages all menu-related interactions and reports the selected action, if any, back to your app.

— Apple iOS developer docs for UIContextMenuInteraction

The same is true for iOS phones and Apple tablets. The same is true on any mobile device’s web browser. Effectively, the long press is the right-click. The double click, as on the web, isn’t used for much outside of conveniences (like an image on Instagram) or as a consequence of supporting multiple rapid clicks to achieve a constructive action in a UI, such as clicking the monster over and over to deal it damage. As with the web, the vast majority of actions and goals can be achieved via a single (left) click or a long press, which is the substitute for the right-click given the lack of a physical mouse.

The Role of the Double?Click

We’ve come all this way and have found no system that uses a double click to reveal a context menu. Now, let’s survey why that is; hopefully you’re still holding onto that thought from earlier.

As a user, you have three desires: #1) open/expand a view,? #2) augment a view,? #3) get more information and options about a view.

As we’ve covered, you can achieve #1 and #2 via a single click or double click on both the desktop and web. On web, you achieve #1 via a single click and #2 also via a single click. There are some conveniences that let you achieve the expansion part of #1 via a double click. On all systems, desktop and web, you achieve #3 via a right-click to reveal a context menu.

With that said, why not use double click for achieving #3? Let’s go through all three goals to investigate the issues double click for #3 may pose for the user.

For #1, we want to open or expand a view with a single (left) click on web. If we also offer double click as a means of acquiring more information/options about that view, it is highly likely that the user will frequently intentionally single left-click twice instead of qualifying for what we consider a double click. In this case, the user would open the view twice instead of the desired one, and they still wouldn’t accept #3 because their clicks are not registered or prioritized as a double click.

For #2, we want to augment a view with a single right-click. An augmentation can be to create, update, or delete a view.

Creation is not idempotent, which means multiple clicks may cause multiple records to be created.

Update can be idempotent, but that isn’t guaranteed, so multiple clicks may or may not cause side effects to propagate multiple times.

Delete is idempotent in most cases, but it is absolutely destructive and may not be able to be undone. Now, what could go wrong if the user attempts to double click a button that augments the view in one of these ways in order to achieve #3, to gain more information/options about the button?

Well, it may be obvious to you, but let’s consider this scenario from a less digital perspective. Let’s make it more real to connect back to the very real circumstances of digital clicks.

The Tragedy of the Double?Click

Think about that button as a gun. Now, picture the user standing in an empty field with that gun in their hand. To achieve #2, to shoot the gun at a target in the distance, they simply need to pull the trigger once?—?this is their single (left) click. However, if they only want to get more information and options about the gun and the target, they have to pull that same trigger on the gun twice within, let’s say, 100 milliseconds.

The user doesn’t know who the target is; it could be a serial killer coming for the user or a child playing with a toy sword and approaching the user. If the user pulls the trigger once, they will hit the target, leading to destructive consequences with side effects that propagate through the world. To be sure that the oncoming target is someone the user wants to shoot, all they have to do is pull the trigger twice at the right speed to access an audio menu that plays through speakers on the gun. One of the menu items in the current context will be purely informational about the target, giving their name, age, and whether they are on a criminal list.

The user doesn’t want to shoot an innocent kid, so they attempt to double-pull the trigger to get more information about the target before they decide whether to shoot the bullet?…

The user successfully pulled the trigger twice, but it took them 107 milliseconds. The 12 year-old boy in the distance immediately dies. Because of the silencer on the gun, the uninitiated user doesn’t realize the bullet was fired while they looked down at the trigger waiting for the audio menu to provide context about the target.

The user turns around to head home because they think the gun is malfunctioning, and they don’t want to risk shooting a child. At home, the user finds their partner being notified by police of the loss of their 12 year-old son to senseless gun violence in an empty field a couple blocks from their home.

At the trial for the user’s murder charge, their lawyers argue for murder 3. The lead lawyer argues that manufacturer negligence, not any intent of the user to kill, led to the tragic end of the user’s only child’s life. It turns out there was a button on the right side of the gun to activate the contextual audio menu, but the creators of the gun only advertised the double trigger because they believed it might be more convenient given that the user would never have to take their finger off the trigger.

Thirty minutes south of the court, another user is on the run. Their attacker isn’t too far behind. Running out of energy, the user decides to stop and take their shot at the target. They don’t have much time given the circumstances. The user rapidly pulls the gun trigger, but no bullets are fired. As danger nears, the user hears an audio emit from their gun. “Man, 34 years old. Wanted for Murder a Month Ago”.

The audio continues to enumerate various features of the gun as the user frantically attempts to stop their assailant. Unfortunately, in their panic, the user pulls the trigger twice each, faster than 100ms between each pull, hoping the bullet will dislodge. The user stumbles and falls, knocking their head on the ground. As their view darkens and the 34 year-old man walks closer, the last thing the the user hears is “To hear this menu again, rapidly pull the trigger twice.”

Moral

In 99% of cases, assume every click on the web will be a double click, and don’t build features that depend on a distinction between the two. That’s unless you don’t mind propagating unintended consequences.