Skip to content

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature Request] A better UI for game switching #133

Closed
alex3236 opened this issue May 14, 2023 · 10 comments
Closed

[Feature Request] A better UI for game switching #133

alex3236 opened this issue May 14, 2023 · 10 comments
Labels
Area: UI/UX Issue labeled for User Interface/eXperience related issue Enhancement New feature or request

Comments

@alex3236
Copy link

alex3236 commented May 14, 2023

Why

Collapse can be used as a launcher for several hoyo games. So, rather than switching through the drop-down list each time, why don't we make some modifications to Collapse's layout to suit players who play more than one MiHoYo game?

How

For example, here is Minecraft Launcher, which could launch Minecraft JE & Minecraft Dungeons - This is one that can be referred to.
image

Collapse's burger menu makes no sense currently - #131 also mentioned this. All buttons it contains, except "Home", can be moved to "Quick Settings".

It would be appropriate to turn them directly into a sidebar that is always displayed. Also, The sidebar can provide the ability to switch between games, just like Minecraft Launcher.

In this way, dropdown box on top could simply serves to provide a region toggle - or even simpler, eliminate the dropdown box and modify it to a region toggle button (pic below), as hoyo games have only 2 "regions" to choose.
image

Conclusion

I didn't find a similar Issue, sorry if I missed. I think this is a good UI change, or at least not a flawed one - except that the image area takes up a smaller percentage.

@alex3236 alex3236 changed the title [Feature Requiest] A better UI for game changing [Feature Requiest] A better UI for game switching May 14, 2023
@bagusnl
Copy link
Member

bagusnl commented May 14, 2023

Hello, Alex3236! Thank you for showing your interest in the project and giving us feedback on UI/UX area of the Launcher.

About the #131, we already thinking about making the Collapse logo in the launcher always redirects to MainPage but haven't officially put in any commits or words about it due to IRL stuff and 1.70.x launch that we are preparing.

The current UI is designed to have separate menu to changing Game, Regions, and Pages (MainPage, Game/Cache Repair and Game Settings) associated with the Game, thus allowing us to easily add or remove parts that we want to as we add more features to certain Game.

Also, the problem with miHoYo games that technically not all of them has only 2 regions that we support, HI3 have 6 regions and making separate UI system just for HI3 is IMO unnecessary and will be quite unintuitive for some that plays HI3 in multiple regions and also other games in multiple regions too.

image

All in all, we really appreciate your feedback on the UI and we will discuss the matter with other contributors. If you don't mind, feel free to also make a Proof of Concept (PoC) on how the UI you imagined will look like considering the current feature sets that Collapse has while also keeping the modularity aspect of certain pages that can be added/toggled on the fly and maintains good UX for the users.

Thank you ❤️

@alex3236
Copy link
Author

alex3236 commented May 15, 2023

Here's my full design -

Principles

  • Commonly used functions should be able to be done quickly.
  • Make games switching more easily.
  • All layouts should make sense.

First,

we make some reasonable changes to conform to the design that follows.

Operation Image
Move this part of "Quick Settings" to "App Settings" (*Optional) image
Instead, move these 2 guys to "Quick Settings". (Seems "Game Repair" is already duplicated currently) image
Move game launch button to bottom-right, and resize Quick Settings button, as we'll add a permanent sidebar. image

This way, we have a more logical settings and buttons layout.

Then,

we add the new sidebar.

Operation Image
Sidebar provides all games available, with game logos. (Sorry, I haven't learned any of ui design tools, so here I use Photoshop, which doesn't work well, but is sufficient to provide illustration.) image
Now, the drop-down box only offers regions. btw, we remove the "Change" button and just give a confirm pop-up directly when user changes the region. image
You will find that the title bar is not very useful at this point. Therefore, we can try to eliminate the title bar. This is the final design I came up with. image

The window minimize and close button can be moved down, by moving down the social media area.

For a smaller sidebar, consider showing just the icons, or expand on mouseover.

"Notification" can be moved down with the minimize button, or placed in the sidebar.

Conclusion

With these changes, we get:

  • Meaningless burger-menu removed
  • Switching games is more intuitive and requires only one click
  • Switching areas with only two clicks (select-confirm, compared to the previous select-confirm-confirm)

