microsoft / microsoft/vscode

Feedback on Experimental Modern UI

Open
#331,403 12 comments 15 reactions 2 assignees Claimed by @hawkticehurst View on GitHub
modernization ux
Dominant language
TypeScript
Stars
193k
Forks
42.4k
PR merge metrics
PR metrics pending

Description

_Made it a feature request as it's barely a bug rather some design issue._

The one and only issue is exp. modern UI introduced an entire new logic which causes massive discontinuity for a user switched from original UI to exp. modern UI. So much that the user basically need to spend a lot of time restudy and rebuild ui navigation logic as if it's a completely different application.

### Tabs
original/legacy:
Image

All other tabs use a different colour than main window, difference in colour naturally separates them. Selected tab using a same colour that's consistent with main window, and is visually connected with main window with no other UI elements in between.
Original/Legacy theme also added a blue horizontal line on top to indicate the tab is selected, without damaging visual connection of tab with main window.

exp. modern:
Image

Experimental Modern theme, however, chose to make all other tabs have the same colour as main window **EXCEPT for the one selected** And to make it worse, there're no UI elements to separate all other tabs with main window. No UI elements to separate these tabs either. But the selected one is isolated by a faint white box.

Result is my brain would behave as so when looking at this:
* the one with white box is treated as a button, ignored
* selected tab is this giant one and somehow have 3 icons?
* brain request more attention and realized that's actually 3 tabs
* content in window doesn't match with tab?
* brain request even more attention to check the entire tab row
* realized the ignored "button" is a tab, annoyed

This process occurs every time I want to switch tab.

### Side Bar
**original/legacy** vs **exp. modern**
Image -- Image
Reduced padding made side bar icons appear more like one single element rather than individual elements. This makes users need to firstly identify icons apart from the imaginary single element, then select an icon, rather than selecting directly.

### Dividers
Dividers shifted from minimal lines to a noticeable UI element, effectively fits in more UI elements without increasing amount of information displayed on screen. This change made UI feels more crowded despite might not actually reduce area for displaying contents.
Dividers becoming noticeable also drains attention faster. User's brain would actively filter out these dividers, unlike those minimal thin lines which are mostly ignored. As shown in this image stolen from #330258Image

The bottom status bar also have a similar issue. Becoming thicker and draws more attention when user is not intended to check it.

### Conclusion
So combining all of them we get a modern theme that's annoying to use. Unfortunately that's like all the changes it made from what I could tell, resolving all of them is effectively removing the feature. No idea where that would lead to.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.