Repository navigation
Explore improving UX for Welcome Page #63152
Description
This exploration will aim to modernize the look and feel of the Welcome page while also improving the layout for new and current users. Items we're looking to explore:
- Add "privacy" section to page for better visibility
- Add "recently update" section for app and extension updates
- Add underline for text links on hover (consistency)
Related issues
- Ability to remove recent item [WelcomeUX] Request: Option to remove directory from "Recent" section if it doesn't exist #22489
- Ability to pin projects Feature Request Add favorites #63057
- Don't open browser on first launch without user's action VSCode should not open browser on first start without user's say-so #14934
- Revisit "Interface Overview" page [WelcomeUX] Revisit "Interface overview" #19491
Current Design
Research
Our research shows that new users install language & keyboard shortcut extensions the most, while current users go to recent projects or open folders. Below is a visualization of the top actions.
Top actions for new users
Top actions for current users
I will be updating this issue with explorations as they're developed.
Activity
chpxu commentedon Nov 14, 2018
@misolori from my issue at #56144 there was a comment about pinned projects on the welcome screen too.
And also to keep in line with thw rest of VSCode, the hyperlinks should have an underline on hover
miguelsolorio commentedon Nov 14, 2018
MAHESH (@BeastDestroyer) thanks, I've updated the issue to include those two.
gulshan commentedon Nov 15, 2018
Should welcome page contain a link to command for git cloning a repo (under the Start section)? IntelliJ and next Visual studio is showing that in their start/welcome page/view.
miguelsolorio commentedon Nov 15, 2018
Explorations
Exploration A
Exploration B
Exploration C
Exploration D
octref commentedon Nov 15, 2018
I do think Playground is an important part for people to get familiar with VS Code's editing features and should be a part of the welcome experience.
Being able to try the features right in editor is much better than reading docs in a browser and come back to editor.
Da13Harris commentedon Nov 16, 2018
I prefer B... I think giving regions of space to each set of features could help users process them more quickly/easily at a glance. The background on the right side creates a nice separation. The tabs in the main content area allow a few items to be tucked away a bit, reducing clutter. It'd be a nice bonus if it retained the state of your selected tab.
chrmarti commentedon Nov 16, 2018
I like the focus of C on 'Recent' folders. Is there a good way to use that space when there are no recent folders yet, like on first startup? E.g., by using a subpage switcher like in B.
chpxu commentedon Nov 16, 2018
I like C and D, perhaps sort the buttons on D by category like C, lower that container down so it's centre with everything else, and center the
Show welcome page on startupcheckboxmiguelsolorio commentedon Nov 16, 2018
Christof Marti (@chrmarti) that's a good idea. We could move the "Help" content up to the recents location when there are no recents, since the users accessing this view would most likely be new users, and then move it back when there are recents:
rebornix commentedon Nov 16, 2018
I prefer D the most and here are my 2 cents. Before I'm super familiar with shortcuts of Open Recent and Open Folder, I used Welcome Page as my dashboard. I bind F2 to command Open Welcome Page and then everytime I just press F2 and then
But now I no longer do that as I have to switch from the keyboard to mouse to operate on the welcome page. When I use Open Recent, I only need to press Ctrl+R, type and then pressing Enter, however with welcome page, navigating into those links is painful.
For option D, as we already focus on the Recent Folders, if we can use arrow keys to navigate between all clickable elements, it can be super helpful
37 remaining items
kowalski7cc commentedon Sep 8, 2019
Totally agree with Alessandro Fragnani (@alefragnani)
Really loving exploration C (maybe logo could be a little bigger) and would be wonderful if extensions could contribute to the page.
An exanple could be a GitHub extension to provide open issues or remote repositories.
Or the SSH remote cold provide some host to connect to, without opening a project.
Hope to see soon the new design! 😁
andrewrothman commentedon Nov 6, 2019
Basing off of: https://user-images.githubusercontent.com/35271042/49915404-45fc5580-fe4a-11e8-918f-473f31dd739a.png
What do you think of moving the "New File", "Open Folder...", and "Add workspace folder..." buttons above the recent files/folders list? They could be represented as horizontally stacked icons, possibly with titles underneath. That way, the "Start" section could be removed, which should provide enough space for the "Customize", "Learn", and "Help" tabs to be broken out into vertically stacked sections (removing the need for a page switcher).
Thoughts?
Matelasse commentedon Nov 22, 2019
@misolori What became of this?
miguelsolorio commentedon Nov 22, 2019
Matelasse we've got a direction for the design but this has yet to be added to a milestone. I'm hoping this happens soon though I don't have an ETA.
lambainsaan commentedon Dec 14, 2019
@misolori UX is sorted for this, right? I would love to implement the new designs.
roman-petrov commentedon Aug 21, 2020
This might be a great improvement: being a non-new VS Code user I never need many items on current Welcome screen and use every day only
Recentas show on initial design proposal as top 1 action for current users. I suppose there are many VS Code users doing the same.miguelsolorio commentedon Mar 3, 2021
👋 Hey Everyone, it's been a while since we last updated this issue. We've been busy working on a new "Getting Started" experience (#111554) and we're ready to revive the welcome page explorations. I'll be posting updates into this issue since they are all related. A few additional items we're exploring:
Empty folder
Workspace
Workspace + Recents
Workspace + Recents + Getting Started
And after some time that the user has opened multiple projects and installed multiple extensions that contribute to the getting started content
kolebayev commentedon Apr 2, 2021
Hi, are there any methods in current extensions api to make custom welcome page (as extension)? I need to show only recents as grid (not list) and button to open folder with project for example
digitarald commentedon Apr 5, 2021
Ilia Kolebaev (@kolebayev) there is #119097, but just for walkthroughs. What kind of projects would you expect to see on the recent list? Feel free to ping me on my profile email for longer input.
Inori-Lover commentedon Jun 16, 2021
simple is better, i choose a
miguelsolorio commentedon Jul 9, 2021
Since we already shipped our new welcome page that includes the new getting started pages, closing this issue as done 🎉