Change onboarding by replacing tutorial with follow recommendations in web UI #16060
Conversation
Gargron
force-pushed
the
feature-follow-recommendations-web-ui
branch
from
2195e51
to
f94d21e
Compare
There was a problem hiding this comment.
I'm slightly in favor of this change. I'm kinda sad at the loss of the tutorial and its illustration, but I also don't think the current tutorial has a lot of value besides the welcoming illustrations.
The suggested onboarding process in this PR is faster and more to-the-point, which is welcome.
I have a few minor remarks though:
- I see no limit on the displayed suggested accounts, so if I understand correctly, this could be up to 40 recommendations at once, which risks being overwhelming
- tying the notifications permission setup with the “Done” button kind of makes sense, but if this can be skipped altogether, it could be slightly surprising for people to have different behavior based on that
- the first-sentence thing is dubious, I'm afraid it wouldn't work with all languages, and I find it very unlikely this alone would encourage people to make a more descriptive first sentence in their bios
| // On first launch, redirect to the follow recommendations page | ||
| if (this.props.firstLaunch) { | ||
| this.context.router.history.replace('/start'); | ||
| this.props.dispatch(closeOnboarding()); |
There was a problem hiding this comment.
Not completely sure about this. What if a user mistakenly or hastily closes the page without looking at the onboarding screen, and never see it again?
There was a problem hiding this comment.
I could tie it to componentWillUnmount but ultimately I don't think that would change anything. I want people to be able to go straight to search and not have the screen show up next time confusingly because they haven't pressed done.
On first launch, show the user a list of follow recommendations instead of the tutorial. The user can navigate away from the screen without pressing "done", and will not be pestered with the same page on re-launch. Pressing "done" triggers the browser permissions dialog as well as redirecting the user to the home feed.
Notes on the component
Unlike in other parts of the UI, the follow button icon in this list is a plus, that turns into a checkmark when activated, as well as having different colors (lighter default state, and green activated state). This is to make the action more prominent and to give positive feedback.
Another difference is that we fit the display name and username on the same line to make space for a partial bio. The bio is important to contextualize who the people are, but bios on the fediverse are unwieldy, so we force them on a single line and attempt to cut them to the first sentence only.
I do not claim that that is a perfect approach. It would be easier to work with if we'd maintained a strict character limit on the bios, because it is not possible to communicate multiple paragaphs/ascii-art/links worth of information about each account in a list like this without making it impenetrable to the reader.
I just hope it will encourage people to put the most important summary of themselves in the first sentence. For some accounts that I can see on my home feed, this is already true.
Why the tutorial has to go
The work on the official iOS app for Mastodon and its own onboarding flow made me take a second look at the tutorial in the web UI. It made me realize that the value the tutorial provides is very small in comparison. While I adore the illustrations, the tutorial spends time explaining trivial concepts like "home feed" and "reply" while delaying the user from seeing and engaging with the actual UI of the application. When the tutorial was first introduced, the advanced web interface was the default, which was quite overwhelming in complexity to new users. But that is no longer the case.
Follow recommendations for new users?
See what I wrote in #15945
Follow-up question
Is it time to get rid of the admin auto-follow feature? Perhaps instead, previously auto-followed accounts would get shown in this list somewhere near the top.