Default catalog page looks bad at 4K resolution

Reproduction Steps

  1. Go to Roblox.com
  2. Click “Avatar Shop” top level nav

Expected Behavior
I expect to get at least one full page of results.

Actual Behavior

Workaround
Not really

Seems unintentional to me and possibly a bug.

Issue Area: Roblox Website
Page URL: Catalog - Roblox
Impact: High
Frequency: Constantly

21 Likes

I think you can zoom it.image
image
I dont really know if it will work, i dont own 4K Monitor.

1 Like

You can zoom it in if you want it to look like the original way

Are you using a TV? The Chrome topbar is really small, so it makes sense that the Roblox website is also really small considering the Roblox website mostly uses absolute length units (like px).

My workaround is just keeping my roblox as half the page, and I can have something else open on the other half, or not.

1 Like

go into display settings and change scaling mode

1 Like

“My workaround is to not look at it”

I guess I just think a 40B company can fix their top level navs. Like there’s 1200 people working there and one person is in charge of exactly this thing and they should fix it. Am I crazy?

3 Likes

Not at all, but I don’t believe something like this is a priority unfortunately. There are quite a few things that have yet to be fixed but just haven’t been due to other things being more important at the moment. Although, I personally don’t see how hard it would be to fix something like this.

If I’m correct, it seems like the majority of ROBLOX’s playerbase don’t use 4K monitors or anything beyond that (if there is, even?), so they probably don’t take into account those that do as often as they probably should.

The only thing I can really suggest at the moment is to do Ctrl + Mouse Wheel Scroll to zoom into the page more. It’s not a complete fix, but it should work until there is one.

If only you were still working there… :sweat_smile:

What exactly is the expected behavior for any website on 4K? The small text is basically unreadable unless you zoom the webpage or your monitor is enormous (which at that point defeats the purpose of having a high DPI display), never mind the layout and content not being enough to fill the page.

I believe you are intended to scale your display, or else simply zoom your webpages; almost no website or application can gracefully handle 4K without scaling somewhere. The point of high DPI is to produce crisp edges and detailed imagery, not tiny pixel perfect UI.

Making a problem of how the website doesn’t produce enough content to fill a 4K screen is the same thing as me zooming out to 50% and claiming the same problem.

3 Likes

Dunno. I guess that 50% of paying Roblox users have 4K monitors. (If you have DB access, go check, I’ll bet 100K R$ I’m right.)

It would be cool to not show them a broken page.

Make the pics twice as big. Make the results list twice as long.

I don’t care. Just don’t make it look like no one cares.

Every other site I visit looks fine except for FB which insists on rendering their whole site in a 800px wide gutter.

1 Like

I think the users who use 4K displays know to zoom when things don’t look quite right. At least I’d hope so.

Either way, I think the most that could be done here is to center the content and give it a max width on higher resolution. Making things like tiles larger is going to throw off UI size balance unless you apply the scaling site-wide, and at that point the user should just zoom the page. Loading more content is not going to make the page any more comfortable to scan, and comes with its own technical pitfalls.

2 Likes

So this page is the best? There is no way to make this better? No one should even try because those guys with 4K monitors will just CTRL + +. UX team just go home? What if you had to sign your name on the bottom?

2 Likes

As I mentioned, you could limit the width of the content to a max width. Filling this page out with even more content is hardly a good solution; it’s horrible to scan the whole page left to right for each row because of how much content there is. Your eyes have to move so much, this is the same reason why we have word wrap.

Something like this is what I mean.
This is still not a great solution because the sidebar is miles away from the content, but it’s already more readable than simply having the content fill the entire page left to right.

Ultimately though either you need to zoom the page, or websites need to provide this kind of content centering to compensate for layouts stretching much wider than intended. Simply returning more results is not always the correct option, and in Roblox’s case it would create tremendous visual overload

Also there is a zoom CSS property but it’s not likely to play nice on all browsers yet. Roblox could technically force the issue at some point and just inflate the whole website on high resolution screens.

1 Like

Amazon and Steam, both places I spend way more money on than Roblox, take the approach of putting the content in a gutter. It’s not great, but I assume it’s the result of a million A/B tests, so it’s hard to argue against.

However they load several pages of content at once that I am free to scroll through without doing a new pageload/AJAX request.

This is crap.

This looks pretty good.

It’s definitely not great, yes.

A setting to control the number of results per page sounds like something Roblox was looking into at some point, albeit I’m not sure if that was for catalog or for another grid somewhere else. That would be useful here; the number of results could just default higher on higher resolutions.

These could probably be combined to get an acceptable result. I think a gutter would be an easy win towards better supporting 4K, and increasing the number of results per page for high resolutions would help with how you still run out of scrollable content quickly, (even if this is not necessarily a user-facing setting). On 1080p you get at least two scrolls worth of content, at least that would be ideal.


Also that last DOTA image is only 1080p, the same as my monitor. I would be curious to see if they gutter that on higher resolutions, or if they do something dynamic with the size or number of tiles shown, or they just outright scale it.

UI on the Roblox website always feels lacking and samey, it would be cool to see more creative tile layouts and nav widgets; referencing UI like this might be a good step forward in terms of design, bonus points if they are handling high resolution in a graceful way.

1 Like

I don’t think there’s anything wrong with taking a 1080p design and scaling it 200%.

What drives me nuts is the 50% white space on a page that gets several billion views a month from people looking to buy stuff. Like, what if you showed them 2x more things? Would they… buy 2x more things? Or what if you made the things you had look 2x better? Would they… buy 2x more things?

Long $RBLX

1 Like

Yeah I see what you’re getting at. There is definitely some interesting testing to be had here, and opportunities for innovation.

Simply scaling the page is for sure a cop-out when you could be using that extra resolution to pretty up tiles, show more information or offer enhanced functionality (e.g. try on accessories from the grid page), or even to simply show more tiles.

Gutter is a crutch for 4K in this respect.

These solutions are much easier in the interim than rewriting most of the frontend for hot pages though…

1 Like

I too have a 4k monitor (It’s really just a flat screen TV that I hooked my PC) but I don’t experience this problem. Maybe you have a scaling problem but I don’t know your setup so I can’t say for sure.

On this moment I’m using 1440p PC monitor and I think if it’s bug, it only appears on higher resolution like 4K or even more. At least I don’t have problem with scaling on resolution higher than 1080p and lower than 4K.

I don’t think this is unintentional.

I know some people have suggested to zoom in, I wouldn’t personally do that since some stuff may no longer fit on the display etc

Not everyone wants to multitask etc and I don’t see the point of having a big display if you’re not using the full 3840x2160 resolution by having nothing displayed on the other half.

Not everyone wants to make everything on their PC look bigger, however this is the best solution so far.

Majority of players are probably in between a 768p and 1600p display size (1366x768 for most people playing on laptops and 2560x1600 for people playing on tablets). Believe it or not, there is higher resolutions than 4K, there’s 8K TVs now (although they are probably very expensive) and people have tried using 16K resolutions before (mainly Linus Tech Tips).

Personally, I think we should be asking just to have an adjustable limit on how many items shows on each page, sites like Google and YouTube (when you’re looking at videos in YT Studio) do this and I think Roblox should be doing this too.

2 Likes