juanis2112
commented
4 years ago We like option 4 but we will include the supported packages for the plots pane. We will wait on design of the icons for the other panes #14
Closed isabela-pf closed 1 year ago
juanis2112
commented
4 years ago We like option 4 but we will include the supported packages for the plots pane. We will wait on design of the icons for the other panes #14
isabela-pf
commented
3 years ago I made a list of what panes I think could benefit from this kind of “empty” pane treatment. Some aren’t as empty as the blank space of the plots pane but still don’t provide any kind of feedback until run, so I think they could benefit from similar treatment.
In the case of Code Analysis and Profiler panes, I’m undecided whether or not they should keep their current content and just add a message. For now, I’ve posted it with an illustration since that takes more work to visualize than deciding we want to leave it mostly as is.
On that note, here are some more explorations of what the illustrations could look like and what messages might makes sense. Feedback on both is appreciated.
First is an illustration style following the lead of the last post. These look like approximations of what a given pane will look like once there is content in it.
Almost the same as the last round. Has an updated message, but I left a blank for proper wording around which packages were supported.
Second, I experimented with a less literal approach that is more playful and possibly more informative. While seeing what a full pane might looks like can be helpful in cases like the Plots pane where a plot is easy to identify, the difference between some panes is harder to tell (both the Variable Explorer and Profiler panes look like tables).
I think this one needs the most work if we are interested in this style. It's still quite rough.
I'll re-post these illustrations on their own in #14 for consistency and review.
juanis2112
commented
3 years ago List of Panes:
isabela-pf
commented
3 years ago It's time to get some ideas for the panes we haven't decided on yet. Hooray! Much of the text still needs feedback either to clarify it is accurate or if there is a better description.
It’s returned and it’s polished. The major change here is a much cleaner telescope.
The first option is more literal with an emphasis on projects being made of directories. This is not my favorite choice since I don’t know that it adds more clarity. Having perspective (like the open folder) does not fit will with the illustration style either (and the closed folder option covers the file design almost completely).
The second option is more fun and based on the idea of a project on a desk. The main concern here is if that this doesn’t make it clear what projects are any more than the name “projects” does.
First is the version that matches Code Analysis and Profiler file illustrations. To add a degree of separation from those two, the magnifying glass is in a different location.
If we want to emphasize more complete separation from Code Analysis and Profiler, we don’t have to use the file illustration at all. This version is just searching a group of vague rectangles.
This is one of the panes I am still least satisfied with. Once again working off the file idea (since it looks like a list and the History pane pulls from an automatically generated file), this combines the Profiler’s clock illustration with the standard “reset”/”go back” icon. Just like the first Find option, the clock is in a different location to keep it from being more easily mistaken for the profiler.
I also have an alternate option for the upper text (the one that says why the pane is empty). It might be more helpful to say "You haven’t run commands in your console yet."
juanis2112
commented
3 years ago Variable explorer: We like the telescope but maybe try to space out more elements Projects: We like Option 1 but we need to think about the default size of the pane. Find: Stephannie likes option 2 because the concept of "find" is more general and I like option 1 because it matches the "file image" in some of the other images. @ccordoba12 it's your choice. History: Maybe try adding something inside the file to reference that this is the history of the terminal. ('#', or 'cmd' or 'py', '[1]') Profiler, code analysis, plots: Add sparkles
isabela-pf
commented
3 years ago Here's the next round of illustrations based on the above feedback (except for Find since that's still waiting for a little more feedback).
I redistributed the letters and sparkles a little bit to make it more balanced. I don't think it adds much, but that's up to you!
Even though Projects will default to a different pane size, I don't think it's wise to make illustrations in a different size/ratio since (1) it can be resized and (2) I don't think it will make a big difference. This mockup does show how this looks more spaced out and scaled down, though.
I could also use feedback on what info makes sense in the lower feedback text. Let me know what you think!
I think the [1] approach looked the best by far and was the most recognizable from the console. Of course, I can show mockups of the other directions if you want.
Corrects the size of the sparkles.
Adds sparkles to match the rest of the illustrations.
Also adds ✨ sparkles ✨.
juanis2112
commented
3 years ago Option 1: Maybe try to use a stack of files and something that says that they are text files since it doesn't work for other stuff.
READY :)
READY :)
-Use multiple numbers in several lines and add colons ':' after them -Try the one that has only one number but with a colon at the end
READY :)
READY :)
READY :)
Maybe dots or circles at different points in a file and a "cute" bug
isabela-pf
commented
3 years ago Next round!
To show the contents of the second file, it needs to be more spaced out.
We could also go the opposite direction and show more files tighter together.
As requested, here are the two options!
This is a very rough idea, but I didn't want it to hold up the other work. The bug needs a lot more refinement, but if it doesn't look "icky" I'm happy to keep working on this direction.
For the approved icons, here they are cleaned up and as pngs.
isabela-pf
commented
3 years ago More updates! We are almost there!
I fixed the incorrect colon placement (sorry, my mistake!) If there's nothing else about this option, I'm happy to export is as an isolated png.
Updated bug options for you. I'm still not certain about these options, but I've been working through a lot of bug ideas and I just wanted to post some options for you all to see.
It's approved! Here it is as a cleaned up png.
juanis2112
commented
3 years ago Breakpoints:
Maybe try the bug with a head but we like the eyes and the legs.
isabela-pf
commented
3 years ago One more for breakpoints with a different bug! 🐛
Several panes in Spyder might have no content until the user does a specific action. Right now, most of these panes look like empty rectangles without any explanation for why they are empty, so users could easily think there is an error, that they have done something that interrupted the pane’s function, or that it is loading very slowly.
It’d be a better experience if Spyder is transparent about two things:
There’s a few different ways we can solve this lack of feedback, but it should have a visual relationship or similar approach and feel to the work on a combined Help pane’s “home” as shown in #9 since they are both in-pane messages (though that is more of an index of help options than an empty pane).
A few notes about these mockups:
Option 1
This one matches the Help pane work almost exactly. I don’t think it is the strongest approach visually, but if we want the panes to match exactly this might be the direction to explore.
Option 2
This is the next closest to the Help pane work, but a little more balanced for the space.
Option 3
Here I started to explore if there was something useful an empty pane could do on top of communicating basic states of the pane to users. In this iteration, the empty pane messages are accompanied by a list of imported visualization packages so users can know what they could be generating plots from before they have even done it. I’m not sure if tracking visualization package imports is a useful or technically feasible idea (Does the Plots pane even know what is happening in the Editor before it is run?). It’s here for review anyways, and I’d appreciate the feedback. Maybe a different set of useful plot-related information fits here instead?
Option 4
This option has the least in common with the Help pane reworking, but breaks up the already text-heavy Spyder UI with a simple illustration of what the pane can look like when it has content. It is also the furthest from anything that currently exists in Spyder UI, though there aren’t any comparable messages that I’m aware of.