Differentiate between selecting a tree node and expanding it

Question

We're doing a tree view for navigating through a hierarchical data structure. Technically speaking it's a JSTree javascript based application.

Clicking on the arrows expands/collapses the nodes and clicking the text is supposed to take you to a separate page for that node. This works fairly well on a desktop since it's easy to click on the arrow specifically. Our users will not be technically advanced though, so this might be too hard even on a desktop.

On a mobile device, it's hard even for experienced users to click the arrow, it's very easy to click the text instead, which would take you to another page which will be very irritating.

Is there a best practice for this kind of situation? My best idea is to make the whole text expand/collapse and add a separate button for going to the node page, but that's not ideal either.

Answer 1

What about the following: differentiate between a short and long touch. A short touch can expand (and collapse) the tree nodes, while long touch takes the user to the respective page.

Of course this user interface has to be taught to the users. In this case, in the beginning (first couple short touches) you can show a balloon telling:

Press and hold to navigate to the page for this item

And once this action has been successfully performed by the user, it means they know their way.