Change margins and size of buttons

[juanis2112]

Here I will be posting the list of icons that we use with their corresponding toolbars so @isabela-pf can help us with some mockups for the spacing, margins and sizes of the icons in all our toolbars.

[juanis2112]

I'll try to have the list by the end of next week so that you can start with the mockups @isabela-pf :)

[juanis2112]

We need to decide on margins and sizes of icons in:

• [ ] Main toolbar
• [ ] Panes toolbars
• [ ] Context menus
• [ ] Hamburger menus

[isabela-pf]

After trying different options, I this seems like them most feasible option based on the space Spyder has available and the number of elements we're trying to keep on screen. I think Spyder is primarily using relative units, but I'll be listing measurements as the pixels I've been working with. (Please ignore the icons, I didn't take the time to track down all the different ones hence the number of save icons in this mockup. 🙃)

Broken down, this is

Main toolbar

Icon size 24x24 Button size (clickable region) 44x44 Spacing between buttons (horizontal) 10px Toolbar height 64px

Pane toolbars

Icon size 16x16 Button size (clickable region) 44 wide x 26 tall Spacing between buttons (horizontal) 8px Toolbar height 46px

Context and hamburger menus

Icon size 16x16 Clickable area height 30px (width varies based on menu)

[juanis2112]

We will like to see a mockup with smaller icons and less vertical width for the main toolbar. (Maybe try the same size of the other toolbars)

[isabela-pf]

I'm back with more mockups based on meeting feedback. Hooray! We didn't talk about the context and hamburger menus, so these mockups change only the main and pane toolbars.

Matching toolbar specifications

What if there was only one set of toolbar specifications for all the toolbars (main and pane) in Spyder? This is the option we were most interested in the meeting. It takes the pane toolbar specs from the last set of mockups and applies it to all. To make it easy to find, here are those specs again:

Icon size 16x16 Button size (clickable region) 44 wide x 26 tall Spacing between buttons (horizontal) 8px Toolbar height 46px

Pros:

• Less toolbar specifications to keep track of for design and development. Yay!
• The main toolbar takes up a little less space than it currently does.

Cons:

• This makes it so that we aren't meeting recommended 44x44px clickable areas for all buttons.

Full-toolbar buttons

Make the full area of the toolbar be clickable button areas. This sets margins on all sides to 0. Even though this ended up not being our best option when discussed, I was still curious to see what it might look like since it does solve some of the problems we identified. I also think this should apply to both main and pane toolbars if we like this approach.

Icon size 16x16 Button size (clickable region) 44 wide x 44 tall Spacing between buttons (horizontal) 0 Toolbar height 44px

Pros:

