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

[ghost]

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:

[rebornix]

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

• Choose a recently opened folder
• Or open a new folder

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

[chrmarti]

@misolori I like that. 👍

@rebornix I think keyboard-centric navigation is best served by the Open Recent (Ctrl+R) command. We should still think about improving keyboard navigation on the Welcome page, but I wouldn't optimize the design for the keyboard.

[miguelsolorio]

Exploration C

Here's an updated exploration for Concept C. In this one I explored ways to make the first day experience (Day 0) focused on getting started. From the research above, it's very important for new users to adjust the editor to fit their workflows (via language support and keyboard shortcuts). Additionally, I wanted to make sure that current users (Day 30) we're able to easily access their recent projects while still providing for a way for those new users to access the first day content.

Day 0

• Focal point is on getting started (customizing and learning) while also exploring the product
• Added content tabs for app + extension updates, and help content
• Entire layout is reduced for easier click targets

Day 1

• Moved customize and learn content into tabbed content to reduce visual noise

Day 30

• Increased layout for higher density of information
• Recents turns into two columns

[chrmarti]

I need to warm up to that little page switcher. Isn’t that an indication of us putting too much information on the ‘Welcome’ page?

I like the other ideas.

[chpxu]

@chrmarti But can't you also argue that. being a Welcome screen, a lot of features can make it quite appealing, especially to newer users. I would say depending on the content yes there may be too much, but the page switcher with a few buttons isn't at all

[miguelsolorio]

It's a hard balance to make certain content the focal point for certain users, so that's the main reason for introducing the content tabs/switcher. In our current design, we definitely show a lot of content so I'm trying tidy that up while placing a bigger emphasis for Recents and Start.

For example, new users are more likely to install their language & keyboard extensions to support their workflow while current users are more likely to open a recent project. But we can't have an emphasis for all of it at the same time so contextually moving it can help with that.

[dalDevelo]

Another vote for B here, perhaps with a button to expand (& pin) recents to fill the page...for those who want recents as the primary function of their welcome page, after using the application for some time.

Also agree that playgrounds need to feature here somewhere, but I guess that would be under the learn tab.

[miguelsolorio]

After doing a bit of user testing with the various explorations above (thanks to @stevencl), we've found that Exploration C has performed the best and we'll be working on incorporating those changes. The actual changes will likely happen in the next iteration or so. I'll keep this issue open as I post higher fidelity mockups. Below are the latest iterations.

Day 0

Day 30

[miguelsolorio]

Below are a couple of the higher fidelity mockups:

Day 0

Day 1

Day 30

Transition (GIF)

[Astrantia]

@misolori the folders list looks really empty. can icons be added next to them? if a folder is mainly javascript maybe display javascript icon?

[miguelsolorio]

@Astrantia the intention is to keep it simple, any icons would add unnecessary visual noise since it would be the same icon (projects can contain multiple file types).

[dalDevelo]

It’s a minor complaint, but I think the logo and header text alignment looks terrible in relation to the text below. Maybe the header could be moved up a little further to create more separation from the ‘recents’ section below, or add some background shading to the recents section, such as in exploration B (which I still prefer). It would probably even look a little better if the logo was moved to the right hand side of the text and the header text was aligned to the text left?

Are recent workspaces still identifiable by (workspace) after the title, or will there be other visual indicators of workspaces, such as a different shade of text, perhaps?

[alefragnani]

Hi @misolori ,

I really liked the new mockups, specially the exploration C, but I would like to comment a different area.

Is there any chance (or had any conversation about) allow extensions to contribute to certain sections of the Welcome Page?

I mean, my Project Manager extension allows the user to define Favorite Projects and would be nice to have this list available right from the start in the Welcome Page. This could appear near the Recent section.

There are also some extension that almost makes VS Code a new IDE, like the Java/Python extension. These extensions could add their new kinds of projects/files in the Start section.

Even the Help section could receive contribution from extension.

The idea is the extension contributes / provide additional info, not replace the VS Code contents. So the users still gets all the current help/features/support from VS Code, and after extending VS Code with new extensions, the start up would also be improved.

Thanks, and congratulations for the explorations 👍

[kowalski7cc]

Totally agree with @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]

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]

@misolori What became of this?

[miguelsolorio]

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

@misolori UX is sorted for this, right? I would love to implement the new designs.

[roman-petrov]

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 Recent as show on initial design proposal as top 1 action for current users. I suppose there are many VS Code users doing the same.

[miguelsolorio]

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

• Clean up the main sections (Recents, Start, Help) w/ primary actions
• Show content from "Getting Started"
• Show content from extensions for "Getting Started" Enable extensions to contribute tiles to the welcome page #116414

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]

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]

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

simple is better, i choose a

[miguelsolorio]

Since we already shipped our new welcome page that includes the new getting started pages, closing this issue as done 🎉