Site Redesign Beta Launch - Phase 1

[OPuni]

Hi, the completion date for manually added and tracked games is missing. I like to use this to mark games that have been played through.

 

[Pan'thon]

There's a button at the top of the game page to submit backgrounds (if one doesn't exist) but not the game icons themselves. I could add that as an option though.

This seems to be a bigger issue with RetroAchievement game covers. An example being Final Fantasy VII, the covers get stretched or skewed because of their ratio. It would be nice to be able to upload replacement covers to override the default import so they can be corrected where there are issues.

 

[x3sphere]

Hi, the completion date for manually added and tracked games is missing. I like to use this to mark games that have been played through.

Added this as a tooltip when hovering over the yellow gamepad icon. Not 100% sure about this yet so may change how it is displayed.

This seems the be the biggest issue right now. Everything else is stellar so far, great work!

I have added this back now (click the gear icon to access the setting).

 

[Skumblex]

The mobile version of the website has definitely gotten a lot better. However, I still have an issue, which-I think- was there already before the redesign. As in example, when watching my profile on a mobile device, clicking (i.e. touching) the PSN, XBOX, Google Play 'buttons' in the top row of the profile, leads to three different actions depending which button is clicked:

• Clicking PSN does not seem to do anything
• Clicking Google Play directly redirects me to my Google Play sub-profile
• Clicking XBOX sets the focus to the search field and thus opens the keyboard

I summarized this in the following video: https://www.dropbox.com/s/sm9tdo66i6ota3a/19-10-29-09-45-10.mp4?dl=0

Apart from this, I also found two cosmetic issues:

