When users join a game, they interact with user interfaces. Unfortunately, not all user interfaces are made the same, and today, I want to teach you on how to make better user interfaces in the last UI tutorial you will probably ever need.
Just before I go through everything, thanks @cxmeels for teaching me some of the techniques that I will discuss in this post.
Step 1: General Advice
Before going onto new techniques that you can use to make better UIs, I just want to provide some general advice that I didn’t follow before, but is quite helpful.
-
Test your UI
Testing is key to making great UI. Use a wide variety of devices to see how stuff like menus work, and see whether you could improve the user experience. -
Don't overuse gradients
Gradients look wonderful, but I see that people overuse them at times. Ideally, you should only use them on backgrounds (e.g. a loading screen), or occasionally, on icons (only if you're trying to make a fluent look). Gradients can also be hard to see for people who have eye-related conditions. In most cases, using solid colour is better. If even after this, you still want to use them often, make the gradient subtle.
Step 2: User Experience and Accessibility
Making a UI easy to use and accessible is 10 times better than it not being easy to use and accessible. Here’s a few tips on how to improve user experience and make your UI more accessible to players.
-
Adapt your UI to each device type
As you may know, Roblox supports PC, Mobile and Console. Unfortunately, not all UIs work well on all 3. With a little bit of code for detecting which device a player might be on (take a read at [https://create.roblox.com/docs/scripting/input/index](https://create.roblox.com/docs/scripting/input/index) and use if statements to change your UI according to the device it is being used on), you can make stuff a lot easier, for example, it might be a good idea to make some buttons larger for mobile users (often isn't needed due to how Roblox handles display scaling), or it might be a good idea to add controls for console players. -
Adjust contrast to be more accessible
At least a third of people do not have normal vision, this means that they may struggle to see the contents of a user interface depending on the colour palette used. I'd recommend taking a look at [https://whocanuse.com](https://whocanuse.com), and seeing how your UI appears for people with different eye conditions (note, this only works with solid colour and will not work with gradients). -
Consistency
When designing your user interface, keep it consistent with the other pieces of UI in your game. You should also keep spacing between items and padding consistent as well!
Step 3: The pathway to better UI
Finally, I want to let you know about a few Studio properties and instances that will help you level up your UI designing skills.
-
Use the AbsoluteSize property!
When positioning things, think about using AbsoluteSize. Using this combined with using Offset instead of Scale and some math can really help you improve your UI. For example, if you want a menu to be at the bottom, instead of using Scale, you can use a ScreenGui to detect a screens size, then you can use some math (and the AnchorPoint property, in this case set to 0, 1) to place your menu at the bottom using Offset instead of Scale (make sure to check for updates to a players screen size as well!). To learn more about this, I'd highly suggest looking at the documentation page: [https://developer.roblox.com/en-us/api-reference/property/GuiBase2d/AbsoluteSize](https://developer.roblox.com/en-us/api-reference/property/GuiBase2d/AbsoluteSize). -
Use UIAspectRatioConstraints
UIAspectRatioConstraints is a useful instance that you can place inside of a piece of UI to make it stick to a certain aspect ratio. For example, if you want something to be in a square aspect ratio, set the ratio to 1. I would also advice messing around with AnchorPoints if you decide to use this, since otherwise, things may not be positioned as exactly as you might of wanted. -
Make sure to have sufficient enough padding on UI elements
When browsing around the DevForum, I see that people sometimes have little or no padding on user interface elements, this can be solved pretty easily through the UIPadding instance. Using this, you can provide how much padding you want on all 4 edges of a user interface.
Thanks for spending your time reading this tutorial. I really hoped that you managed to learn something new. If you have any other advice for developers, or suggest changes to this post, please make sure to put them in a reply!
