7

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)

enter image description here

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?

| improve this question | | | | |
  • 2
    Is it not possible for you to have split functionality for mobile and desktop? I mean, any solution that might be provided would probably be sub-optimal, because it hinders the other platform users. Any simple click on desktop means a tap on mobile, but without a hover. And any tap-before-assigning on mobile means unnecessary steps on desktop. – Big_Chair Jan 14 at 10:15
5

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.

Popover with plus or minues controls to manage points

| improve this answer | | | | |
5

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.

| improve this answer | | | | |
  • 1
    force touch is nice, but at least half the player base are on android where I dont believe force touch is available, so they will have fall back to the time-based polyfill, which feels like the default "tap and hold". when removing points, I assume players may want to do that quickly, which is hindered by adding increased time (e.g. they may want to drop from 5/5 to 0/5 points quickly). would you still prefer this approach over just adding a couple of add/remove buttons to the tooltip for mobile users only? (splitting functionality) – Simon Jan 14 at 17:08
  • Not even all iOS devices have Force Touch – Stephen R Jan 14 at 19:06
  • @Simon My first thought was that I'd still prefer this approach even with the time based polyfill. But on the second thought with your argument about the quick response in mind, I think you're right. – chrisbergr Jan 14 at 22:05
  • Double-tap would be a quicker solution. – chrisbergr Jan 14 at 22:05
2

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.

| improve this answer | | | | |
  • "long press" on Android. – straya Jan 17 at 0:00
2

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.

| improve this answer | | | | |
-1

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.

| improve this answer | | | | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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