cockpit icon indicating copy to clipboard operation
cockpit copied to clipboard

Edit-mode sidebar: refine to focus on most relevant components

Open pkmiles opened this issue 1 year ago • 4 comments

Just a thought: The View Edit sidebar is pretty crammed. The reality is people are not going to be flicking from ROV to Boat to some other device. How about moving that top level (and associated functionality) across to Settings. This would then allow you to have more realestate for view selector (which could be a drop down list to save more space) and scrolling list of widgets.

I realise this stuff is probably a lot of work and these designs are mature - but thought I'd raise it!

pkmiles avatar Jan 22 '24 19:01 pkmiles

I agree, it's crammed. In regular/big screens it's maybe fine, but in the smaller ones it gets ugly, with the components stepping in each other's foots. If you have more than three views or four widgets on a view, it gets crammed even on Macbook Air screens, which are common between our users.

Right now we are focusing on the UX parts that are more critical, so all users can get Cockpit to work easily and without surprises, but I can see some space opening for that kind of change in the beginning of March.

I also agree people are probably not going to switch between vehicle profiles in the middle of a mission, and more than that, switching a profile is not "editing", so it shouldn't even be in the edit menu. Maybe the correct place for it is indeed in the configuration menu.

As this is an important change in the user workflow, I think we should do it before releasing the first stable, so I will include that on the Beta->Stable milestone, and we will find some time to work on it.

Thanks again for the feedback Peter!

rafaellehmkuhl avatar Jan 23 '24 13:01 rafaellehmkuhl

I was just about to make a related issue, and came across this one, so I'll add my thoughts here.

I think it's ok to keep the profiles in the edit menu, but I think we should change the display to be a nested tree with expanding sections - something like this: image

Benefits to this approach include:

  1. the tree/nesting depth intuitively matches the relationship between Profiles/Views/Widgets
    • i.e. the lower level elements are shown "within" the component/structure that contains them
  2. the section you're actually working in takes up most of the display area
    • the other sections can be above/below, and scrolled away from as relevant
  3. there are fewer control buttons shown at once, which helps to focus on the actual components
    • to further reduce clutter, we may want to consider only showing the configuration buttons while the mouse is hovered over the component, although I'm not sure if that could cause issues with touch-screen users

And as some advanced interaction options:

  1. views (and profiles?) could potentially be intuitively dragged and reordered within the tree, in the same way widgets can be currently
  2. widgets could be dragged between views, and/or duplicated to a different view (e.g. dragging while holding a modifier key/button)
  3. views could be dragged between profiles in the same way
  4. configuring names, icons, and other relevant details (e.g. widget positions, full screen, etc) can be done by clicking on the component (without dragging it)
    • this reduces a bunch of buttons, while still being quite intuitive

Note: I changed the bin icons to red Xs because they

  1. look cleaner,
  2. are easier to parse quickly in a cluttered space, and
  3. have an implication of permanent removal/deletion,
    • bins can sometimes imply that it's possible to retrieve/restore the thing again later if necessary

I also changed all the creation/addition/importing/duplication icons to green, to make it clearer that they add something new, and make it more obvious that the other buttons do something else.

ES-Alexander avatar Jan 26 '24 13:01 ES-Alexander

Wow. This actually looks very good!

rafaellehmkuhl avatar Jan 26 '24 13:01 rafaellehmkuhl

Yep. awesome.

pkmiles avatar Jan 26 '24 23:01 pkmiles

@ArturoManzoli this one was marked as Done by mistake, right?

rafaellehmkuhl avatar Jul 02 '24 16:07 rafaellehmkuhl

@ArturoManzoli this one was marked as Done by mistake, right?

Yes, it was a mistake. Thanks for reopening

ArturoManzoli avatar Jul 02 '24 17:07 ArturoManzoli