• It does feel less cluttered to remove more lines from the interface (maybe that's just me 🙃).
• We get the 44x44 in minimal space on all buttons!
• All toolbars would be a little smaller and allow more room for the rest of Spyder.

Cons:

• We use (and plan to keep) multicolored icons. They can be hard to distinguish on a background like this, especially the blue debugger icons. (This could be solved though.)
• I'm not sure if having no spacing between buttons is good practice or accessible. I haven't found verification yet, but it's a concern I have.
• We would need to rework hover and pressed states. Doable, but worth noting.
• Does it visually work if two things next to each other are pressed? Is that even possible/worth worrying about?

Full-toolbar buttons with spacing

This is the same as the prior option, but it adds a little bit of space between buttons.

Icon size 16x16 Button size (clickable region) 44 wide x 44 tall Spacing between buttons (horizontal) 8 Toolbar height 44px

There's some repeated pros and cons, but it's easier to compare them side by side by repeating them.

Pros:

• It does feel less cluttered to remove more lines from the interface.
• We get the 44x44 in minimal space on all buttons!
• All toolbars would be a little smaller and allow more room for the rest of Spyder.

Cons:

• We use (and plan to keep) multicolored icons. They can be hard to distinguish on a background like this, especially the blue debugger icons. (This could be solved though.)
• We would need to rework hover and pressed states. Doable, but worth noting.
• Does it look weird to have the gap if two things next to each other are pressed? Is that even possible/worth worrying about?

[isabela-pf]

Two weeks ago, the feedback I got was to explore each of our main options a little further. Here’s the next round of ideas! (Note: The context and hamburger menu has still not changed any of its sizes from the first option.)

20px main toolbar.

Back to having the main and pane toolbars having different specs because having ones based on 16px icons felt too small. The specifications are as follows

Main toolbar

Icon size 20x20 Button size (clickable region) 44 wide x 30 tall Spacing between buttons (horizontal) 8px Toolbar height 46px

Pane toolbars

Icon size 16x16 Button size (clickable region) 44 wide x 26 tall Spacing between buttons (horizontal) 8px Toolbar height 46px

Full-toolbar buttons

One of the biggest cons of the last iteration was the use of color for the pressed state with Spyder’s multi-colored icons. This version works with the grays proposed in #13 to have hover and pressed states that work better with all the icons. The specifications are the same as the last round, but they’ve been copied below for easy comparison.

Main toolbar

Icon size 20x20 Button size (clickable region) 44 wide x 44 tall Spacing between buttons (horizontal) 8 Toolbar height 44px

Pane toolbars

Icon size 16x16 Button size (clickable region) 44 wide x 44 tall Spacing between buttons (horizontal) 8 Toolbar height 44px

In the end, I couldn’t choose between two color options and decided it was better to post than to keep thinking about it. The big difference is whether or not we want to use transparency for the hover state. I’m not sure if this is a good idea even though we do use transparency elsewhere right now.

Without transparency

Main toolbar background: Gray 30 #37414F Main toolbar hover state: Gray 40 #455364 Main toolbar pressed state: Gray 50 #54687A Pane toolbar background: Gray 10 #19232D Pane toolbar hover state: Gray 20 #262E38 Pane toolbar pressed state (including hamburger menu): Gray 30 #37414F

With transparency

Main toolbar background: Gray 20 #262E38 Main toolbar hover state: Gray 40 #455364 at 50% opacity Main toolbar pressed state: Gray 40 #455364 Pane toolbar background: Gray 10 #19232D Pane toolbar hover state: Gray 30 #37414F at 50% opacity Pane toolbar pressed state (including hamburger menu): Gray 30 #37414F

[juanis2112]

After meeting:

• [ ] Main toolbar 64px high -> Explore the option of having the current height of the main toolbar but with the size of icons as it was in the first mock up. (24px X 24px)
• [ ] Panes toolbar 46px high with icons (16px X 16px)
• [ ] Full height clickable area (2 grey shades, one for hover and one for checked state that doesn't conflict with the colors of the toolbars)
• [ ] No transparency

[isabela-pf]

I’m glad we’re making progress, but I still have a few more new things to show in these specifications. I think we’re closer though! Since I forgot to mention last time, the reason some icons have a small gray outline around them is that I don’t have all these icons as SVGs, so please ignore it for now.

First, the pane toolbar hasn’t changed from the last iteration. Below are the specifications again for reference. I did make them be 44px tall since there’s no need to be 2px off without the margins around each button.

Pane toolbars

Icon size 16x16 Button size (clickable region) 44 wide x 44 tall Spacing between buttons (horizontal) 8 Toolbar height 44px

Second, the context menu has not changed either. It seems like we are fine with this direction.

Context and hamburger menus

Icon size 16x16 Clickable area height 30px (width varies based on menu)

Main toolbar

All the changes have been experiments in the main toolbar on how to meet the constraints from the above comment.

There need to be six consecutive colors to make there be no toolbar overlap because all of these areas have the potential to interact. Because of this, I made the main toolbar significantly lighter (it still passes contrast standards). These mockups use:

• Main toolbar background: Gray 40 #455364
• Main toolbar hover state: Gray 50 #54687A
• Main toolbar pressed state: Gray 60 #60798B
• Pane toolbar background: Gray 10 #19232D
• Pane toolbar hover state: Gray 20 #262E38
• Pane toolbar pressed state (including hamburger menu): Gray 30 #37414F

The biggest problem I’m now having is the size/shape of the clickable area. I prefer squares, but with a 64 tall toolbar 64x64 clickable area does not have enough space for all the icons in the main toolbar, even without space in between. vertical). Here’s an example to illustrate what I’m talking about.

64x64 area

We can make this a rectangle, but I don’t like the look and I don’t think that’s expected (I see horizontal rectangles, but not vertical). Here’s an example to illustrate what I’m talking about.

44x64 area

I also tried scaling the top toolbar down a little to see what the minimum we could make it and still have it fit. 50x50px clickable areas is the smallest with 8px spacing in between (chosen because I think having inactive space between buttons is an accessibility recommendation and 8px is a common amount I am seeing). I think this looks a little too small, but I’m interested in hearing what other people think of this problem.

50x50 area

[isabela-pf]

One more note! I think we should have a different approach to what happens when the toolbar gets too long. Right now, it just prevents users from making the application any smaller like this:

But what happens if they have a smaller screen to start with? This is relevant now because more spacing like this means longer toolbars that might not fit for some users. I think we should consider using a “more” … icon to stock overflowed buttons. Here's an example of the Google Docs behavior:

[isabela-pf]

We had a lot of ideas at our last meeting to review the above mockups, but with the number of constraints we are working with in Spyder we didn’t make a final decision for the main toolbar. First, I want to summarize a few options that I still see as viable that meet both Spyder’s goals and accessibility recommendations.

• Have the same toolbar specifications for pane and main toolbar. I know we’ve said no to this so far, but I want to remind it is an option we can always fall back on since we’ve agreed on liking those specifications. This was shown above.
• 64x64 clickable area (proposed size). Even with some icons removed, the 64x64 clickable area takes up too much space to have good room for the path indicator.

• 64x64 clickable area with icons in main toolbar truncated by default (we would need to decide order, this is just and example so don't pay attention to the icons used, please).

  

• 64x64 clickable area with even less icons in main toolbar (we would need to move them somewhere else or remove them). This came up as an idea if some of the debugger icons should be somewhere else when most of them are inactive until debugging is started, but we could discuss other options too. I did not show an example of this because it depends what icons we would still want to remove.

• 54x54 clickable area with less icons. This is still a larger main toolbar than the panes, but a little smaller than the main proposal. This allows us to remove less icons and avoid needing to truncate the toolbar as a default.

  

I hope this helps provide more clarity for our next discussion!

[juanis2112]

We are finally going with the last option and add tooltip with full path in the working directory. Please @isabela-pf post the specifications here :)

[isabela-pf]

Main toolbar:

Icon size 24x24 Button size (clickable region) 54 wide x 54 tall Spacing between buttons (horizontal) 8px Toolbar height 54px Icons Gray 140 #FAFAFA Background Gray 40 #455364 Hover Gray 50 #54687A Pressed Gray 60 #60798B

Pane toolbars

Icon size 16x16 Button size (clickable region) 44 wide x 44 tall Spacing between buttons (horizontal) 8px Toolbar height 44px Icons Gray 140 #FAFAFA Background Gray 10 #19232D Hover Gray 20 #262E38 Pressed Gray 30 #37414F

Menus:

Icon size 16x16 Clickable area height 30px (width varies based on menu) Text 14pt Icons/text Gray 140 #FAFAFA Background Gray 30 #37414F Hover Gray 40 #455364 Pressed Gray 50 #54687A

All together, this should look like:

I think I caught all the details, but please let me know if something seems missing. Congrats on another part of Spyder 5 decided! 🎉

[juanis2112]

Closing https://github.com/spyder-ide/spyder/pull/14933