Designs for tiling with a mouse

[maria-komarova]

While using auto-tiling one should be able to move windows around both with the keyboard and with the mouse. New designs below show a few adjustments to how one can drag a window with the mouse to tile compared to the current Pop!_OS. There are a couple goals behind those adjustments:

• One of the goals we were pursuing with the new designs is to allow people more flexibility in what kinds of layouts they can quickly create. It has been mentioned in the past that forming a three-column layout, for example, is difficult with the current auto-tiling. So were trying to make it easier to form layouts like that.
• Another goal we had was making it easier for people to recognize the outcome of an action. We have learned about the confusion people experienced when trying to either tile or stack a window. It wasn't always clear what effect the action will have despite the overlay indicating a future tile. Sometimes one would try to stack a window but the window would tile next to it instead.

Designs

The mockup below shows the window being dragged around. This is a prototype made in the design program so the content inside the windows on these mockups is merely a placeholder. But it shows what should happen when one hovers over various areas of one of the tiled windows, between windows and between window group borders. It also shows that windows should zoom out a little and that indicators around window groups should appear.

When the window is grabbed and taken out of its current place

• The wallpaper gets a black overlay of 90% opacity, similar to designs for moving a tiled window with the keyboard.
• The tile where it has been is shown as an overlay (#565656 at 60% opacity in the mockups).
• All the windows zoom out with the same spacing between each window, each window group, and padding inside each window group (32px on the mockups that assume 1920 x 1080 display). This spacing is larger for tiling a window with the mouse to increase the width of the target zones between windows. Ideally, the spacing might need to depend on the display so we'll probably need to figure out the heuristic for this. There might also be more refinements to the sizes as we do more usability testing.
• Window groups hat have more than one window are shown with the borders around them. Group indicators should make it easier for people to target tiling inside the group or between groups.

Types of indicators

There are three different types of indicators for the intended window placement:

• Overlay that shows resulting window placement when splitting the existing tile occupied by another window.
  
• Future window stack indicator that includes an overlay above the tile occupied by another window with active hint around it and a tooltip that appears under the cursor.
  
• Pill-shaped indicators to show resulting window placement between windows and between groups. Those indicators should be 2x less width than the spacing between windows (16px on the mockups).
  

Target Zones

• Use the cursor placement to trigger the target zones around the display.
• Target zones should be triggered after a small delay of 0.1 seconds. This is when the indicator should appear. Keep displaying the indicator until the cursor has left the target area.
• Target zones on top of the existing window (same as in current Pop!_OS).
  
• Target zones resize dynamically to include the pill-indicators. When the pill indicator shows between windows or groups, the target zone where it shows increases to reach from border to border (window or group). Other target zones should adjust accordingly.
  

The designs will require more usability testing and refinement once there is an implemented version.

[maria-komarova]

The designs have been adjusted to account for the changes to the keyboard tiling designs.

The details about the changes could be seen in Figma.

A few changes to the Target zones:

• Use the cursor placement to trigger the target zones around the display.
• Target zones should be triggered after a small delay of 50ms. This is when the indicator for future window locatioin should appear (either a pill between existing windows and groups or the new tile background (same background as current window tile). Keep displaying the indicator until the cursor has left the target area.
  If we can adjust the target zones for splitting the existing window to be more like the following diagram, that might help too:
  

[phisch]

@maria-komarova I noticed that this design doesn't allow for the use-case of just switching 2 windows, which is very common for me. While many existing tiling window managers and compositors allow this by just dragging and dropping a window onto the center of another, which currently would stack them.

According to @Drakulix, you wanted to make the stacking functionality more accessible and discoverable. I do like this, but not at the cost of switching windows.

My suggestion would be to use the center target area for switching windows, and using it for stacking while holding a modifier key.

Maybe there is a better way to make it discoverable.

[maria-komarova]

Thanks for the feedback, I'll take another look at switching windows. Could you describe the situations when you swap windows with the mouse so that I can better visualize the experience?

What we have in the designs for COSMIC is building on top of what we currently have in Pop!_OS. Stacking is also triggered there when someone drags over the center of a window while the window is split when one drags over either of the edges. The new designs are trying to better differentiate between stacking and splitting a window. So it is making stacking easier to recognize rather than more accessible in general. We know that a lot of our users use stacking and it seemed important to leave the functionality that people are used to available.

[phisch]

Could you describe the situations when you swap windows with the mouse so that I can better visualize the experience?

There isn't a whole lot to explain, I have an arbitrary layout, like a simple 2x2 grid, and i want to switch either two of the windows.

We know that a lot of our users use stacking and it seemed important to leave the functionality that people are used to available.

Makes perfect sense. I was just missing a way to quickly switch out two windows without having to re-arrange a lot.