Design exploration for improving experience for new users

[miguelsolorio]

Overview

This design exploration aims to improve the overall experience for new users while also providing value for existing users. Going through feedback from new and existing users we've heard that:

• Activity bar icons can sometimes be hard to understand if not familiar with them
• Some features (like the command palette and terminal) are hard to discover
• Desire to control overall density

We also wanted to take the opportunity to explore updating the overall aesthetics like:

• Create uniform sizing/padding (using multiples of 4)
• Update default color system
• Alternate placement of account/settings

Demo

Below is an example of this exploration. Here's a few ideas that we tried:

• Adding labels to the activity bar
• Moving account/settings to the top right
• Introducing an omni search to include commands, files, tasks, etc. (also combining text search into this)
• Introducing a "density" toggle (similar to email clients)
• Introducing a Terminal toggle in the status bar
• Introducing GUI features for Git
• Condensed color system into ~10 colors

vscode-northstar.mp4

Feedback

Here's the feedback I've received on this concept from our team. I'll break down the concepts into individual issue for those we are interested in pursuing more. Note: since this concept touches several ideas at once, it would be good to break down some changes (like density changes and showing more/less UI should be separate).

Pros

• Friendlier activity bar labels for new users
• Omni search helps discoverability of command palette/search
• Moving settings/accounts in title bar helps separate views from menus
• Consistent spacing makes for a uniform UI
• Easy toggle for changing density

Cons

• Omni search
  • Can be hard to distinguish
  • Could be too advanced for new users
  • Takes up title bar space (will need to look into OS guidelines)
  • Need to evaluate relationship between Quick Open + Command Palette
  • Can take up dragging real estate for title bar
• Could be costly to maintain two designs w/ density mode
• Some prefer settings/accounts in activity bar

Happy to hear any additional feedback others have on this concept.

[SV9045]

I would like to suggest for 'merge' (merging branch) into the git command menu where all the commands such as push, pull, stash etc.. right now using it from command palate !

[noman-work]

Make Floating Terminal Like IntelliJ IDEA 👀👀

[MvRemmerden]

@misolori I really like the concept of adding labels to the icons in the left nav sidebar, it would have been a huge help for me to understand what these are when I started using VS Code.

Have you already thought about how to deal with this is languages where the labels might be a bit longer? As an example, "Extensions" is "Erweiterungen" in German.

[karuppasamy]

Suggestions.

1. Navigation option "< >" beside the new Omni Search bar to change the activity bar icons.
2. Dedicated option to navigate (back/forward) to the last cursor position.

[fabiospampinato]

Some random feedback:

• Overall this mockup feels pretty modern to me, but on a closer inspection I see a lot of regressions.

• Traffic lights buttons on macOS don't have equal vertical padding around them, especially in the non-dense version but also in the dense version, IMHO that's the kind of detail that drives people like me crazy. Those buttons can be repositioned dynamically at runtime and I think they should.

• Labels in the activity bar are kind of only useful the first time one opens the app, you need people to understand what everything does, but you don't want to bloat the UI endlessly for ~everybody who has already used vscode for a few days. The compact design gets rid of them but IMHO we should get rid of the compact toggle too, I'll get to that later. I think Discord's approach to this is better, they show tooltips on hover and that's it, that way you also solve the issue of labels that are longer than "Extensions" and won't fit in the current design.

• The height of the toolbar in the view container is ridiculously high, you can fit like 3 or 4 tree items in here, IMHO it just looks excessively tall for the sake of it and has no actual purpose, it actually wastes some vertical space and some horizontal space from toolbar buttons. It'd be much better IMO if it just aligned with the tabbar in height, currently it just looks odd.

