Explore UX to explain vscode.dev differences compared to desktop app

[joyceerhl]

When on vscode.dev, users are often deeplinked into specific content (PR diffs, editor deeplinks), which means that a first-time user of vscode.dev may not see our getting started walkthroughs and are not set up for success when using the product. We'd like to create a way for first-time users to learn about how to use the product, e.g. by showing info about how uncommitted changes are persisted in a lightweight overlay that is dismissed as soon as the user interacts with the UI. (Possible alternatives: surface this info in banner, integrate this info into the GitHub auth dialog since all users must already sign in, always open Getting Started editor for new users)

There are similar use cases e.g. wanting to spotlight new features in the product. We've done prior exploration on integrated walkthroughs: #106717 (comment)

[daviddossett]

Saw this today and it actually worked well as an FYI, simple as it is.

[daviddossett]

Taking some inspiration from the example above + others to see what this might look like as a dialog:

Obviously the icons and text are boilerplate overall but let me know what you think of the pattern as a starting point cc @joyceerhl @bhavyaus

[joyceerhl]

One consequence of this change is that new users will see at least two back to back modal dialogs, because GitHub Repositories triggers the modal dialog sign in flow for first-time users, and the filetree and editor don't get populated until auth completes.

If there isn't a softer touch approach we can go with, would we want this info dialog to appear before or after the auth dialog?

I believe we'd also want the dialog above to visually align with the custom modal dialog, which looks like this at the moment (no rounded corners and possibly different background / button color tokens?

[daviddossett]

Yeah I'd thought about the multiple dialogs issue too. Not sure yet if it would be a dealbreaker. But in any case I think I'd expect to see the auth dialog second since the other one is more a of a overall "welcome" step. Perhaps there's a slick way to bundle these together in a sort of multi-step way.

Instead of a "Got it" button, it could be "Next" with the second step being the auth flow. Just one idea.

Re: styles, agreed on alignment. Although I would say I'll probably move our custom dialogs to use rounded corners all up.

[daviddossett]

Here's a quick sketch of what I had in mind:

CleanShot.2023-01-10.at.09.52.08.mp4

[bamurtaugh]

Maybe the final point of the first modal could mention GitHub Repositories and tell users they're next going to log into GitHub (I think this step would need to be dynamic in when it appears since users could be entering from vscode.dev without any GH repo open though). This might be a nice heads up and make it feel more like a step-by-step progression, rather than just two back to back modals.

[joyceerhl]

Instead of a "Got it" button, it could be "Next" with the second step being the auth flow. Just one idea.

You generally only need the auth flow once (unless you then signed out), so "Next" might be a little misleading. What does the ChatGPT "Next" button do?

[daviddossett]

Wouldn't this series of modals only show once for new users? Or do we also need to anticipate the case where they are already signed in but see the first dialog for the first time?

[joyceerhl]

Or do we also need to anticipate the case where they are already signed in but see the first dialog for the first time?

This would be the case in github.dev if we chose to adopt this modal welcome in the github.dev embedder, because auth is pre-seeded when you're coming from github.com there.

[daviddossett]

In that case we might need to account for this just being a single step then. So the text would either be "Next" or something like "Got it".

I can see how this would be tricky to know ahead of time to make that decision though. "Continue" or similar could account for both cases without needing special logic.

What does the ChatGPT "Next" button do?

I can't actually seem to get the dialog back but I think it was just more information on what ChatGPT is etc.

[daviddossett]

Another example from Slack

[daviddossett]

Some other modal variations of varying weight/content:

Lightweight:

W/ some sort of artwork to grab attention (obviously just a placeholder to get the point across):

Instead of a modal we could use a sort of intermediate page before loading the actual app. This makes it feel a little bit more important vs. a modal which many would simply dismiss without looking. Probably could cut down the text here as much as possible:

[rebornix]

I was playing around with it today and it was unexpected to see a modal dialog because it's blocking the current user workflow. I don't think we do this in other scenarios except where VS Code or an extension requires user input to continue functioning properly, e.g. Trust Workspace, GitHub Sign In. The current Get Started/Welcome page doesn't block the user's workflow, so I don't think this info popup should.

[sbatten]

@rebornix while I hear the feedback, there are some special notes about this to consider:

1. It's not meant to be recurring, this is for new users to the flow and they should only see it once.
2. The non-blocking flow doesn't engage users, therefore they are dropped into a UX where they have no information and get confused.
3. This is a work in progress, user studies still need to happen to validate hypotheses that this is useful.