Radiology Viewer: Figure out better solution for manipulating image controls

[mairin]

Generally with the mockups the model we're following is somewhat like that of a photo processing tool like Darktable or Adobe Lightroom - the workflows are similar, as you first have to select a subset out of a large collection of image data (in this case '4D' studies rather than single images, which complicates some things), and then you investigate each selection (study) in detail and apply some filters / manipulations on it.

Where following this model falls apart is providing good contextual controls over the viewing controls / filters / manipulations. There are two main ways I can think of to provide such controls:

1. In a sidebar.

Image manipulation tools like Gimp / Photoshop / etc do this to great effect. However, they are single document or tabbed single document windows, so there is no question what specific image the controls relate to. Here, we have multiple images and one set of controls, so there's always a stress of allowing the user to select which of the images is manipulated by the controls, and having that selection be very clear! There is a lot of potential for confusion and mistakes if this isn't done properly.

2. Per image, right inside / next to the image.

This puts the controls closest to the image they effect, so the challenge of the selection task + clarity of what is selected is no longer an issue, but a new issue is introduced - the controls covering the image itself, which you need to see as you modify the controls (they are instant apply).

In issue #1, we talked about this last option, per image / in context, being the best to pursue:

Controls directly on the image within this multi-paned screen. This is what I tried: I agree the little slide in sidebar is too little. I have a couple of alternative ideas for how this could work if that can't be scaled appropriately:

• (A) the controls are laid out on a partially transparent HUD that maybe covers the whole image. This is problematic because even if transparent there may be area of the image that as the user manipulates the controls, they want to observe but the controls or transparent layer obscure them.
• (B) instead of having the entire panel of controls one large object that can be shown/hidden, having each individual control have the ability to be shown hidden. so each separate control is like a 'drawer', and you can have multiple open at once if want or just the one you're interested in.

@NicolasRannou also suggested what we'll call (c):

• (C) Having a dropdown menu at the top or vertical tabs only show one element at the time?

We need an iteration of the above design to explore (a), (b), and (c) as potential better solutions.

[NicolasRannou]

The more I think about it the most I am leaning towards (A) / (B) will start experimenting with you mock ups!

[mairin]

I was working with Blender recently and am not sure why I never thought about this problem in the context of how Blender handles it. Blender's interface is a little wacky (but I think most 3D suites' UIs are?) By default, Blender has both a side bar and per view panel sidebars! The main sidebar has global controls / settings... the per view pane sidebars apply to the selected object (which is persistent across panes, so the effect of the sidebar doesn't map directly to the pane conceptually, but in practice I think that is how most artists set it up.

One interesting thing is how Blender handles these per-viewing pane sidebars (btw Blender has infinite viewing panes :) ) - you drag a <=> arrow to hide them, and when they are hidden a [+] tab appears (see below)

One other principle from Blender that might be useful... when you open the per pane sidebar it crops +scales the view rather than overlay on top. Maybe a better behavior for the inline sidebars?