Explore improving UX for Welcome Page

[miguelsolorio]

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.

[chpxu]

@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]

@beastdestroyer thanks, I've updated the issue to include those two.

[gulshan]

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]

Explorations

Exploration A

• Moves Start and Recents to the right
• Adds option to star/remove recent item
• Adds privacy section for telemetry
• Condenses help links into buttons

Exploration B

• Moves Start and Recents into sidebar
• Adds option to star/remove recent item
• Adds privacy section for telemetry
• Condenses Customize, Learn, Help into tabbed content
• Adds an "Updates" tab to show app & extension updates

Exploration C

• Makes recents two-columns
• Moves Start to the right side
• Adds option to star/remove recent item
• Adds privacy section for telemetry
• Condenses help links into buttons
• Condenses help links into buttons

Exploration D

• Makes Recents and Start into two-columns
• Moves Customize, Learn, Help into large buttons
• Adds option to star/remove recent item
• Adds privacy section for telemetry
• Condenses help links into buttons
• Condenses help links into buttons

[octref]

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]

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]

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]

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 startup checkbox

Seems like the C is the best option. Focus on "Recents" is the best.

[miguelsolorio]

@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: