3

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.

5
  • I don't see anything on hover for the link you provided, so it's difficult to say. Mar 26, 2012 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, 2012 at 16:49
  • Which interaction do you need to fix?
    – dnbrv
    Mar 26, 2012 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, 2012 at 8:59
  • @dnbrv: We need to fix the navigation interaction as we can't hover.
    – Ian
    Mar 28, 2012 at 8:59

3 Answers 3

1

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

1
  • 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, 2012 at 9:00
1

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!)

4
  • 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, 2012 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, 2012 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, 2012 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, 2012 at 0:24
0

Wrap the entire chart in a persistently visible toolbar?

3
  • How would that help?
    – dnbrv
    Mar 26, 2012 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, 2012 at 15:34
  • It's an option, but not a particularly nice one.
    – Ian
    Mar 28, 2012 at 9:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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