Vscode: First run user onboard experience

[misolori]

Overview

When opening VS Code for the first time, it can be intimating to figure out how to configure the editor to best meet your needs and workflow. This is even more so for students and those learning new languages. This issue aims to explore what a first run user onboard experience could look like. This will walk the user through the basic core features of using the editor (themes, command palette, extensions) while also teaching users how to access certain features.

Designs

[gulshan]

Please make "Git clone" a part of the onboarding experience.

[nrayburn-tech]

Two settings that may be worth showing for macOS (and maybe Linux) are adding an option to the os context menu and adding “code” to path.

macOS doesn’t use an installer, so these are currently added by running editor commands which can be hard to find if you don’t know what you’re looking for. (Context menu isn’t added yet, but without an installer the editor command is the way it will be added.)
https://github.com/microsoft/vscode/pull/105448#issuecomment-683852049

[misolori]

Thanks for the suggestions! @gulshan I think adding a step for cloning a repo makes sense, though this will require authentication if they haven't set it up. @nrayburn-tech I like the option for adding code to the path as well, not sure about the context menu one as that feels pretty specific and more of an advanced usage.

[misolori]

Based on the feedback I've received so far (speed up animations, add more themes, adding more options like cloning and adding code to the path), I've updated the flow to include these, see the updates below.

[orta]

I love it.

Depending on how much friction you want to offer on the onboarding, that command palette page could require the user to run an action in the command palette. e.g The "Next Step" button could turn to "Unlock via the palette" and be disabled until you run the only possible command in the palette of "Unlock"

[misolori]

@orta it's funny you mention that, @JacksonKearl also suggested the same thing. Maybe we really should do that 😁

[GustavoASC]

I am really, really excited about this! It will be a great user experience!!!! Congrats for the great work :clap: :clap: :clap:

[alexweininger]

This is awesome! Really exciting to see this in the works. 😃

I believe larger, feature-rich, extensions would really benefit from providing users with their own first run onboard experience similar to the one in the designs.

It would be awesome if this feature could be offered through the extension API in some form. That way extensions could contribute their own first-run experience. Extensions could use this to show new users around the extension, similar to how the experience in the designs shows users around VS Code.

[iyashpal]

Really excited to have this functionality. Please make this available in upcoming release.

[ntotten]

Love it! This would be something we would love to use in the Salesforce extensions as well. Having an API to allow extensions to add to this would be really useful.

[misolori]

Thanks everyone for the feedback so far. Writing down additional feedback I received during the team's weekly ux sync:

• The themes + extension sections should have an entry point to access more (show color theme picker + extension view)
• Maybe the themes should be simplified to only have dark + light + link to others
• The command palette felt odd in the flow, maybe have that at the end or make it part of the "get started" todo
• Command palette screenshot needs better examples, we could show most popular commands
• Extension should have a better order and make languages the default tab
• We could also add section for "Environments" to show OS specific extensions
• Could also add this to the "get started" todo (i.e. WSL extension on Windows)
• The "good to go" actions felt repetitive with what's already in the "get started" todo
• We could get rid of the "good to go" section and go directly into the interface overview
• The onboard should be bundled into the "welcome" page so there isn't multiple tabs open
• There should be an entry point in the welcome page to revisit the onboard walkthrough
• If we can detect if a user has ST or VIM installed we can offer keymap suggestions

[sana-ajani]

I love this experience! I wonder if we can also include something to help students learn to code once they learn the editor. We saw from user studies with students that many of them wanted or expected to find in-product tutorials. Could we potentially include an option to "launch tutorials" under the "Learn" section of the Welcome page? It could open a quick pick where students choose the language of the tutorial they want to do and if they want to do it in the editor or go to our website/docs. If they choose the one in the editor, we could open up a split screen with a tutorial in webview that helps them install the extension if they haven't, create a folder or file, open the terminal, and write their first few lines of code and learn how to run it.

[hollyhet]

This is beautiful, Miguel and so needed. The one thought I had based on earlier sessions with students and educators is can we simplify some of the terminology and make it less jargony? Ex: Do they absolutely need to know that a repository is being cloned in order to take a tour of the UI, or can the button just say "Tour UI" and elsewhere we communicate that a repository is being cloned? I also noticed that the titles for each of the screens aren't consistent in terms of phrasing. Some of them are more descriptive and action-oriented (ex: "Choose a theme") and some require more interpretation on the reader's part (ex: "Command palette") What if customers don't know what a command palette is? What is the value of the command palette? What does it do for them? What do they need to do with it? There may be value in simplifying phrasing and focusing on the feature values for ALL new customers, not just students and educators.

[JacksonKearl]

What if customers don't know what a command palette is? What is the value of the command palette?

I think this is a good point, perhaps if the title was "Run Any Command" or similar?

[NeelAPatel]

Setting default terminal should be a thing as well, I find myself always making sure Bash becomes my default, increasing tree indentation width and reducing minimap width.

Inshort, Onboarding should deal with settings that a user sees the most frequently: Theme, Terminal, Git, and File tree (indentation/icons) at the very least.

[cmchap]

I agree with many of the above comments that the power of the Command Palette is under emphasized.

Maybe combine the Command Palette with the other steps to give a bit of interactivity to the flow. Show the pictograms for the themes, then ask users to invoke the Command Palette to change their theme, for instance. I'd bet there are other opportunities for learning-by-doing with the Command Palette in this workflow, too.

[obiwanjacobi]

1) Make the command palette bar (Ctrl+Shift+P) part of the welcome screen. Explain it there.
Also make it a menu option (or a button somewhere).
It is the most essential step that is not explicitly visible. You cannot discover it by browsing through the app.

2) Git. Explain how the UI relates to the Git commands (most are obvious). Link to other source control extensions?

3) Extensions. Perhaps prepare packages (a collection of extensions) that work well together for a specific goal. Programming in C# or Web with TypeScript etc.

4) Tasks & Debug. How do you build and run your project? How do all these .vs files (launch/settings/tasks) work? How are they linked to the vscode UI?

[2c]

[GV14982]

Something I would love to see added is a settings sync prompt!

*DOH it's already there... lol!

[kimbar]

The fact: the culprit for slow operation is always too many extensions or one rouge one.

However, it would be nice to have some obvious way to profile performance of extensions (something like unix top command)

[hwine]

You show, but don't explain, "workspace" and "folders". Why do they need that extra level of organization?

(I've been using vscode for about 6 months, and I still don't understand.)

[misolori]

Thanks everyone for the feedback so far! We've received some great ideas and have also done a couple of user studies with new users that highlighted some areas for improvement.

We've updated the flow to incorporate some of these ideas and have really focused on teaching the users how to use the tool as opposed to showing them. We've also tried to improve the wording on the titles so we don't rely on words the users does not know/understand. Lastly, at the end of the gif I show some improvements we're working on making to the new welcome screen.

[iyashpal]

This is actually mind blowing.

[nonameolsson]

Love it! looks smooth, modern and at the same time very useful for first time users. I really like how it helps new users understand how to use the Command Palette and Settings. Great job on designing it!

The only bad thing is that I now want smooth animations and transitions for everything in the UI 😄

[mauromattos00]

It looks amazing! I really liked seeing some initial settings suggestions on the welcome page!