Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI - explore improved notification UX #22388

Closed
3 of 4 tasks
stevencl opened this issue Mar 10, 2017 · 82 comments
Closed
3 of 4 tasks

UI - explore improved notification UX #22388

stevencl opened this issue Mar 10, 2017 · 82 comments
Assignees
Labels
feature-request Request for new features or functionality on-testplan ux User experience issues workbench-notifications Notification widget issues
Milestone

Comments

@stevencl
Copy link
Member

stevencl commented Mar 10, 2017

Goal: to explore an improved notification experience that resolves the current notification UX problems

Plan of action

  • Compile list of notification UX issues
  • Storyboards on two different options
  • Socialisation and discussion with team
  • Customer research
@stevencl stevencl added the ux User experience issues label Mar 10, 2017
@stevencl stevencl added this to the March 2017 milestone Mar 10, 2017
@kieferrm kieferrm mentioned this issue Mar 10, 2017
58 tasks
@Srekel
Copy link

Srekel commented Mar 17, 2017

In case it's not on your list of things to fix: One of the more annoying things is that there's no way to disable popups, at least for plugins.

I've installed the CMake plugin to get syntax highlighting, but it complains about not having cmake installed/configured, and it pops up a notification very very frequently. Preferably all such notifications should have a "disable this notification" button. For extra fancy points, allow the user to disable just for the session, per file (?), and permanently in the user/workspace settings.

@chrisdias chrisdias modified the milestones: April 2017, March 2017 Mar 30, 2017
@NickCraver
Copy link
Member

To throw a concrete case on that's growing:
When dealing with .NET Core especially, the amount of prompts to run a restore is absolutely maddening. Can this scenario please be coordinated and improved on?

Yes, VS Code, I know I just changed the project file. I was right here when I did it. PLEASE STOP PROMPTING ME BEFORE I'VE HAD A CHANCE TO EVEN DO ANYTHING. Holy crap that's an insanely annoying behavior. Some other plugins do the same. I absolutely want to mute some plugins outright, possibly based on verbosity level.

@HawkenKing
Copy link

HawkenKing commented May 10, 2017

hi @bpasero you wondered what type of warnings I was getting while using Unity.

By default Unity will add a few lines to the top new .cs files, these are in basically every file. The "using" includes are not always used, so appear with green squiggle underlines.

However every time you start up VSCode, it warns you about these.
screen shot 2017-05-10 at 7 27 08 pm
screen shot 2017-05-10 at 7 27 02 pm
The warning isn't really necessary, I'd trade access to my tabs for this warning anyday.

@bpasero
Copy link
Member

bpasero commented May 10, 2017

@HawkenKing I see, you could also report this to their extension asking for a more pleasant experience (e.g. allow to never show the warning again).

@pieandcakes
Copy link
Contributor

We also have an issue in the C++ extension where the users stop at some library code that the debugger "knows" the source path for but the user doesn't have that source on the computer. Our users would like a way to turn off notification for these files and I think a per file/filepath or per session method would be helpful.

@freeman42x
Copy link

A very important issue with the notifications is being able to see full text for it:

A closed issue about it is this one: #31815

@stevencl Could you please add the required change to this issue?

@bpasero bpasero added the feature-request Request for new features or functionality label Nov 6, 2017
@levrik
Copy link

levrik commented Feb 20, 2018

@bpasero I would propose a subtle fade out animation when dismissing a notification. Should not distract too much but still looks a bit nicer.

@bpasero
Copy link
Member

bpasero commented Feb 20, 2018

@levrik you mean an animation when the user explicitly clicks on the X or when the notification disappears on its own after a timeout?

@levrik
Copy link

levrik commented Feb 20, 2018

@bpasero I would say both.

@Tekbr
Copy link

Tekbr commented Feb 20, 2018

-- Sorry for the English, I used Google Translator --

@bpasero
1- I think the output of the notification is on the right instead of the down. Simulate Windows 10 notifications. And when they disappear, the other ones would come down, as it does today.

Notifications will disappear after a timeout only if they carry no buttons to interact with. And then, the timeout is determined by the severity (e.g. 10 seconds for infos, 12 for warnings, 15 for errors).

2 - I think the notifications that need our attention could be a little transparent after the predetermined time, getting the normal color as soon as you move the mouse over it and return to the transparent if you take the mouse.

3- What maximum number of notifications? What I mean is: would it be half the VSCode window?

4- [Suggestion] Make the Windows taskbar icon blink when a background installation has finished (and we need to restart VSCode - I think that would be interesting) - this would happen when VSCode is minimized.

5- A small detail: Put the notification a little further left to follow the scroll bar line. Place the nearest notification to Status bar. So when you turn off the Status bar it will be close to the taskbar.
See in the gif that there is a misalignment when the Status bar is enabled / disabled.

notificacao

@levrik
Copy link

levrik commented Feb 20, 2018

@Tekbr I kinda like the idea with making important notifications transparent after some time instead of letting them disappear.

