Add Notification Center to avoid the pop up dialogs.

[juanis2112]

We want to add a Notification Center to show all the warnings or notifications and avoiding pop up dialogs that may result disturbing for users. For this, we need also a bell to display it and "toaster menu" that shows notifications the first time. @isabela-pf can you help us think a bit more about the design about this Notification Center?

[isabela-pf]

This is definitely a work in progress, so I don’t have a whole notification center thought out or mocked up yet. At the moment, I have ideas for toast notifications and potential toolbar reorganization that might help provide a place for a notification center. I’m going to post this across a few comments so that it is easier to navigate when I am talking about each aspect.

One of the biggest things I’m looking for is better understanding of what notifications are needed and how they are currently existing in Spyder. This will help me make smarter choices and be able to map out user flows or needs for more specific interactions.

In meeting with some of the Spyder team, some notifications might include

• Telling users there is a newer version of Spyder available
• Any errors that do not make sense in the console
• Kite permissions (or updates if relevant?)

I’d love to hear what other notifications or use cases people might have in mind.

[isabela-pf]

Right now, I’m experimenting with toast colors to fit in with the default dark mode. I’ve provided options in the same colors as my work with tooltips in #2 and am open to opinions on what color is best suited.

These should be used to support short messages (1–3 lines of text) and a button to dismiss the toast, bring up the notification center with that notifications selected, or initiate some kind of action if relevant. I haven’t fully worked out what buttons make sense because I want a better idea of what kind of notifications might be common in order to make a smarter choice.

Some other notes about toast notifications:

• They shouldn’t be permanent (or require manual dismissing). A toast is the initial notification, and a toast will always appear along with the more informative and permanent message in the notification center. I’m thinking toasts only stick around for 15 seconds without any interaction before disappearing. They can be dismissed manually earlier, though.
• They shouldn’t replace all dialogs. I think there’s more thought to be done around what kind of notifications need to be toasts (and in the notification center), but I wanted to note that just in case.

[isabela-pf]

Because notifications can be related to all levels/all panes of Spyder, it would make sense to put a notification center like this in the highest level toolbar. Since there is already limited room there, I looked closer what is in that toolbar and found that it looks like a mix of things relating to the editor pane and things that relate to Spyder overall or across multiple panes.

I think it would make more sense to treat the editor pane like all the other panes and give it it’s own toolbar while keeping the top toolbar for non-pane-specific interactions. Just in terms of organization, the split would look kind of like this:

If that’s not feasible, we’ll probably need to decrease icon size in that top toolbar to fit another icon or come up with another solution.

[isabela-pf]

I’ve been thinking about what kind of content fits for this type of notification system to make sure that I have a better grasp of potential use cases and can make sure this system has everything it needs to function. Here’s what I’ve thought might be typical toast notifications so far:

• Prompts to update Spyder
• Enable third party elements (like Kite)
• First time opening prompts to set up things
• Any non-breaking whole application errors (like things that wouldn’t belong to a specific pane)
• Notification that something that was running is done

In summary, toasts should have non-urgent content with choices that do not require immediate input. They also should not replace all dialogs.

It’d be helpful to get if there’s any other types of content that should be a toast or any problems with these current ideas.

[bcolsen]

Notification that something that was running is done

I like this. It would be great to include console name and whether the processes ended in an error or normally in this message

[isabela-pf]

I’ve mocked up some toast notifications with example content based on the last comments. There’s a few things that would be useful to review here.

• Are these the types of content you expected to see in a notification like this?
• Are these the kind of button options you think will work?
• Are they informative enough in the limited number of lines?

Here’s some concerns about button options I have:

• I don’t have any decline buttons because toast notifications only last 15 seconds. But then are users forced to wait 15 seconds if the notification is in their way (since it will briefly cover the upper right panes)? Or would users have to open and close the notification center to get it to go away? Both are bad experiences, but it also seems like a waste to always have one of the options just be “dismiss.”
• Alternatively, should the second button always be to take users to the notification center? I’m not sure if it’s obnoxious or helpful.

[isabela-pf]

There are a lot of questions to consider to start reviewing the notification center itself, so I’m going to be posting them across few comments to hopefully make it more manageable to read and reply.

First, here are options for how the notification center itself will look. Choices being made here are about how notifications appear (listed, still looking like toast notifications), how read/unread is indicated (dots, corners, contrast, etc.), how a notification is selected (checkbox, whole area), and where the button prompts originally seen in the toast notifications appear.

The first three options experiment mainly with ways to indicate read/unread status for notifications. They also have buttons hidden until a notification is expanded.

The below option has the same button styling as the last three, but they are shown at all times instead of on expanded notifications only.

This final option preserves the look of toast notifications, just groups them together in this interface. I haven't worked an expanded/more info form in this option yet, but if there is interest in exploring this direction more I am happy to. Depending on notifications, this might not be needed on any of the options.

[isabela-pf]

There are two places I think the notification center could reasonably appear: as an overlay from the main toolbar (like the quick switch between files) or as another pane in the upper right region. I prefer not to make another pane—especially since notifications can relate to any pane or even be for the application overall—but wanted to provide another option in case there was a reason that overlay treatment is not feasible.

As a main toolbar linked overlay:

I find it hard to see in this mockup even though it is designed closely to the existing quick switch between file interface. I would definitely want to work out ways to help it stand out more if people like the concept of this direction.

As a pane in the upper right:

[isabela-pf]

I wanted to note a few other options to consider. The actions I think are absolutely necessary in the toolbar are mark as read, mark as unread, delete/clear, and select all. Here, I mocked up an option below that includes a sort by recent (default) or sort by unread first because I could imagine that as a useful feature that might not take too much work to implement.

I have not worked out where the notifications icon button should go in the main toolbar since I have not played more with breaking up the large number of buttons currently there. I am planning to use the Material icon “notifications.”

[juanis2112]

We like option #4. Some general comments from our meeting:

• [ ] Add a bell icon (with red dot NO NUMBERS) for displaying notifications (On the right of the arrow that points up).
• [ ] Narrow stripe from top to bottom (similar to Mac notifications)
• [ ] Add Scrollbar
• [ ] Behavior: Popping up similar to the file explorer
• [ ] Add toast notifications for the first time they pop.
• [ ] No read/unread state
• [ ] No checkboxes
• [ ] No “Select all”
• [ ] Only thing in toolbar will be the trash can for deleting all the notifications at once
• [ ] Add an x in the top corner of each notification to delete it.
• [ ] The date should go below the notification (not at the right)
• [ ] The buttons that call to action should be in the side displayed by default (in case of needed)
• [ ] Wait for color palette

[juanis2112]

For the toast notifications, we like

• the position of the 1st screenshots (top right) but allow to customise position.
• the color more towards grey than blue

For the Notification Center

• color should be the same as the toolbar and status bar (also match the file switcher)
• buttons with same colors as all the others in the UI

[juanis2112]

Take into account notification preferences in the Preferences dialog Some ideas:

• Config time of notifications
• Avoid showing notifications