Some advice on UI's needed

Salutations,

So recently, I had some troubleshooting with UI’s.
I am not sure if Roblox Studio is reliable for UI designing, but I am terrible in it.

Currently, I do try to achieve an UI that rather fits a ‘cartoonistic’ game for my game based on roleplaying, but I am trying to keep the UI in dark mode just like the Roblox buttons.

The smaller buttons are, the more clean overview you have over your screen, as large ‘clickbait’ attention-seeking UI’s in money grabber games somewhat bother me.

Here’s my first attempt on an UI’s I made so far;

The UI uses Tweening, so it appears from left to right once the main button has been clicked.
Possibly, I’d either want to add features including icons such as ‘invite friends’ or ‘teleport to spawn’.
The UI doesn’t change its colors once hovered over it.
Also note that I try to keep the UI clean for mobile as well, so the functions and featues should be compatible with mobile.
Sometimes, I consider putting the UI on the topbar next to the default buttons, or somewhere else while it doesn’t bother the joystick on mobile.

I have also thought of making the UI draggable but from what I heard, it is still in development or has some certain bugs.

Anyway…

I’d really like to hear some opinions, thoughts on improving my UI or adjusting it to the screen properly, suggestions etc really appreciated!

I’m not a good UI designer but I think you should make the bar with 5 slot go down not go across.

Thank you for suggesting so. I’ll consider this eventually.

But do also remember that the joystick might get bothered on mobile.

Joystick has a higher ‘layer’ than any UI’s so you might not be able to click some of the buttons or you might keep clicking buttons accidentally when moving the joystick, hope you get what I mean.

1 Like

I actually updated the UI now.

And again;

Update;

I would say Studio itself is reliable for general UI designing, as there’s a lot of libraries to ease UI development such as roact, rodux.

However, what you’ve said in the third paragraph is a bit false, the size of the UI does not affect the cleanness of the UI.

What does actually affect is the layout itself, even though you have small components but you stack them up together when there’s a few buttons can be combined into one, this is considered bad UX. Additionally, I want to let you know that large UI does not mean it’s clickbait. You use large UI component to show how important that content is, something like error screen should be the most important, same as promotions. And, there’s really no point making it draggable, if it doesn’t take up a lot of space or overlay with another core UI (you should’ve moved the UI to somewhere else then :eyes:)

Apart from that, you might want to use “tooltips” for the button feature, only make it pop up when the user is hovering at the button.

Overall, it’s pretty nice and user-friendly. Keep up the work.

1 Like