[UI/UX] Show onboarding modal/screen explaining Heroic main features when opening Heroic the first time

[flavioislima]

Problem description

Heroic nowadays have some features that not everyone knows about like Add Game to Steam, Cloud sync Saves, Wine/Proton download/manager and so on.

Most people installing heroic the first time and even after a while might never discover these features.

Feature description

Show a Onboarding Modal or screen that compiles the main Heroic features. With maybe screenshots and video tutorials, a link to documentation, github issues and discord.

Having a proper guide with an overlay with arrows and explanations would be ideal but that might be too complex.

Alternatives

No response

Additional information

No response

[flavioislima]

@biliesilva

[HeIIow2]

I'd like to work on it.
I will edit this comment with some details about how I will implement it,
after I have took a look at the codebase.

<3333

I thought doing this would be easier.
Because this is quite a nice thingie I will work on it, but if any other person wants to do this, I don't mind, just let me know. Cuz I will be slow.

[flavioislima]

I'd like to work on it.
I will edit this comment with some details about how I will implement it,
after I have took a look at the codebase.

<3333

Nice, if you have any questions or need help just get in touch on our discord.

[flavioislima]

@HeIIow2 any progress on this one? :)

[HeIIow2]

@flavioislima Nahhh I was to not smart, I couldn't the application, even with the discord. Once I get a new set up I will look at contributing again, till then I've given up <3333

Sorry for not making this clearer <333333333333333333333333

[lgcavalheiro]

@flavioislima maybe we could use this:
https://github.com/usablica/intro.js/

There would be some issues to sort such as:

• syncing the styles with the theme (otherwise we'd have the onboaring components with a style and heroic with another)
• decide what and how to onboard (copy, tutorial links, videos etc)

I got my hands kinda full rn but I'm willing to give it a shot with intro.js, it's just gonna be kinda slow.

[arielj]

This can be connected to what I was doing here #3135 to include a help component where we can put content for the elements that are currently in a given screen (and we could have content that is always present or add some kind of search functionality or something).

The issue I have with onboarding screens is that people have no context about how the app works when they open it for the first time, and too much information at once is just overwhelming.

The initial implementation of my Help component there is that it will show help specific to the current screen to reduce the number of topics a user see at different screens.

[flavioislima]

@arielj i agree that having too much info on first launch is not ideal. But at the same time having no info at all is not good as well. we should try to do a simple on-board only talking about basic heroic features and how to do them.

I have in mind some things like:

• how to login
• how to sideload a game
• how to refresh the library
• how to download and use wine and proton

But in small texts not a lot of info.

And then the help component, like you said, can give context to some screens and other features that are hard to find right now.

@lgcavalheiro this looks cool. If you have the time I would like to see a implementation with that 🙂

[arielj]

The thing for me is that maybe there's another place to put that info without creating an onboarding flow (that, at least in my experience, users just dismiss because they want to just use the app, so you need a way to show that again on demand later?).

For example: for how to login, add a sideloaded game, or refresh the library, maybe it's better to have a text in the Library body when it's empty saying "Your library is empty! Login to Epic/GOG/Amazon if you haven't, you can also install games manually with this button. If you are logged in and still can't see your game, refresh your library click the (icon) icon." Currently we just show a big empty space and give users no context of what to do.

Users can't dismiss that and it's in the center of the library, they will have no excuse for not reading that or not knowing what to do next.

For how to download wine, maybe during the install dialog of a game that requires it, if they don't have any wine installed we can show a warning and take them to the Wine Manager section, and in the Wine Manager section explain what it is and what's wine vs proton. They will see the information when they need it.

For users to learn about cloud saved, maybe the first time a game is launched and it supports cloud saves we can show a prompt saying this game supports cloud saved, this features is disabled by default but you can configure it here and actions to either not launch the game and go to configure it or just continue launching the game.

I'm fine having an onboarding stuff if it's needed, but I think it doesn't replace having that information outside of the onboarding when possible next to the place that needs that info.

[lgcavalheiro]

I mean, depending on how we implement this, we can have the best of both worlds, intro.js also has support for hints: https://introjs.com/docs/examples/basic/hints
So instead of having a guided onboarding, we could have something like a help button that activates the hints for the current page + modal on the left or right with more info (videos, tutorial links etc)