spyder-ide / ux-improvements

Discussion about UX improvements for Spyder 5 and beyond
4 stars 2 forks source link

Rearrange the toolbar in code analysis and profiler (see where to fit the combobox path) #15

Open juanis2112 opened 3 years ago

juanis2112 commented 3 years ago

The changes relevant to both panes for the new design of the toolbar are:

  1. Remove text from all buttons.
  2. Remove timestamp.
  3. Remove browse icon(and functionality).
  4. Add expand/collapse all buttons in toolbar of code analysis to match profiler.
  5. Add Save and Load buttons and functionality in code analysis to match profiler.
  6. Unify run/stop buttons in one.

Based on these changes, we will have a toolbar for both panes with:

ccordoba12 commented 3 years ago

Why did you decide to remove the browse button? Not that I'm against it, just want to know your rationale.

isabela-pf commented 3 years ago

First, I want to document why we are proposing a rework of the Profiler and Code Analysis panes toolbars. Since users go to both panes with a similar goal (to review their code) and they already share many of the same interactions, it would make more sense to have a UI that matches when relevant (instead of being almost the same like they are now).

Part of this includes thinking about what is and isn't really adding to the experience of the pane. For example, the timestamps in both these panes don't preserve the original run time if they are loaded from history or loaded from a saved file (they show just the time it was loaded) and they take up a lot of space, so we decided to not show them. Another case is having both run and stop buttons next to each other means at least one is disabled at all times; that's not a great use of space and it's a normal interaction to see them switch.

Another part of this is thinking about this pane and how is represents higher-level questions about Spyder as a whole. These panes' toolbar are a place where we are first seeing the decision to not use toolbar buttons that are both icons and text, something we also want to continue throughout Spyder.

The more difficult question was around the drop down menu/input box (combobox) with the filepath for the file the user is going to run. Right now, one of the panes always replaces the filepath with whatever file is active/visible in the editor, and the other pane keeps the same filepath from whatever was last run until a new file is browsed. This differing experience is extra confusing since the UI looks exactly the same. When meeting, we decided that both panes should follow the change filepath to active/visible editor approach to make the relationship between the panes and the editor more clear and consistent.

To answer you question @ccordoba12, the above makes the in-pane browse button irrelevant in favor of the browse in the main Spyder toolbar. It might even be more confusing to have so many browse buttons (using the same icon) around the interface.

isabela-pf commented 3 years ago

Because they have almost the exact same needs in the toolbar, I mocked up the proposed Profiler's toolbar since it needs just one more icon.

This first option is essentially a clean up of the current toolbar with relevant changes.

7

The second option flips the current toolbar. This puts the filepath (what is being run) right next to the run results to reinforce their relationship. It also makes this feel less like a two-line toolbar since the filepath combobox is more tied to the rest of the pane.

5

Finally, I've mocked what a toolbar in one line (like most of Spyder's other toolbars) would look like. I like this idea, but it means the combobox has to be very short. I'd want feedback on whether or not that is okay since I think it could be annoying or confusing to see such limited filepath.

8
ccordoba12 commented 3 years ago

To answer you question @ccordoba12, the above makes the in-pane browse button irrelevant in favor of the browse in the main Spyder toolbar. It might even be more confusing to have so many browse buttons (using the same icon) around the interface.

Thanks for the detailed explanation @isabela-pf, I agree with your decision now.

juanis2112 commented 3 years ago

Option 1