Interaction discoverability

[alexcjohnson]

A discussion started in #1432 about how to help new users discover all the available interactions in our plots. Particularly the doubleclick interactions, which we're adding a new one of there, but it could apply to some of the less obvious single-click interactions like clicking an axis end to type a new value, or dragging from the corner just outside the plot to zoom the corresponding ends of both x and y. We try to hint at these by changing the cursor when you happen to mouse over the region, but I'm not sure how many people notice that.

Doubleclick interactions we currently describe with Lib.notifier when you do some related thing, but nobody really likes them. They're aimed at new users, but these users might not even notice them the one and only time they appear, while experienced users probably just get annoyed by them.

In prehistoric times we had what we called a "lightbox" that you could turn on to frame each clickable or draggable element in a colored box, adding correspondingly colored notes about what you could do in each box. We could resurrect something like that?

Would love to get some more input on this - @cldougl @delekru @chriddyp @jackparmer @etpinard any ideas?

[cldougl]

They're aimed at new users, but these users might not even notice them the one and only time they appear, while experienced users probably just get annoyed by them.

completely agree with both of those points^

I really like the "lightbox" idea! I find color coordination/colored highlighting pretty easy to absorb for new users (and less annoying as an experienced user).

[jackparmer]

I always felt evangelical about the "lightbox" feature. It could be toggled with flashlight icon in the modebar:

https://github.com/plotly/streambed/issues/3492

I observe a lot of pain in zooming by first time users, particularly:
(1) Not knowing you can zoom in the first place
(2) Not knowing how to zoom back out once they've (likely accidentally) zoomed in

[chriddyp]

I think that adding hints in the zoom and autoscale icons would be really helpful too.

Right now, it's just this:

But what if it hinted at the shortcut too, like:

Zoom in
(click and drag)

Autoscale
(double click)

Pan
(shift, click, and drag)

[chriddyp]

@cpsievert @rreusser and @monfera might have some ideas or references too

[rreusser]

👍 for shortcut hints in the tooltips, where applicable. It's discoverable for new users and pretty unobtrusive for experienced users, which is a plus.

For hidden interactions like double click though, the lightbox idea seems nice (if not just necessary). The only other thing I can think of is just a modal dialog that just lists the shortcuts. Not as pretty but sure is easy.

[jackparmer]

The 2012 lightbox feature did something like this:

Plotly.d3.selectAll('.drag')
    .attr('stroke','rgba(0,0,255,1)')
    .attr('stroke-width',3)
    .style('fill','rgba(0,0,255,0.5)')

To toggle-highlights draggable and clickable "hot spots" on the graph:

But different colors were used for different types of hot spots, and the legend was involved as well.

You could hover over these colored hot spot areas and get a little tooltip about what they do.

While we're on the modebar subject, Bokeh has an explicit wheel zoom and box zoom mode on their modebar. The Bokeh modebar also tells you which interaction mode you're in with a blue underline. To me, this reduces confusion ("am I zooming by scroll or zooming by drag selection, or both"). It may also make sense to consider separating these zoom modes in Plotly.js and/or adding a clearer indicator about which mode you're in:

[jamesmstone]

As an interim, is it possible to completely hide/disable the notifier?

In my eyes, a nice solution would be to allow custom styles and or messages. Maybe that functionality could be provided by an event, so should one choose, they could create their own notifier.

As an aside: Thanks for a great library!

[gvwilson]

Hi - this issue has been sitting for a while, so as part of our effort to tidy up our public repositories I'm going to close it. If it's still a concern, we'd be grateful if you could open a new issue (with a short reproducible example if appropriate) so that we can add it to our stack. Cheers - @gvwilson