@devrim6
Copy link

devrim6 commented May 15, 2023

Here's what my idea for a new game selection UI would look like. Icons could be a little smaller, but in my opinion this size was adequate. This design would still have the "warning pop-up skip" option in settings. With that option enabled switching only takes one click without adding more buttons and such to the sidebar or a similar location. Another feature that would work here is the ability to reorganize the icons in any order the user wants (probably not the most essential thing though).
image

@alex3236
Copy link
Author

Here's what my idea for a new game selection UI would look like. Icons could be a little smaller, but in my opinion this size was adequate. This design would still have the "warning pop-up skip" option in settings. With that option enabled switching only takes one click without adding more buttons and such to the sidebar or a similar location. Another feature that would work here is the ability to reorganize the icons in any order the user wants (probably not the most essential thing though). image

I had imagined this option. The reason for not proposing it is that the icons are a bit abrupt in the current ui style. Also, even with this option, I would prefer to move the region selection box down rather than keeping it in the title bar.

@bagusnl
Copy link
Member

bagusnl commented May 16, 2023

Thanks for all the ideas that both of you posted, its a great feedback on the current UI we have.
While I like how @alex3236's idea about removing the burger menu and instead moving the options into the gear icon inside the launcher, I'm quite conflicted by the fact that we removed the burger menu just to add back a big sidebar on the main page just for a game list. On this topic I quite like @devrim6's idea better. Though it would take quite a while to adjust the icon positioning every time when a new game is added, but I'd argue that even HYV won't add new game all that often.

For the region selector it would be more effective to be put right next to the game selector as we can confirm what game and which region selected faster in just one look at the general area. So IMO its fine to still have the top bar as we still have the notification icon and the minimize/close button.

For telling which game is selected we can also put a nice bright border around the selected game and additionally grayscale the game selection that is currently not installed, so its easier to see which game we have installed.

@alex3236
Copy link
Author

alex3236 commented May 16, 2023

Yes, devrim6's solution is nice if you can make the selector less obtrusive while next to the icon.
The reason I think it's a bit ugly is that even if the selector and the icon use the same rounded corners, it's a bit odd to have them together. Maybe right-centering the selector (make it next to the notification, not the icons) would solve this.

@gablm
Copy link
Member

gablm commented May 16, 2023

Based on devrim6's design and to people who play multiple regions, there could be a "pinned" functionality when a user could make the regions they play appear permanently in the navbar.
To distinguish regions, there could be a badge similar to the image with the region name or a symbol or its abbreviation.
That way, only the active region and the pinned regions are shown. If needed a region can be open or pinned thru the "+" menu.
image

@alex3236
Copy link
Author

alex3236 commented May 16, 2023

Based on devrim6's design and to people who play multiple regions, there could be a "pinned" functionality when a user could make the regions they play appear permanently in the navbar. To distinguish regions, there could be a badge similar to the image with the region name or a symbol or its abbreviation. That way, only the active region and the pinned regions are shown. If needed a region can be open or pinned thru the "+" menu. image

My other option is to display a drop-down list of regions when the mouse is moved over the icon, and the user can switch regions directly in the drop-down list, or continue clicking on the icon to use the currently selected region. But then, it becomes a question whether the confirm window pops up or not.

@bagusnl
Copy link
Member

bagusnl commented May 16, 2023

We already have an option to disable Confirm Warning window in the new preview version so that is fine I think.

@Cryotechnic Cryotechnic changed the title [Feature Requiest] A better UI for game switching [Feature Request] A better UI for game switching May 19, 2023
@Cryotechnic Cryotechnic added Enhancement New feature or request Area: UI/UX Issue labeled for User Interface/eXperience related issue labels May 19, 2023
@bagusnl
Copy link
Member

bagusnl commented Aug 6, 2023

@CollapseLauncher CollapseLauncher locked and limited conversation to collaborators Dec 17, 2023
@bagusnl bagusnl converted this issue into discussion #340 Dec 17, 2023

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

Labels
Area: UI/UX Issue labeled for User Interface/eXperience related issue Enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

5 participants