[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)

[flavioislima]

@arielj , yes for sure. That will be really helpful.
I still think that an onboard with a brief explanation on the basic features is also good.
For instance, some might not know that Heroic supports cloud saves for games that support it.
Some people might not know that they can add Browser apps/games to Heroic.

So a modal with a few pages and not a lot of text is useful. some people will skip, for sure. But that is not on us. I tend to read all onboarding modals I get on mobile and desktop apps that has it. But I know not everyone does, that is fine I guess.

[lgcavalheiro]

@flavioislima @arielj Hi guys! I drafted a POC of this feature using intro.js: #3346

Basically what i did was merge #3135 into my branch and set the Help Component there in such a way where it can control the tutorials made using intro.js whenever possible (for dialogs i made them just appear alongside the dialog). Here's a video showcasing the functionalities:

finalforpoc.webm

I Implemented just the tutorials that Flavio mentioned earlier in this POC:

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

Regarding development aspects, here's how it went:

• Overrall dev experience is ok and the tutorials are pretty straight-forward to implement, specially using the wrapper lib for React: https://github.com/HiDeoo/intro.js-react it's not mandatory but makes some things easier
• It doesn't play nice with popover api, so hints and steps won't show up over components that use it (demonstrated in the video) and i haven't found a way to make the intro.js elements use it as of yet
• Styling the tutorial elements is pretty straight-forward as well, including syncing with the current selected theme
• Could not manage to get the hint elements to be interactible via controller
• Step elements play pretty nice with a controller OOTB, moving left and right when a tutorial is active will cycle between tutorial steps
• Some pages didn't play particularly nice with steps (e.g wine manager, which is why i used hints there instead), idk what it could be atm

I wanted to make this POC available to you before Christmas, since i will be pretty busy with my post-grad up until March, which is why i haven't spent more time trying to fix some of the caveats mentioned above, i will be available to program some more stuff for this every now and then, but if you want to take this over go ahead. Oh yeah also Happy Holidays! :)

[lgcavalheiro]

When searching for onboarding libs, i've also found these if anyone is interested:
https://shepherdjs.dev/
https://driverjs.com/

[flavioislima]

@lgcavalheiro sorry for the late feedback, saw this when you posted but forgot to say anything.
looks pretty good IMO, for a POC we can definitely think about shipping it as experimental and then we can improve it over time by adding more hints and more information. Let's get back to it after the next release :D

[flavioislima]

When searching for onboarding libs, i've also found these if anyone is interested: https://shepherdjs.dev/ https://driverjs.com/

Really loved driverjs, looks amazing.

[lgcavalheiro]

@flavioislima sure thing thx! not sure about some of the stuff related to the caveats i encountered thought (e.g.: some screens not playing well with steps making me resort to hints, or the tooltips not being able to be moved to popover api. Makes me wish for an onboarding lib that leverages React's power...). Could try implementing with driver.js (actually using it at work too), but i don't think it will make much of a difference regarding the caveats, these libs all work more or less in the same way and stuff....

Oh yeah and maybe have a chat with the UX/UI ppl about what to teach via the tutorials, step order, copy and stuff

[krisztin]

Hey guys,

I'd love to help with this. I'm an Interaction Dev (UX Designer who codes && a Dev who likes users rolled into one) who has, amongst many things, worked on UK government projects so I'm quite keen on user friendly solutions that are also accessible. If you're open to working together, could you please put me in touch with your UX/UI folks?

It would be good to first nail down the actual user needs but as for the solution/tech, I agree with @arielj that welcome modals don't work (and the research agrees as well). They are actually notoriously bad for UX. Contextual help is the way to go.

I've taken a quick gander at both intro.js and driver.js and the
tl;dr of my opinion is that driver.js is superior

The long opinion

Intro.js

1, overlay system (the pulsing bit) is not very visible, probably not even passing contrast requirements but even users with good sight might not notice them
2, from a structural perspective, all the code is appended to the end of the page which means that keyboard users would have to tab all the way to the bottom (often waaaay past the button/option that they want to learn more about) to be able to focus the button...well, link, which brings me to my next point
3, the hint is actually a link hence you cannot open it with keyboard, not to mention it's an empty link so user with screen readers are left in the dark

Driver.js

1, Much better UX, giving you the option to provide better structured context even in multi-step form
2, Actually accessible modal...well, close enough. It's still using divs instead of proper text semantics and my screen reader had some issues picking up a step or two but that might just be an Ubuntu screen reader issue 😅️