Change design of pane tabs for them to look different to the tabs of the console and editor

[ccordoba12]

I think we could use rounded, colored tabs like the ones used by this app:

https://snapcraft.io/blog/canonical-enables-linux-desktop-app-support-with-flutter

[isabela-pf]

For clarification why I think this needs to be updated, I’ve circled the areas that are both called and designed to look like tabs. Since they control different things depending if they are on the top or bottom of a pane, it can be confusing that they share this name and visual language.

Here are some proposals for ways to visually distinguish the lower tabs (the ones that control what panes are visible in a section) from their counterparts.

The first two mockups change the tabs to detached buttons. They differ in highlighted button color and a fill versus outlined state when not selected.

The following two mockups use text-only buttons with different selected and deselected styling.

I think any of these approaches could work, it mostly depends if text-only buttons seem sufficient in a UI that doesn’t use them yet.

[isabela-pf]

I’ve also added more space between pane options, which means that not all panes that belong in that area can been seen at once. This necessitated adding a button to scroll through pane options in the upper right area. I’m not sure if this is the best approach, so feedback is welcome (as always).

[isabela-pf]

Feedback from the last round showed interest in the text-only buttons with blue highlights, but also agreed with the concerns I brought up about text-only buttons not yet existing in Spyder and maybe being confused for non-clickable text.

These mockups try a toggle-inspired UI approach that limits the number of elements (like lines) that can clutter the small area, but still gives more indication that they are buttons than text alone.

There are three design elements (shown across mockups) I’d like to review in this iteration:

1. Toggle-inspired buttons
2. Background colors for this region of buttons (this is shown as the toggle area, but even if we decide against toggle-inspired styling this area could have a different color to distinguish it)
3. Divider lines between buttons

(The above mockup is the iteration I think integrates best with current Spyder UI).

I’ve been testing out three possible background colors for this: #071620 (which is not already in Spyder), #32414B, and #505F69. My favorite has been #32414B, however I’m not sure it has enough contrast from the blue highlight (#1464A0) which is why I tried others.

Divider lines can be found in these mockups:

I don't think the divider lines add enough clarity to be worth the extra visual clutter, but I am interested in hearing if people think otherwise.

[juanis2112]

Summary form meeting:

1. Waiting on a color palette to decide colors
2. We like the line divider (Probably we will use the pipe |)
3. We would like the bar to be symmetric so it would end after the arrow and the last portion of it should be the background color.

[isabela-pf]

Here's my next round of mockups based on feedback from the last meeting I had with some Spyder team members.

First, here's a version of the last round with a smaller and symmetrical pane display.

Working on this also made me realize I should make it more clear what panes could look like with a different number of them activated. Here it is with one pane:

And two panes:

Here's what it could look like when so many panes are active that users could have arrows on both sides:

[isabela-pf]

What happens if you can't see the open pane?

Another thing I started to explore is what happens when the currently open pane is outside the visible range because there are so many panes open. I haven't decided what the right direction might be, so here are a few ideas.

First, it could just always be on one edge of the bar and slightly covered. I don't like that the name isn't fully visible, so users would have to scroll to see what they have open if they don't recognize the pane.

Similarly, I don't like not having the open pane name visible here. Still, turning the arrow button blue to indicate hidden open content is another option, though not my favorite.

One more idea is to always have the open pane be in the center of the panes listing. So whenever an a pane gets opened, it gets moved to the center automatically. This lets the pane name always be visible, which is a plus. The problem is I don't know if users would dislike panes names moving around at the bottom. I could see myself wanting them set up in a certain order to manage workflow or so I always know where to find it, and this approach would disrupt it.

Always open to more ideas, especially since I don't have this interaction worked out yet.

[juanis2112]

We like number 2 and we will wait on color palette for deciding on colors for this.

[isabela-pf]

Even though it isn't final yet, I wanted to provide some updated mockups with the colors I've been trying in #13. Still working out details, particularly in the dark and light mode relationship to each other. Here's what it is looking like now.

[juanis2112]

Same as #2 we will like to see a brighter shade of blue for the light mode

If the pipe line is not possible, we can implement tabs for panes as they are in light mode in MacOS