• If the number of services does not fit the screen size, the excessive ones go into a new line, which leads to different sizes for different entries (see below for how e.g. @Xamatu 's profile looks like). Here I would suggest the following: Whenever a linebreak is necessary, the services are evenly distributed to both lines. In the case below, this would mean that each line would host three services with the same width.

• The same is true for the different tropy types in the overview. Here, one can also think about putting bronze/silver trophies in one line and gold/platinum trophies in the other line (whenever necessary).

 

[DentedAphid7]

The "search sort" bar is too close to the platform tabs. Maybe add

    margin-top: 1.5rem!important

to

.mb-xl-4, .my-xl-4

?

 

[x3sphere]

The "search sort" bar is too close to the platform tabs. Maybe add

Hmm there should be some spacing there, this is what it looks like for me in Chrome and Firefox:

Do you have an ad blocker on? Not sure but maybe it is hiding the element, as the class name is "ad-spacer". I can rename that if it's causing issues.

 

[DentedAphid7]

Okay. I tried on my other PC it works fine. I'm using Yandex Browser and whitelisted the site.

 

[Pan'thon]

An ongoing issue I've encountered while opted into the beta.
Browser: Microsoft Edge Dev (the new Dev Channel rebuild on Chromium)

When I come to this website, after a few seconds to minutes, my browser just freezes and locks up. I can't see that any action I do is happening, like scrolling or clicking. If I resize the window, it goes black entirely. However, if I click to close a tab, I can't see that it's closed. If I close the browser and reopen (with the option to remember my previous session), it reflects that I had indeed closed those tabs.

This only happens when I'm logged in and in the beta, and only on the dev build of Edge. I put in a ticket to them as well, but I figured I'd let you know just in case it wasn't a browser-related issue.

 

[Skumblex]

The first issue from my previous post (with the video for demonstration purposes) seems to be resolved now!

 

[Lemonardo]

Hi. Here's some feedback about the beta design:

1. The beta design is too wide. While taking up the full width of the viewport makes sense on a smartphone/tablet screen (as they are tall and narrow), on a typical 16:9 monitor it makes the design unergonomic, as the user needs to constantly shift their view between faraway UI elements. Whereas in a narrow central column (as in the old design), the user sees everything imporrtant with a single glance.
2. The achievement bar below each game adds visual clutter, hurting readability. Additionally, it makes less games fit on the screen at once. In the old design, when I visit my profile, I see my 4 most recent games, and when I scroll down, I can see up to 9 games at once. In the new design, I only see my 2 most recent games when opening my profile, and scrolling lets me see only 5 games at once. Perhaps removing the achievement bar below each game and showing only the most recent achievement in the same row as the other stats for that game would work better?
3. I prefer light skins, as they usually provide better readability and cause less eye strain. The old design also provides a nice contrast between the dark titlebar with the user's stats and the rest of the column which is white. The new design seems like a dark-grey blob with a bunch of bright highlights.

Overall, I'm not thrilled about the beta. Perhaps the old design could remain as an option for those who prefer it?

 

[x3sphere]

An ongoing issue I've encountered while opted into the beta.
Browser: Microsoft Edge Dev (the new Dev Channel rebuild on Chromium)

When I come to this website, after a few seconds to minutes, my browser just freezes and locks up. I can't see that any action I do is happening, like scrolling or clicking. If I resize the window, it goes black entirely. However, if I click to close a tab, I can't see that it's closed. If I close the browser and reopen (with the option to remember my previous session), it reflects that I had indeed closed those tabs.

This only happens when I'm logged in and in the beta, and only on the dev build of Edge. I put in a ticket to them as well, but I figured I'd let you know just in case it wasn't a browser-related issue.

I'll see if it's fixable on our end when I get a chance to test with Edge, haven't tried the dev build yet.

Hi. Here's some feedback about the beta design:

1. The beta design is too wide. While taking up the full width of the viewport makes sense on a smartphone/tablet screen (as they are tall and narrow), on a typical 16:9 monitor it makes the design unergonomic, as the user needs to constantly shift their view between faraway UI elements. Whereas in a narrow central column (as in the old design), the user sees everything imporrtant with a single glance.
2. The achievement bar below each game adds visual clutter, hurting readability. Additionally, it makes less games fit on the screen at once. In the old design, when I visit my profile, I see my 4 most recent games, and when I scroll down, I can see up to 9 games at once. In the new design, I only see my 2 most recent games when opening my profile, and scrolling lets me see only 5 games at once. Perhaps removing the achievement bar below each game and showing only the most recent achievement in the same row as the other stats for that game would work better?
3. I prefer light skins, as they usually provide better readability and cause less eye strain. The old design also provides a nice contrast between the dark titlebar with the user's stats and the rest of the column which is white. The new design seems like a dark-grey blob with a bunch of bright highlights.

Overall, I'm not thrilled about the beta. Perhaps the old design could remain as an option for those who prefer it?

When we're ready to go bring the new design out of beta I'll keep the legacy skin around as an option. Perhaps not indefinitely though, as long as maintaining it doesn't become an issue I would say.

I think that we could offer a light theme as a color toggle with the new design, that's not a huge issue. This time around, we used SVGs for pretty much all icons so doing color swaps is simpler. One of the reasons why we never did a dark theme for the old design is because it wasn't very modular, this has been rectified with the new one.

Showing the recent achievements below each game could be made an option. Thought about doing that just for low bandwidth users, since it does make the page more heavy.

 

[Xamantu]

Hi. Here's some feedback about the beta design:

1. The beta design is too wide. While taking up the full width of the viewport makes sense on a smartphone/tablet screen (as they are tall and narrow), on a typical 16:9 monitor it makes the design unergonomic, as the user needs to constantly shift their view between faraway UI elements. Whereas in a narrow central column (as in the old design), the user sees everything imporrtant with a single glance.
2. The achievement bar below each game adds visual clutter, hurting readability. Additionally, it makes less games fit on the screen at once. In the old design, when I visit my profile, I see my 4 most recent games, and when I scroll down, I can see up to 9 games at once. In the new design, I only see my 2 most recent games when opening my profile, and scrolling lets me see only 5 games at once. Perhaps removing the achievement bar below each game and showing only the most recent achievement in the same row as the other stats for that game would work better?
3. I prefer light skins, as they usually provide better readability and cause less eye strain. The old design also provides a nice contrast between the dark titlebar with the user's stats and the rest of the column which is white. The new design seems like a dark-grey blob with a bunch of bright highlights.

Overall, I'm not thrilled about the beta. Perhaps the old design could remain as an option for those who prefer it?

Hey, thanks for the feedback. I mocked up a more compact view of the profile page, with and without achievements. These could all be independent options. Let me know what you think.

No light skin yet but we'll do it.

 

[x3sphere]

The same is true for the different tropy types in the overview. Here, one can also think about putting bronze/silver trophies in one line and gold/platinum trophies in the other line (whenever necessary).

I did some testing and for mobile I think it looks better if we put the progress bar section on its own line, like the screenshot below. Feels more readable than having the progress bar and date side by side, but let me know what you think.

 

[Feral]

I agree with having a compact view. Listing the achievements below each game was a nice idea but in practice it means nothing, some games have most of the icons looking very similar, if not exactly the same and there's no way to tell what the icons mean.

I also agree with the platform over-spill looking weird on mobile and tablet. On my profile with 7 platforms it's 5x2 when it should really be 4x3.

I also miss when you completed a game the whole game bar was coloured green in the old theme as it stood out more, but this would probably look awful on the dark theme so I'm not sure it should be brought back.

The progress bar on it's own looks better than the date at the side.

On mobile the top banner background should probably be shrunk, even if it cuts off part of the image as it takes up a lot of space on smaller screens. You have to scroll down before you see anything of importance.

 

[x3sphere]

On the service badge stacking, agreed that it does look better if we ensure there's more than one service when breaking to a new row.

Right now I'm not sure about having them stacked equally though. Here's some comparisons...

I like the first personally.

 

[Xamantu]

I prefer the second version, 'cause the first one gives the impression that the last two services are more important than the rest

 

[x3sphere]

Added an option under Preferences to hide the achievement images under each game. If you enable this, then the recent achievements will show in the sidebar instead.

 

[Lemonardo]

Hey, thanks for the feedback. I mocked up a more compact view of the profile page, with and without achievements. These could all be independent options. Let me know what you think.
View attachment 10275

No light skin yet but we'll do it.

Yeah, that's better and more easily readable on a wide screen.

On the service badge stacking, agreed that it does look better if we ensure there's more than one service when breaking to a new row.

Right now I'm not sure about having them stacked equally though. Here's some comparisons...

View attachment 10278

View attachment 10277

I like the first personally.

I'd vote for the second one, it makes the services more equal, and it will also decrease the number of times the break changes when you are resizing the window (as the first option would need to change from 6-0 to 4-2 at first (I assume 5-1 would be skipped) and then ultimately 3-3 when the window is narrowest, while the second only changes once, from 6-0 to 3-3).

Added an option under Preferences to hide the achievement images under each game. If you enable this, then the recent achievements will show in the sidebar instead.

View attachment 10279

This is great. Now, if the compact view from Xamantu's mock-up I quoted could be implemented, I would gladly switch to the new design already.

 

[x3sphere]

Compact mode has been added as an option now! It's under the Layout section in Preferences. Also added a new option for selecting the default language used for achievement lists across the site (as suggested by @OKANIDO)

An ongoing issue I've encountered while opted into the beta.
Browser: Microsoft Edge Dev (the new Dev Channel rebuild on Chromium)

When I come to this website, after a few seconds to minutes, my browser just freezes and locks up. I can't see that any action I do is happening, like scrolling or clicking. If I resize the window, it goes black entirely. However, if I click to close a tab, I can't see that it's closed. If I close the browser and reopen (with the option to remember my previous session), it reflects that I had indeed closed those tabs.

This only happens when I'm logged in and in the beta, and only on the dev build of Edge. I put in a ticket to them as well, but I figured I'd let you know just in case it wasn't a browser-related issue.

FYI, I was able to test with the dev build of Edge today and didn't encounter any issues.

 

[Lemonardo]

Compact mode has been added as an option now!

Thanks! However, with compact mode enabled, when I hover on the first platform on the platform bar, some of the contents of the top bar overflow into the next row. Might be because my nickname on PSN is too long.

Here's a screenshot of when I hover over PSN (you can see that the contents of the top bar are split into two rows):


And here's one of when I hover over Xbox Live (no splitting into two rows):