Alternative to right-click on mobile

Question

I'm working on a web app that is a recreation of a talent builder for a mobile game. It's a typical game talent tree, where you click to assign/remove points in a node, rinse and repeat to build out the entire tree. In the example below, I have assigned 1 point to the previous node, and now when I hover over this next node I get a tooltip indicating I have assigned 0/3 to the hovered node (and some text description of the node)

I have been testing this on desktop and have implemented left mouse click to assign a point, and right mouse click to remove a point. This all works fine and is quite intuitive.

The problem(s) I'm running into is how to handle point assign/remove if the user were to load the web page on a mobile device:

1. There is no "hover" on mobile. Hover actions occur on click, which means the user won't see the tooltip prior to clicking (which currently also assigns a point)
2. Right click to remove a point is very cumbersome on mobile, because you have to tap and hold, which is not so intuitive or natural. This is the main issue I want to solve

What would be a natural, intuitive way to assign/remove points to a node in a mobile environment, and at the same time be able to show tooltips prior to any actual assignment (i.e. the user should first be able to read and understand what theyre about to assign a point to)?

A couple of important points:

• I want to use the same method of assign/remove on both desktop and mobile, so whatever solution I come up with for the mobile environment should not be unnatural/unintuitive in a desktop environment when using an actual mouse
• Given that this is a recreation of a game that is already on mobile, it would make sense to mimic in-game behaviour as the solution. However, the game doesn't actually allow you to remove points. The only option they provide is a full reset of the entire tree using a button, which isn't great design but it is what it is

The solution I have in mind is:

1. Click to show the tooltip
2. Add Assign and Remove buttons to the tooltip, which when clicked will do the point assign/remove

This solution is not so great because even though it might make sense for mobile users, it adds an unnecessary step for desktop users. Is there a more elegant solution, besides splitting functionality?

Answer 1

I suggest just pulling all of the functionality into the popover and using actual buttons to add or subtract points. You can use a single click/tap on the node to open the popover and a single click/tap to close it (you can also add an 'X' or clickout to close).

Using buttons to manage the points provides you with the exact same functionality between mobile and desktop, doesn't force users to discover controls like right click or force press, provides intuitive controls (you know what clicking the +/- would do before you do it), and avoids technial mistakes you may have between distinguishing long press vs. short press vs. force press, etc.

Answer 2

Due to the limited control possibilities on the mobile device, it will always be the case that there will be an unnecessary extra step for the desktop user if the behaviour absolutely must be the same.

I'd suggest you to give up on this limitation.

On mobile, something called "force touch" typically work as the right click alternative.

You can do the following:

Mobile

• tap on the map creates new point
• tap on the point displays the tooltip
• tap on the x of the tooltip hides the tooltip
• force touch on the point removes the tooltip

Desktop

• click on the map creates new point
• hover over the point shows the tooltip temporary
• click on the point displays the tooltip
• click on the x of the tooltip hides the tooltip
• right click on the point removes the point

This is similar behavior accoring to the capabilities of the device. It feels very intuitive (opinion) and you can guess that players of the game are more tech-savvy than default users of "normal" websites.

Also you can explain the possible actions during some kind of loading screen up front.

A quick google search for possibilities to use force touch on websites gave me https://pressurejs.com/ as a Javascript library, but I guess there are some more alternatives out there.

Answer 3

I agree that forcing the same interaction pattern on mobile and desktop will be sub-optimal for one or the other, if not both.

How many points are there at maximum in a node? If there are no more than 3 points, it would be possible to cycle through all values by simple click: 1, 2, 3, 0, 1, 2, etc.

You could keep this pattern on desktop and still keep the right-click option to remove a point more quickly.

A mobile-oriented pattern would be to slide up to add points, slide down to remove points (with a barely visible slide appearing on touch to support discovery of the interaction). On desktop, the slide could appear on hover, and the user can move the cursor using the pointer, keyboard shortcuts (plus/minus, up/down arrow) or mouse buttons.

To display a tooltip on mobile, I would use Force touch on Apple device and long touch on Android.

Answer 4

I would use a "shift key" approach. For example: down in the lower left corner of the screen, have a Red X. A default tap on a Node assigns a point. If you hold the X, a tap on a node removes a point. An alternate is a "sticky shift" button, which is the same concept but doable with one finger. Tap the X, then a node, to remove a point; otherwise tapping a node adds a point.

On Desktop, use right/left click. I'm going to agree with multiple other responders who have suggested you don't want to limit yourself to identical interfaces on desktop/mobile. That requirement reminds me of the early days of web design, when designers reflexively tried to treat web pages exactly the same as print.

Answer 5

I have no use for games, but as this request pertains to expanding SP (smart phone) functionality, and efficiency thereof, I would suggest that, among many other Desktop functions missing or slower in SPs, why not enable a double press on the volume up button to optionally be assigned to provide the right click function, with menus. And why that itself cannot enable the creation of folders, and of shortcuts, including a "Send to" one, into which you can place shortcuts to folders and even apps, to which you can send applicable files to?

Almost every comparable function my desktop provides is slower on my Android Galaxy a53, and many are missing.

Answer 6

Starting with desktop limits you in mobile. The real solution might be not in tring to find the alternative but in listing all user posible actions before you starn any design. If you make the complete list of user actions I'll try to help you with solution that will be sutable both for mobile and descktop.