With the increasing adoption of touch screen devices we identified a chart in our product that doesn't work very well on the web and we are trying to decide on the best method of interaction.

Our chart is similar to this JIT Demo, previously we used a
Right Click = Centre a Node and
Left Click = navigator to URL of an element.

We changed to try and remove the right click to try and comply more with web standards. Currently we have a
Left Click = Centre a Node and a
Hover with tooltip = navigate.

However we obviously discovered that a hover can't be done on a touch screen device. Does anyone have any suggestions on a nice approach for this? The centring operation will either not happen, or happen prior to a navigator from the chart to another page.

  • I don't see anything on hover for the link you provided, so it's difficult to say. – Andrew Bacon Mar 26 '12 at 15:59
  • Grab an iPad and download Numbers and play with it for a while. Numbers is a touch-based spreadsheet and may give you some good ideas for interaction patterns. – DA01 Mar 26 '12 at 16:49
  • Which interaction do you need to fix? – dnbrv Mar 26 '12 at 17:36
  • @AndrewBacon: No there is no hover in the link provided - this is something we've added. In fact in the example there is no concept of navigating to a URL which is something that we allow. – Ian Mar 28 '12 at 8:59
  • @dnbrv: We need to fix the navigation interaction as we can't hover. – Ian Mar 28 '12 at 8:59

I see two options:

  1. Add a link to the selected entity (or even just change the visual and add an arrow) so the click on the link (or the second click on the entity) can navigate away
    Pro - Simple to understand
    Con - Prone to errors as taping is not always done intentionally

  2. Use long tap to bring on a menu (similar to copy / paste menu)
    Pro - No errors
    Con - Can be missed

  • I've already considered the first, this is something we can actually already do. At the moment I'm thinking of the long click (which I believe is a right click) for touch screen devices if I can determine that from the web. – Ian Mar 28 '12 at 9:00

I'm presuming your chart contents or screen size make it easier to interact with with a finger more feasible than the chart in your demo.

The easiest solution I can figure is to add a function when a node is centred that presents a "popover"-style tooltip with a "Visit URL" option or something:

Mockup of the popover behaviour

download bmml source – Wireframes created with Balsamiq Mockups

(My apologies for the crude mockup!)

  • 1
    Similar to Nurit's answer, and is something I've thought about. Often however people don't want to centre a Node to navigate to it. – Ian Mar 28 '12 at 9:05
  • 1
    You can theoretically show up the button on touch press and only centre the node on touch up to allow a touch, slide down, release interaction. Expect, though, that if you do that most users will still press twice; once to centre and once to navigate. – Kit Grose Mar 29 '12 at 0:34
  • 1
    Hmm, that's interesting, although I'd have to look at the events that the browser supports (we have to support back to IE6 and use various canvas replacement technologies). I'd +1 for the suggestion if I could. – Ian Mar 29 '12 at 8:04
  • IE6 supports all the same mouse events as modern browsers. It doesn't support the dedicated {{touch}} events, but that's OK, surely? – Kit Grose Mar 30 '12 at 0:24

Wrap the entire chart in a persistently visible toolbar?

  • How would that help? – dnbrv Mar 26 '12 at 15:25
  • You are showing what can be done with the chart (vs on hover, where nothing is indicated until action taken). – Mike Hill Mar 26 '12 at 15:34
  • It's an option, but not a particularly nice one. – Ian Mar 28 '12 at 9:00

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.