Move the new topbar buttons upwards so they're centered in the old topbar space

The new topbar was just released but it looks very uncomfortable in games that have already implemented a custom topbar because the buttons in the topbar are not centered in the space the old topbar was (a 36px tall ribbon).

Current:

Please move these buttons upwards (e.g. by 2 pixels) so they’re more centered. It looks and feels much better and eliminates the time developers need to spend to fix this.

Suggested:

To center these buttons otherwise if they cannot eliminate the topbar from their games due to UI design, developers would have to make their custom topbars 40px tall, which is huge, ugly, and does not work with the playerlist.

21 Likes

Thank you for your feedback and there were many considerations we had to make when working within the constraints of the 36-pixel tall top bar area for the new top bar. Removing of the old dark bar that sat in the top bar was base on a lot of community feedback asking to make the top bar feel visually lighter to better show more of the game.

The offset is for a few reasons that all affect each other,

  1. We needed to have room for the badge icon that sits on top of the chat icon

  2. With the new in-game menu (that is slowly being released right now) we wanted to have the close button (x icon) in the system bar line up with the position of the Roblox icon, moving it any higher near the edge of the screen would make it feel too tight, not giving it enough breathing room along with making it feel less comfortable to press.

  3. Making the icons any smaller would reduce their tappable size along with our needed to keep a consistent size for all our icons across the platform.

Sit tight more updates and bug fixes will be coming out, continuing to add more visual consistency to all the in-game menu elements.

2 Likes

This makes sense from a cursory glance, but these don’t seem like problems or necessary to stay the way they are.


The badge for the chat icon could be embedded within the icon itself, eliminating the need for space above.
E.g. image image


I have a hard time seeing how 2 pixels would make the Roblox icon and the X button less comfortable to press when they currently already have a huge left padding. I do not feel a difference at all. Also, the positioning of these buttons could also be adjusted to be consistent between the topbar and the in-game menu, so I’m not sure how there’s an issue with being unable to have them line up if they’re centered on the topbar space.

For example

I think this is what it currently looks like:

This is what it looks like moved up by 2 pixels:

I really don’t see or feel much of a difference.


The icons do not need to be made smaller, they are already a comfortable size. Their positioning however could be less unpleasant and easier for developers to work with.

6 Likes