New In-Game Topbar

A fresh design! I really like how modern it looks.

4 Likes

I actually don’t have many problems with this at all. The emote button looked very out of place and the backpack button was never used (I always just used the hotkey, and barely any games even utilize the backpack anymore). The new chat icon looks great and the new menu icon works fine.

Two questions: Have you added or do you plan to add back your stats on the leaderboard showing up at the top? That was something essential that’s been left out of the current leaderboard for some reason. My other question is do you plan on redesigning the chat box to look more like the rounded and darker leaderboard?

Here’s another idea as well: Bring back the chat menu with preset message options and replace the <13 chat filter we have now. :sunglasses: Just put a new icon next to the chat button that gives you a modernized version of the classic. I will never ever get over the fact that the chat menu is so much more enjoyable to use than the chat filter and this is prime real estate to express my opinion.

Hope this doesn’t break too many games, love ya smooch

6 Likes

Like it, but could use some improvements.

As @EpicMetatableMoment mentioned, bring back the old hamburger icon for the menu as it is a standard and having the Roblox logo there is unnecessary. Or at least, if you’re gonna keep it, add some padding, because the way it touches the top of the screen is very odd.

Also, in games with white backgrounds, this would not be very noticeable. I suggest to either make the background semi-transparent as before, or have the colors of the icons, instead of being white, be the reverse color of whatever’s in the background (if this technology is in the game yet).

Cheeres dev team, I like how you’re modernizing the game and I look forward to the chat and backpack improvements. :slight_smile:

2 Likes

Based off of the given screenshots, I’ve decided to have a shot at fixing the UI myself.

Here’s the UI as it is now (recreated to the best of my ability in Figma):

image

Firstly, that Roblox logo is disproportionate. Let’s tone that down to the same visual size as the other controls:

image

Already looks a million times better. We can further improve it by reducing the horizontal padding at the edges of the screen:

image

Something to note here is that the left side is inset slightly more than the right side - this is so that the Roblox logo and ellipsis menu button both visually appear the same distance from the side, as this accounts for visual illusions with the odd shape of the Roblox logo.

The healthbar is very small up in the corner of the screen; there’s plenty of space for it to fill, so why not thicken it up?

image

While we’re looking up there, why is the healthbar so inconsistently designed compared to the rest of the UI? If we apply a drop shadow, it preserves the UI style of the other elements:

image

Moving over to the chat icon, that big black stroke is really distracting. Why not simply cut out the stroke from the main chat icon, like this:

image

Much more subtle yet visually similar.

Moving back over to the ellipsis menu button, those dots are really hard to make out. Why not make the dots a bit larger?

image

Finally, when we open the ellipsis menu, it should turn solid, not translucent - the chat icon does it, so for consistency this menu should also do it:

image


Overall, I think my new design is much better. Judge for yourself:

Old

image

New

image

I really, really hope you take this on board. Recently I feel that Roblox’s UI designers have made less usable UI in recent times. We get excessive amounts of whitespace in our space-critical UIs, inconsistent UI sizing and styling in redesigned UI, and less well-thought-through details that add up to a pretty sloppy final result.

That’s not me resisting change, that’s me being critical and as impartial as I can; I urge you to not dismiss all of these criticisms as nostalgia blindness.

I like the general art direction, but your implementation of it needs work.

116 Likes

My first reaction is actually really positive. I really enjoy this new look and it will allow games to be more individualistic than before without having to work around the top bar so much. To put it in other words, this new UI is less intrusive, just like the Steam UI is for any game on that platform. Its there, and adds some core functionality.

This new appearance also makes the playerlist more cohesive, but I’m not quite sure how I feel about the healthbar. Feels a little empty without the Player’s name in the top right corner with it.

Is there any chance that the escape menu will also be recieving an update to match the new style of the topbar/playerlist?

3 Likes

I think it is amazing. The only thing that throws me off is the Roblox Icon in the top left, is that suppose to be the new Menu Icon??

-StompyDonut426

2 Likes

Looks great, but it should be optional, since people still like the old top GUI, plus modernizing everything isn’t always good.

2 Likes

I honestly like the change. And I know it is hard for people (especially the community) to change. And for developers who already had their own stuff inside of the top bar, I’m assuming this shouldn’t break their gui elements. They may need to reposition and resize them, but other than that. It shouldn’t effect them at all. I honestly prefer this version over the current one due to how much more modern. My biggest pet peeve is the roblox logo in the upper-left. I feel like it just takes too much space compared to the other elements. The one thing I would add is an api to add buttons in the drop down menu to do game-related stuff. But I don’t think this will happen.

All in all, the design is really nice and fluent compared to the current top bar. I just can’t wait to see the community backlash.

3 Likes

Will we ever get API to completely remove or hide the TopBar in its entirely? I know it’s drastic and it introduces the problem of not being able to reliably leave a game, but it could work heavily for games such as Super Nostalgia Zone.

5 Likes

Honestly looks much better. I still don’t like the use of Roblox’s logo to replace the hamburger, however I could work with your version. I don’t understand why Roblox decided to go the way they did and not make everything consistent.

5 Likes

Your version is so much better. Consistency is key.

The version before looks like it was made by a team of people with no form of communication. Each element has a totally different scheme.

13 Likes

:clap: I do think though that it is just a beta and the reason why they have betas is for us to give them this type of feedback. What concerns me though is that as you and Elttob have stated, it seems like there was a lack of communication or overall consistency.

4 Likes

That new health bar doesnt give me the vibe but ill stick with it.

Also, will the GUI still be offsetted when IgnoreGUIInset is off? I mean, theres no visible top bar anymore so…

2 Likes

This is perfect! No more top bar woooo! I think the Roblox logo should be replaced with the hamburger menu icon though, since that’s it’s function, it’d be confusing for new players and would look better in my opinion.

The Roblox logo replacing the “hamburger menu” icon helps me, because one of my game menus look like this:

The thing wrong right now is there is an actual hamburger menu I’ve implemented, which creates two hamburger menu buttons, but when the Roblox logo replaces their topbar button, players can more easily tell which button does which.

image

So yeah, this is just one example of why the Roblox logo needs to replace the menu button we’ve got now.

10 Likes

This looks much cleaner in my opinion but you should maybe “roundify” the tools icons in the inventory too !

Good job !

3 Likes

I really like it! I have a small suggestion. Maybe the stuff that says “Leaderboard” and everything should be placed on the left side of the player(s) and maybe put it bottom left. Though it should be just right so the compatibility with mobile or any device should be fine. Overall, looks pretty good! Looking forward to this update because it makes things look neater and cleaner than before! Also, I am happy that this new update stuff will not affect any UIs/GUIs, so yeah! Roblox updates have been getting better and better. Keep it going! :slight_smile:

Cannot wait to get this!
I want changeable keybinds.

3 Likes

The sidebar should be reserved for the leaderboard only, the other 2 options should be moved back to the topbar and it’d be good, the username and age indicator should be added back too as sometimes you need those for moderation hints.

4 Likes

It looks good but

also I press f to pay respects to all those people who put gui’s in the hotbar and they now have to change it to fit in with the new update

3 Likes