First Run Experience ideas

[Garbee]

FTUE = first time user experience and FRE = first run experience up front. pbakaus > 1) is "did you know", 2) is "let me show you this new thing"

So if you didn't know, now you do. And even I still don't get it. :tongue:

@paulirish's initial ideas are:

• Console history ($0, $1, ...)
• console.table

I'm thinking console.group could be a good one to add as well. It is very nice for keeping logs clean.

[kdzwinel]

We are looking here for all non-obvious and useful features, correct? If so, @umaar already created a nice collection of these: https://drive.google.com/drive/#folders/0B9fNUHbLJRmfYVlLX2pwOE81cUU/0B_XGo80_VK2WZFRtenMxelY0RU0

[paulirish]

Two approaches to take here. regular Console hints or more wizardy welcome-to-this-screen stuff.

I heavily favor the first (console hints) for a few reasons. It does change the UX and approach of what we communicate though.

[Garbee]

From the meeting: Console-based hints. Like a "Message of the Day" kind of thing would be best.

Why not wizards?

• Duplicate what the docs are for
• Technical debt to maintain them when things move or get changed
• A lot of extra work in core for what probably won't be a major benefit.
• Can't get into more detailed things without being in the way (which a simple message with a doc link does perfect.)
• Also, only really beneficial to absolute beginners to the DevTools. Existing users who know there way around will just have wizards in their way on first runs.

[kdzwinel]

So, essentially, whenever someone opens a new DevTools window there will be a "tip of the day" in the console, right?

Some random thoughts:

• I think it would be great if these tips were "rich" (with images, highlighted and OS specific keyboard shortcuts) like e.g. in WebStorm:
• It should be also possible to make them 'interactive' so that whenever someone clicks on a tip relevant part of the UI will show up and get highlighted (e.g. someone reads a tip about network filtering, clicks on it, network panel opens up, filter button is highlighted for a second)
• for new DevTools users there is a self-xss dialog in the console - IMO in this case tip should not be displayed
• there should be a possibility to turn tips off IMO
• this whole idea is so simple that it could easily be implemented as an extension - maybe that's somehow better than a build-in thing?

[Garbee]

There would ofc be a "Message of the Day" option in the settings. Not everyone (like those of us here) need it unless we just want to keep an eye on the tips.

As far as interactivity, sounds neat but I wouldn't say that is a high priority to get rolled out. Simply starting with a log message and a link to the doc page for more info is a good start and we can expand from there.

While it could be an extension, that means that people would need to login to Chrome and go get it (or re-download if they already got it from the store) on top of just needing to seek it out and know about it. It should be in core so that it has the widest exposure. My only thing is, I'm not sure whether a daily message should be opt-in or out...

[Flynsarmy]

Mouseover tooltips are significantly better than wizardry stuff. The latter is very jarring and in-your-face and in my experience most users will simply turn them off instantly or wildly click through where possible - defeating the purpose of having them at all.

[Garbee]

Wizards were never considered too hard. We decided shortly after the meeting that they were too much extra stuff for not enough of a tangible result. This post has simply not been updated to reflect that.

For now I think we are all in alignment that a MoTD type hint in the console along with other console logs for first runs in different experiences are the way to go. For example: First time you open Device Mode, a message is logged explaining what was done and linking to the docs for more information. From here we can expand to do tooltips to help show off more advanced functionality as a developer is in a specific place, but that is a pretty far off thing compared to simple console logs.

[pbakaus]

I actually considered wizards extremely hard.

We have a real discoverability problem in DevTools. It's easy to believe that an improved UX (we're working on that!) will address it entirely, but I'm very sceptical.

The idea behind a wizard, or FTUE, is that it introduces a new feature to the user that the user has never used before. I.e. when we've added Device Mode for the first time, we would have embedded a simple tooltip overlay next to the icon that can be easily dismissed, but suggests that we have added new functionality to their tools.

DevTools is comparable in complexity to an editor, and most editors show you changelogs when they update themselves. The FTUE is the equivalent of a changelog (of course, an alternative would be an actual changelog..).

[Garbee]

I think this "wizard" naming may have a different notion to each of us.

What I'm thinking of a wizard as a UX that kinda would really take you through an experience to point things out. For example:

• Gray out areas not related to the tip at hand to point out the specific place in quesiton.
• Overlay a tooltip style popup to explain X function.
• Have a "next" to step over to another tip that may be in conjunction with the first or a "Stop" button to cancel the wizard.

My thinking of a wizard is a really in-depth look at a panel or feature of the tools walking a user through basically what a full tutorial would be within the docs. If you mean wizards as just popup tooltips when things are added/moved/changed/etc. in some way, then yea that is totally cool (and in fact should be the real end-goal.) Tooltips get out of most developers way pretty easily and aren't nearly as involved as coding what I think of a wizard style helper.