With the latest release of our modeler we updated our scroll / zoom interaction. While it was previously zooming that got activated using the mouse wheel it is now vertical scrolling.
Question: What would be your preferred behavior?
Google Maps style: Mouse wheel zooms, vertical/horizontal scrolling via modifier keys
Web style: Mouse wheel scrolls vertically, CRTL + mouse wheel zooms, horizontal scroll via another modifier key?
Your feedback helps us to build a better user experience.
Update (2017-12-15)
As of bpmn-io/diagram-js#240 we’re moving to scrolling as the default mouse wheel action to better align with default application behaviors. This restores support for proper track pad / touch pad two-finger gestures for scrolling and zooming, too.
“Replacing” scrolling via zoom out + zoom in has the benefit of getting an overview over the diagram after zooming out. I imagine finding the part where you want to scroll/zoom to is easier then and faster as well.
I find the answer less obvious. Google Maps style zooming and dragging is great for viewing large models.
For editing models though, I prefer Web style combined with a draggable canvas, because:
This style of scrolling is commonly known not only from Wen browsers, but also from desktop publishing and modelling tools that need to deal with large models while dragging is reserved for moving elements within these models
During modelling you don’t change the abstraction level (zoom) all the time. You mostly add shapes to a part of the model. If you runs out of space zooming doesn’t help. More helpful would be automatic scrolling once the edge of the screen is reached.
Dragging the canvas helps when it is visible.
In large collaborations the canvas is mostly hidden behind pools & lanes. In this situation it is indeed annoying when dragging moves a pool or a lane. Same holds true when you want to use the lasso tool to select elements inside a pool but instead accidentally move a pool or lane. This could be an argument to treat pools, lanes and maybe even sub-processes differently for dragging.
Horizontal scrolling should also be usable from multi-touch touchpads and mice with horizontal mouse wheels, which make it more easy to use.
Scrolling via mouse wheel allows to precisely scroll in one direction (exactly vertical or exactly horizontal).
A problem of zooming via CTRL + mouse wheel is that it is caught by the Web browser if bpmn.io is embedded into a Web page.
So how about different behaviour for viewing and editing? Does anybody see problems for other use cases?
Your feedback confirms my feeling that there is no easy solution for this issue. Because of that we reverted the scrolling interaction back to the old behavior (Maps style).
If there is one really bad thing we can do then it is to change change between these modes with every release.
I think two modes for viewing / modeling would be too much context switching.
Being able to zoom out to view the complete model and then zoom back in to exactly the part you’re interested in without needing to use the keyboard at all is very freeing - Feels like you have complete control of the canvas.
(also because dragging to scroll doesn’t work within pools yet - I’ve tended to use the scroll zoom out a lot so i can drag outside of a large pool)
Either option, by itself, lends to bad user experiences.Context is key.
There should a visual indicator indicating in which mode is the scrolling being used: zoom, movement, nothing, etc.
By default it should be “nothing”. The user should be able to choose to leave his choice always selected.
Sometimes zooming is appropriate and pressing and holding the touch/middle/wheel button to move is the intended option.
Sometimes is the complete opposite.
Don’t forget there are now several, multiple, devices: touchscreen, touchpad, mouse, forward/backward wheel, lateral wheel, multi-directional wheel or “magic eye”; magic mouse, etc. Each of these (when the device information is supplied) should be able to be configured differently.
Bad UX experiences:
You might be scrolling the page holding the canvas when you mistakenly cross the diagram, changing position and zoom;
You have a big diagram and you want to see certain details but the zone of interest is outside of the visible canvas when you zoom in.
I hope this not confusing.
I would recommend you leaving all options open as much as you can.
There is no “right” answer for this question.
Hi,
could you please add support for dragging the canvas (same as now with ctrl + left mouse button) with middle mouse button?
I love the modeler but this is really painful, every time when I work with modeler I forget that this feature is missing and first use (unintentionally) middle mouse button for dragging and then after I realize that it is not supported I use ctrl + left mouse button, but this is not a pleasure experience.
Thanks
Edit: PS: I did not find a better place to place this request :X
