[UI] New Big List View for Library

[dawidgarus]

Problem description

The library screen UI needs some polishing, especially list view. IMHO it doesn't look good. It's take a lot of screen space, there's lot of empty space and (aside from game size) it doesn't provide any useful information to justify it. Here's another issue i have with the screen. When you change window size, the icons get bigger. So when you maximize a window, instead of having more games on the screen, you get only a little bit more games and a lot of empty space.

Feature description

I propose new design as presented on this mock:

Row height on the mock matches current row height at 1280x800 (resolution of Steam Deck).

I'm willing to implement it, but first I want to discuss the changes

Alternatives

No response

Additional information

No response

[flavioislima]

Looks good. Maybe we just need to adjust some colors and check the font size for accessibility matters. But the design in general I think looks nice.

[dawidgarus]

I tweaked a little bit colors and font sizes. See look or fidget around with it see: https://jsfiddle.net/Lt9dfw0m/13/

[biliesilva]

Hey @dawidgarus, I work in the Heroic UI/UX design and I made some changes in your code, check here: https://jsfiddle.net/45mwh8no/77/

[dawidgarus]

@bilianemoreira Thanks for your input, but I see some flaws with your design:

• Accent color is too prevalent and it's hard to focus. It should move user's attention to important things that need attention, like "Update available" or installation progress
• It's harder to distinguish which games are installed and which not
• Color scheme doesn't match the app, the background color is different than library's background
• Splitting version and last played into new lines is a bad use of available horizontal real estate. It also makes the title move up and it doesn't line up next to the image the same way for each game

Personally, I think that the paddings are too big.

How about this: https://jsfiddle.net/Lnpudqg5/4/ I made added more rounded corners to follow current style of the app, made the image bigger but reduced spacing and highlighted some information. Now we have two colors with clear and distinct meaning: green - good to go, orange - attention required

[biliesilva]

@dawidgarus your code has to follow the rules that we already have on Heroic to maintain consistency.

• All the links and titles that are clickable have this gold color. The green is just used for button play and when the game is installing (the message). We are using the image black and white and a gray "INSTALL" button in this case for showing that a particular game is not installed yet, then all the clickable titles have to be gold because the color represents a link and not an installed game in this case. Another thing is that we don't know if it will be difficult for the User to distinguish games this way with titles of the same color, we can only be sure by asking Users and doing tests, so we don't want to work with assumptions here, because we have a Discord channel and every difficult the User has, if they are having difficulties with interactions in the UI, we discuss there, and almost all the UI design (because a lot of modifications was made not following the UI Design), was based on a UX research.
• The colors I put here are the colors of the design that should be used from the beginning and that is even in some places and not in others, this is a detail that @flavioislima and I will fix, because it was a confusion with hexadecimal color.
• Splitting up the information is not intended to the use of space is for the User read more easily because is more organized this way and you can read two information faster.
• The padding you defined here is letting everything together, there's no breathing space and when this becomes a big list, it will be tiring for the User to see each one and even see the information in each row, because of the proximity of one to the other.

[biliesilva]

This is another option with 2 columns if we want to make use of the spaces (ignore image orientation in this example):

using hover:

[flavioislima]

The version with one collum looks better in my opinion. @dawidgarus are you going to work on this one? I believe we could close this ticket and open a new one with the final design and add it as a feature request. What do you think?

[dawidgarus]

@flavioislima should it be another view type or replace current list view? i can work on it, but there are 2 things:

1. i want to refactor how we get progress status, so the BE would push progress status to FE, instead of pulling and reading it from log files. I think it's crucial to do this before we integrate progress status inside button, as it the progress behaves weird at first.
2. i just personally really, really hate the color scheme. the colors are just so saturated...

[flavioislima]

@dawidgarus

Yes, I believe the ideal would be to replace the current list view. We think on adding an even more simple list view with less info and with a small line like 20 or 22px only, like steam has. Since some people might already have more than 300 games on Epic or GOG, would be good to have a more compact one. But for now lets focus on the current one.

1. Yes, totally agree. the way we get the progress now is completely hacky. I tried rewriting the function to read from stdout and send an event to the frontend but this approach was overkill and Heroic started to use a lot of memory and CPU. So I believe we could try different approaches. But we need to improve that part for sure.
2. About the colors, I want to start implementing Themes pretty soon, is on my priority list because colors are a question of personal preference and it's hard to have a unique theme that everyone would like. So I think you should not bother about that for now. :)