@AdrianoCahete
Copy link

I am not 100% sure we need another animation when the notification flies out. I am trying to keep distraction to a minimum and I think doing yet another animation just for the purpose of having an animation is odd. The initial animation makes sense to me to draw attention but I am not sure about a secondary one.

Isn't about just to have an animation. It's because UX things.
When you animate to show that it's new and you click to close/ok/cancel/action (or timeout close), is expected a "close" animation, just because you have a "open" animation. It's a start/finish flow.
Without that animation, end user can be not understanding whats happened here. "Why the notification is gone?", "Where's the notification?", "Whats happened with that notification?" are the questions that the users will ask.

@bpasero
Copy link
Member

bpasero commented Feb 20, 2018

@Tekbr currently the oldest notification would hide if the overall stack of notifications exceeds 600px, so it is not bound by number but rather by size (currently, we might want to change that).

@Tekbr can you explain where you see a misalignment with the notification center when status bar is disabled, for me it looks OK? I can check about aligning the center to the scrollbar of the editor, though not sure that makes sense, because the notification center is floating on top of everything.

@AdrianoCahete that is good reasoning, but it does not necessarily have to be the same animation that was used to show them. I find the fade-in animation quite heavy already and we might want to revisit that one (e.g. to fade an animation in from the bottom instead of from the right because the notification center is on the bottom).

@AdrianoCahete
Copy link

Yep, you can make any animation to dismiss, as long as user can clearly see that is dismissing. A small (0.3s~0.5s) timeframe animation is enough.
You can try a fade-out animation too, i think it's ok for that.

@Tekbr
Copy link

Tekbr commented Feb 20, 2018

-- Sorry for the English, I used Google Translator --

@Tekbr currently the oldest notification would hide if the overall stack of notifications exceeds 600px, so it is not bound by number but rather by size (currently, we might want to change that).

@bpasero Thanks for the info!

@Tekbr can you explain where you see a misalignment with the notification center when status bar is disabled, for me it looks OK? I can check about aligning the center to the scrollbar of the editor, though not sure that makes sense, because the notification center is floating on top of everything.

@bpasero Here's the picture of what I'm talking about. Remembering that it is only a detail ... If you can not leave it as it is.

notificacao5

@Tekbr
Copy link

Tekbr commented Feb 20, 2018

-- Sorry for the English, I used Google Translator --

4- [Suggestion] Make the Windows taskbar icon blink when a background installation has finished (and we need to restart VSCode - I think that would be interesting) - this would happen when VSCode is minimized.

@bpasero For those who have the active Status Bar it is easy to see that there have been notifications. But for who deactivates? Or when we have ZenMode enabled (if using two monitors)?

Even for those who leave the Status bar enabled, it would be interesting to have a contactor in the taskbar icon. Showing notification.

Here are some examples that could be put (remembering that I do not know how complex this would be to implement).

notificacao2

notificacao3

notificacao4

@bpasero
Copy link
Member

bpasero commented Feb 20, 2018

@Tekbr I actually intentionally wanted to leave a gap from the status bar (or bottom window) to the notification center, but we can revisit that to make it more obvious that the center belongs to the status bar entry. Though it can also be opened when the status bar is hidden, so in that regard it is also independent from the status bar.

As for feature suggestions like the task bar decorations I think we should start to separate them out into individual issues. It gets hard to track that here in the issue. Anyone feel free to file issues for individual things (both bugs or features) as you like. Make sure to not put more than one issue into a single issue 👍

I think the task bar decoration would not work unless it was clear from within the app how to dismiss the badge. And if the status bar is hidden, this would be hard.

@PKief
Copy link

PKief commented Feb 20, 2018

@bpasero I just would like to mention that the name of the source is overlapped by the buttons which does not look very nice (at least in my case):

issue with long source names and buttons

Maybe you could use dots for very long source names with (text-overflow: ellipsis)

possible solution for issue with long source names and buttons

But all in all I really like the new notification concept.

@AdrianoCahete
Copy link

Maybe you could use dots for very long source names with

Or just move the "source name" to a line below, leaving the "button bar area" just for buttons.

@Tekbr
Copy link

Tekbr commented Feb 20, 2018

-- Sorry for the English, I used Google Translator --

@bpasero Thanks for your response! Let's wait for the opinion of some people, to be able to create new cases. I believe that after a formed opinion you can extract yourself to avoid duplicate cases.

@Tekbr I actually intentionally wanted to leave a gap from the status bar (or bottom window) to the notification center, but we can revisit that to make it more obvious that the center belongs to the status bar entry. Though it can also be opened when the status bar is hidden, so in that regard it is also independent from the status bar.

About the border on the bottom and the direct part (next to the scroll bar). If you stay very full you can leave as is, they are small details even. Your explanation with Google Translate was not very clear. 😢 Sorry. 😊 😊

