Profile Revamp - History Tab (Expanded View Improvement & New Studies)

samgawaran commented 2 years ago

Summary

Based on the research I did here: https://github.com/colonistio/design/issues/135 I found out that all AAA games and stat trackers don't show players you played against in the main card. though, they can be checked if the player selected the expanded view.

This submission is accompanied by the Ranked Tab revamp as both tabs are related to one another and also consider Goku's comment from here: https://github.com/colonistio/design/issues/125#issuecomment-1208718201.

Previous Design

Current design is the reason why we're doing this revamp. It sucks
Initial redesign is based on the current design, just cleaned up the details but after doing the research, the design could definitely be improved.
Initial redesign's expanded view looks cluttered and redundant (showing the players in the main card and showing them again when expanded)
Card size is not fixed. It adjusts based on the number of players you play with (8 player games are bigger compared to vs 3 players)

Details

Initial Redesign but changed Expanded View

Adjusted the expanded view to include MMR, Turn and Duration
Added a white stroke outline since the current redesign sectioning is clutter-y

No Players on Main Card

Remove the player section opens up space for the duration and turn it to be included again. (Based on research this are what players like to see)
Added a section for MMR, if ranked games become more popular in the website this would be needed. Didn't color them based on win/lose since the expanded view has player hyperlinks

with Game Mode Images

Based from how AAA games do their match history, instead of showing Champions, Heroes, we could show game mode icons so the the tab becomes more alive
1st, 2nd, 3rd, 4th, instead of 1/4 2/4 3/4 4/4
Logic:
- Unranked (host didn't change room settings or clicked on unranked matchmaking)
- Custom (player changed map, friendly robber, etc.)
- Ranked (player clicked on matchmaking)

Related Submission

https://github.com/colonistio/design/issues/135

Submission Checklist

[x] This submission abides by Des-lvl-1, Des-lvl-2 & Des-lvl-3

samgawaran commented 2 years ago

for review: @goktugyil @demiculus @JuanRoman77

loganstillings commented 2 years ago

I think the last iteration with game mode icons and boldened placements are great, thought the history table should still have a header to signify what each column means. Personally, I think the expanded view should have a more distinct background color from the unexpanded lists, its not obvious that the section is expanded (an icon could also help this if there's space). Also the white border is just ok, maybe with a different background color for the expanded section and a border only between the left and right sections would look better. What do other people think?

loganstillings commented 2 years ago

(an icon could also help this if there's space)

Realizing now that there is the info icon, but that makes me think there will just be a tooltip or something, not that the row is expandable. Maybe something like this would be better https://fontawesome.com/icons/angle-down?s=solid

samgawaran commented 2 years ago

Maybe something like this would be better https://fontawesome.com/icons/angle-down?s=solid

I tried this during the design phase too. but the problem is that we are already using that icon for our dropdowns, so using it again by showing an expanded view is not very UI-friendly in my opinion. Players will assume that once they click on that icon they will see a dropdown option, not expanding it, I'll try to check other icons or text that could work

Thanks for the other feedback. I'd also prefer the one with the game mode images, I'll expand on those further

Esqarrouth commented 2 years ago

https://user-images.githubusercontent.com/90673012/184549002-beea001b-19dd-4ba4-b278-cc978183580e.png

White border looks weird here. If we are using white borders, why does the other elements not have that? Find a better way to emphasize/de-emphasize those parts. Colors, gradients, indents, texture, placement are some ideas

Esqarrouth commented 2 years ago

https://user-images.githubusercontent.com/90673012/184549448-fac64595-63da-4988-9831-7fa78f195691.png

After the mode image, which I like, we can removed Ranked/Unranked, Custom texts and turn them into images as well
1st vs 1/4?
If not ranked, MMR shouldn't write there
VP: 3/8 Try a more imagey, game method of showing. Maybe our VP card? Maybe in game VP count style?

JuanRoman77 commented 2 years ago

This is just fine. There's no need to further optimize the History section right now.

samgawaran commented 2 years ago

2. 1st vs 1/4?

I prefer using the 1st, 2nd, 3rd format. I think it would work well with the game mechanics. AAA games just use Victory and Defeat besides Fortnite which uses #1, #2, #3

The reason for this is that majority of players wouldn't win. I would be ashamed if profile viewers would see I'm 4/4 in one of my games but if they see 4th they would not know if the game is a 4P or 6P game if they don't check the expanded view.

Adding more images and other feedback

Got it. I'll expand more on the game mode with images I'll keep a sample where there are some players and some don't.

Initial redesign is good for now.

I agree we can still use the initial redesign for the MVP version but seeing other game history screens, there's a lot we can improve on ours.

Esqarrouth commented 2 years ago

1st vs 1/4?

I prefer using the 1st, 2nd, 3rd format. I think it would work well with the game mechanics. AAA games just use Victory and Defeat besides Fortnite which uses #1, #2, #3

Why not Fornite style? That seems more gamey

Initial redesign is good for now.

I agree we can still use the initial redesign for the MVP version but seeing other game history screens, there's a lot we can improve on ours.

We're not testing or experimenting a feature here. We know it is going to be a feature that is needed, and will stay for decades. In this case the concept of MVP is not needed.

In this scenario we need to design solidly, and release in a solid way. We want to do the minimum amount of iterations after the design is finalized

samgawaran commented 2 years ago

Why not Fornite style? That seems more gamey

We already use # 1, # 2, # 3 on our global rankings. My concern is that also using that format in the game positions might lead to confusing UI

Esqarrouth commented 2 years ago

Aren't they differen screens?

samgawaran commented 2 years ago

Yes, but still, that format with the # sign may still be associated as a "global ranking" for some players even if they see it on a different screen.

Esqarrouth commented 2 years ago

Yes, but still, that format with the # sign may still be associated as a "global ranking" for some players even if they see it on a different screen.

Don't worry, they won't 😅

samgawaran commented 2 years ago

closing this issue, this is a more updated one: https://github.com/colonistio/design/issues/162

colonistio / design