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.