flavioislima
commented
1 year ago @biliesilva
Open flavioislima opened 1 year ago
flavioislima
commented
1 year ago @biliesilva
HeIIow2
commented
1 year ago 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
commented
1 year ago 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
commented
1 year ago @HeIIow2 any progress on this one? :)
HeIIow2
commented
1 year ago @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
commented
10 months ago @flavioislima maybe we could use this: https://github.com/usablica/intro.js/
There would be some issues to sort such as:
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
commented
10 months ago This can be connected to what I was doing here https://github.com/Heroic-Games-Launcher/HeroicGamesLauncher/pull/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
commented
10 months ago @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:
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
commented
10 months ago 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
commented
10 months ago 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
commented
10 months ago @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
commented
9 months ago @flavioislima @arielj Hi guys! I drafted a POC of this feature using intro.js: https://github.com/Heroic-Games-Launcher/HeroicGamesLauncher/pull/3346
Basically what i did was merge https://github.com/Heroic-Games-Launcher/HeroicGamesLauncher/pull/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:
I Implemented just the tutorials that Flavio mentioned earlier in this POC:
Regarding development aspects, here's how it went:
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
commented
9 months ago When searching for onboarding libs, i've also found these if anyone is interested: https://shepherdjs.dev/ https://driverjs.com/
flavioislima
commented
9 months ago @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
commented
9 months ago 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
commented
9 months ago @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
commented
6 days ago 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
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
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 😅️
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