5 Tricks to improve your UIs

[cz5n (TypeError)]

Hey there! I’ve been making UIs for a while and thought it would be a good idea to share some of the things that helped me

Keep in mind I’m no UI god, I make mistakes and that this tutorial might have some problems

1. Use reasonable width of inputs

Do not try to fill the remaining space on your screen
your forms don’t have to be 100% wide

2. Use labels instead of relying on placeholders

While the user is filling out a form he might forget what you asked him.
And he has to erase the content to see what you wanted incase he forgot
Also having labels is better for accessibility reasons but in some cases it’s okay to use placeholders

3. Help users fill the form without errors

It’s always best to help the user fill out the forms correctly on the first try

1. Reduce the number of require fields

2. Pre fill data if possible

For example you can put a users username
since you already know that instead of them having to enter it manually

3. Limit the symbols that the input accepts

4. Consider removing borders

Usually a user interface looks much cleaner without borders
When founders or developers work alone without a designer, they tend to overuse borders.

5. Increase the clickable area

In other words the bigger the object is the easier it is to hit it.
For small controls, you can add an invisible clickable area that will help the user hit them

That’s it

Thanks for reading, I hope this helped you like it helped me!

Part Two

[D0RYU (nici)]

@cz5n

your screen your forms

little grammar error at the forms part, good tutorial though

[cz5n (TypeError)]

Fixed thanks for pointing it out!

[cxmeels]

I completely agree with all of this. There’s so much more to cover, but these are some great basic details that a lot of Roblox UI designers miss, especially when they’re just getting started!

In regards to placeholder text in inputs, you should opt to display either a default value or example of what input is expected.

Very well laid out too; I love the demonstration images.

[cz5n (TypeError)]

Thanks, it was a pain to make the demonstrations since i broke my mouse so i had to use my trackpad

[Obsentiel (Albert)]

This is really good. This is what I’m talking about, always use these methods when it comes to UI design for your games. And I really agree with the 2nd trick. It’s really really great, thank you for making this and spreading this to every other developer out there. Hopefully, they will also do this for their games so players can experience their game nice and well.

[GamersInternational (RIPWiiU3DSOnline0904)]

Some brilliant advice, I certainly need to implement some of these into my UI!

[VortexColor]

This is a really great tutorial!

Often UI design in Roblox games is not that good.
Thank you for making this tutorial I’ll definetly add it to my bookmarks.

[extraclear (Joi)]

I feel like it should be said that there is valid reason to have borders. Sometimes a colour palette may require darker borders for better visibility. Sometimes when working with primarily the darkest shades of black (27,42,53 or below) , using 0,0,0 to 17,17,17 for borders can be beneficial if necessary to distinguish certain elements.

I don’t often use borders when creating and programming a UI but take [ 4 ] with some grain of salt as there are genuine use cases, however rare they may be! Saying this as I feel like people may misconstrue your tutorial and apply one of your tips with disregard to the case-by-case basis of what they’re working on.

I also personally feel like you should include Dark UI tips + demonstrations too. It’d be nice to include more about Mobile, Console, Multi-Platform and Scalable Resolution (e.g 3:2, 4:3, 16:9, 16:10) oriented UI/UX as well.

[cz5n (TypeError)]

Yeah there is so much more to cover regarding UI/UX, So i will definitely start working on that very soon, Thank!

[ValiantWind (Val)]

Amazing Tutorial! I just have one question.

How do you make it so the GUIs are scaled for all devices?

I tried to make a GUI that doesn’t cover the entire screen, but it wouldn’t scale for mobile devices.

Is there a way how?

[hypnoticrunner12 (Nightcore)]

there is a plugin called autocale lite to do that