About the notification in the taskbar, since the Status bar is hidden I thought of a temporary icon above the gear. It would have the same function as the icon in the status bar. If the person has Status bar active, this icon will not even appear.

notificacao6

By clicking, it would show the notifications and also hide. If you have read all the notifications this icon will disappear !! And it would delete the notifications in the taskbar.

And someone disables this bar, I have no idea. 😆 😆 😆

Maybe you did not show any notifications in the taskbar, only the blinking option, without the indicator numbers.

Any other ideas?

@eamodio
Copy link
Contributor

eamodio commented Feb 20, 2018

@Tekbr I really like the look/idea of having the notification center icon/badge in the activity bar rather than the status bar.

@Tekbr
Copy link

Tekbr commented Feb 20, 2018

Or just move the "source name" to a line below, leaving the "button bar area" just for buttons.

-- Sorry for the English, I used Google Translator --

Or put this option to show / hide the rest of the text by scrolling the buttons.

notificacao7

@Tekbr
Copy link

Tekbr commented Feb 20, 2018

@Tekbr I really like the look/idea of having the notification center icon/badge in the activity bar rather than the status bar.

-- Sorry for the English, I used Google Translator --

@eamodio I think the current position is more intuitive, since the notifications appear that position. That is, you would not have to move the mouse many times. Everything is very close.

I'm glad you enjoyed it, but vote for this option as a secondary if Status bar is disabled.

But I believe it is possible to have a choice.
Example:
"workbench.notification": Status Bar or Activity Bar

@bpasero Do you think it's possible?

@kumarharsh
Copy link
Contributor

Would the 'bell' icon not be more suitable for notifications instead of the megaphone? In my mind, it seems to denote 'feedback' (Uservoice might have spoilt it for me 😉)

@stevencl
Copy link
Member Author

Thanks for all the feedback on the notifications UX. We really appreciate all your suggestions and the time you have taken to help us make this a better experience.

I'll respond to the recent comments and issues here, but as @bpasero has suggested, we'd really appreciate it if you could create new issues for any new suggestions you have or anything else that comes up so that we can track them more easily.

Animating when closing a notification: I don't think this is necessary. We don't animate anything else out of view when closing it. Clicking the close icon and having the thing you click on disappear is sufficient feedback I believe. The reason we animate it in is because the user didn't take an explicit action to make the notification appear. So we have to do something to attract the users attention. But we don't when closing it because that was an explicit action by the user.

Detached from the status bar: we are still working on the notification centre and will be working on additional capabilities such as adding UI to dismiss all notifications in one go. Once that UI is in place it might make the notification centre look less detached from the rest of the workbench.

We could choose to position the notification centre affordance in the activity bar but I think we would want to show the notification centre next to the affordance. Thus this would possible obscure more code if the activity bar is on the left hand side as we would then show notifications on the left. But that could be an option I suppose.

Regardless of where the notification centre affordance is displayed (status bar or activity bar) we have commands to show and hide the notification centre. So that allows users who want to focus on their code and not be distracted by the status or activity bar to continue to work but still be able to access the notifications. If we place the affordance on the status bar and then the user chooses to hide the status bar we would not move the notification centre affordance to the activity bar. The reason that somebody hides a piece of UI is more than likely because they don't want to be distracted by that piece of UI. So taking some of the UI that they have chosen to hide and putting it somewhere else would not be satisfactory.

Thanks again for all the feedback. I'm going to close this issue now as we have explored and delivered a new notification UX but again, as @bpasero has suggested, we'd really appreciate it if you could create new issues for any new suggestions you have or anything else that comes up so that we can track each of those issues more easily.

@mattacosta
Copy link
Contributor

mattacosta commented Feb 21, 2018

I had this on hand already. I'll try to keep it updated with any created issues (please reference this issue in your descriptions) and possibly make a few myself.

List of requested notification features

List of requested notification API features

@AdrianoCahete
Copy link

Animating when closing a notification: I don't think this is necessary. We don't animate anything else out of view when closing it. Clicking the close icon and having the thing you click on disappear is sufficient feedback I believe. The reason we animate it in is because the user didn't take an explicit action to make the notification appear. So we have to do something to attract the users attention. But we don't when closing it because that was an explicit action by the user.

From VS UX Guidelines:

Fade-in and fade-out
With this pattern, a UI element transitions from not visible (0% opacity) to visible (100% opacity) or vice versa.
This is the most commonly recommended UI animation. It's a subtle effect that adds interest without interrupting flow. In some cases, the user might not even realize that there's an animation, perceiving a smooth and flowing UI system.

Animation properties

  • Starting opacity: 0% for fade-in, 100% for fade-out
  • Ending opacity: 100% for fade-in, 0% for fade-out

https://docs.microsoft.com/en-us/visualstudio/extensibility/ux-guidelines/animations-for-visual-studio#fade-in-and-fade-out

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
feature-request Request for new features or functionality on-testplan ux User experience issues workbench-notifications Notification widget issues
Projects
None yet
Development

No branches or pull requests