• The omnibar sounds like a terrible idea to me.

  • First of all visually it takes some extra vertical space always, which is not great. On Linux where no perfect custom titlebar is available it would probably make the app look more like IE, with those endless toolbars that waste so much vertical space (titlebar + menubar + omnibar + tabbar + statusbar, that's a lot of bars).
  • It just breaks some workflows where one would go through search results, with search results on the left and editors on the right, now you can't see both at the same time. I suppose one could open searches on their own editors and manage them that way, but that's not the same thing at all, now you can't just collapse the sidebar temporarily and commands like the one for closing all tabs mess with your workflow.
  • Even visually I'm not sure it actually works, on macOS it looks good, on Windows not so much if you shrink the width of the window a bit more, what would happens if there isn't enough space for rendering the whole thing? Besides it's off-center all the time and that's already triggering my zen senses.
  • Why is the shortcut for that Cmd+Shift+K? Shouldn't that be Cmd+Shift+F?

• Moving the user and settings icons to the titlebar sounds like it might be nice at first, but you don't actually want a titlebar at all I think, and maybe the statusbar should be used for this, at the end of the day in this mockup it looks like a top statusbar got added, and we already have a bottom one.

  • Maybe the idea is not to clutter the statusbar too much and to have those "special" items more easily discoverable, IMHO I'd much rather like to see the statusbar getting uncluttered, there's a fair amount of useless information getting shown there (0 errors and 0 warnings, ok, why is the statusbar item there then? Or for example the official github extension, which I'd imagine a lot of people have installed, last time I tried just wasted considerable amount of space just for telling me my own github handle all the time, maybe more focus should go into resolving these issues first).

• The prompt for moving the settings and user buttons out of the activiy bar is because they are not activities, but maybe the solution is that they should be? I've been personally experimenting with something similar for another app, IMO for example with regards to settings this would be so much better (see image below). The graphical settings editor is kind of not ready for prime time yet (it tells you to use the JSON one to edit some settings), and the JSON editor is unusable in many cases, like if you have even 2 editors side by side the JSON editor becomes almost unusable in my 15" monitor, I think it should be prompoted to its own view (views that should be able to replace what's rendered in the main section fo the app too, and not be just constrained to editor tabs, this could also make the built-in extensions marketplace UIs more usable).

  

• The padded line highlighting the active item in the activity bar looks nice, but maybe it's acually useless? Like it doesn't really have any purpose, it only makes the "Explorer" item more visibly active in the mockup because the git item has a blue badge too, once the badge is not the ~same color as active items anymore this problem disappears. Plus tabs can also have an highlight line like that, now should that be padded too for consistency? Probably, but that'd waste extra space for nothing too.

• In the mockup custom menus are always used in place of native ones, IMHO that's a regression, and there are some things that custom menus can't really replicate, like being rendered outside of the app canvas. On the other hand though custom menus can display chorded shortcuts normally, but you've gotta use native menus anyway for app-level menus under macOS and Linux so maybe it's just better to be consistent in that regard too.

• The compact mode toggle IMHO should be deleted, the UI should always be reasonably "compact", the only difference that actually matters in the mockup between the compact and non-compact mode is that items in the activity bar have labels, other than that we are getting 0 usefulness in any way in my opinion from the non-compact mode, and I don't think you need to render labels there at all, so no need for the compact toggle either. Interestingly the compact mode doesn't seem to have any effect on the tree component, which is the first thing I'd think a compact mode would have an effect on.

• Removing the different background color and border around sidebar views headers I'm not sure how I feel about, at first this change just makes the sidebar look much more messy to me, but maybe I could get used to it and it would appear cleaner? I don't know.

• The statusbar button for opening the terminal is kind of in a random position, I'm not sure how I feel about it. Maybe there should a more general button for toggling the panel, which will have the terminal view active by default, and that should be position at the right corner of the app? Then maybe that could be styled specially to make it blend with the open panel or something, maybe that would be nice. There's currently the notification button at the very right of the statusbar, but again that's kind of a useless thing, for example right now I have 0 notifications, if I click on the button it just tells me again that I have 0 notifications, there's nothing that I can do with it, useless things don't deserve to occupy space in the statusbar by default.

• According to the mockup the enlargment effect when clicking on buttons might be gone for good, that'd be great, not many things get bigger when pushed in the real world so that just looked weird.

I hope I wrote some useful feedback in here, if it sounds harsh I had no intention to offend anybody or anything like that, I'm just an happy vscode user trying to steer vscode more into what I perceive to be the right direction.

[fabiospampinato]

• The dark theme shown in the new mockup might be too dark. I wasn't personally a fan of the old dark theme, which is more of a gray theme really, so I switched to a much darker one, and after having used it for a year or so I think very dark themes don't work so well because shadows break down on them, ~black on ~black just doesn't work and white shadows don't make sense.

[gjsjohnmurray]

I would like to suggest for 'merge' (merging branch) into the git command menu where all the commands such as push, pull, stash etc.. right now using it from command palate !

@SV9045 is this what you are looking for?

(screenshot from 1.52.1)

[SV9045]

@gjsjohnmurray , Yes This is what I was looking for , sorry I didn't check it, apologize.

but I would like to suggest one enhancement though, I remember in my initial days when I started to using git it was confusing for me that I'm merging my own branch to the base branch but it's actually I'm merging base branch to my own branch while working in multi team environment. so, something like merge base branch or might be we can see base branch here and we have an option that, merge it into the current branch. It would be useful to avoid confusing and for understanding git flow when some new person will start using git through VS Code.

[gjsjohnmurray]

@SV9045 please don't use this issue for specific enhancement requests. Instead, start a new one. A convenient way to do this is from "Report Issue" off the Help menu. Pick "Feature Request" and enter details.

[jeffrafter]

This looks fantastic ✨

Features that I use on a daily basis seem far more discoverable. My sense is that this will do more to increase productivity generally than simply target new users / onboarding. Which is great!

Some small feedback:

• Moving the settings and user to the top toolbar is so obvious now that I see it... this is such a good move.

• I am not sure I see enough of a distinction between the density modes - why not pick one and leave the other density to theme developers?

• The search panel on the left is moved (now part of omnisearch?) - how do you display lists of results for things like find-in-files?

• One small nit - I think the window controls on MacOS should be centered vertically: