Hello developers!
This is my first community tutorial, so I hope I do okay!
Introduction
A lot of people have made UI design guides, but I am looking to teach you how to have a good navigational course throughout your UI. Shortcuts, quicker ways of reaching menus for players, etc.
Step 1: Understanding Lazyness
One of the things you should know, players could sometimes be lazy. They don’t want to click a bunch of buttons just to get to a menu, they want to play the game. You have to account for this, and make better navigation options to get to the menu you want, fast and painless.
Step 3: Understanding the perspective of you, and the perspective of the player
You should understand that the perspective of the UI from you is different from the player, or a new player. You made the UI, you made the layout, the design, everything. You know where that and this is, you know where everything goes. A new player? They don’t have quite the same experience. This is something you should understand and take into mind as you move on, to make your UI’s more easily accessible to the player.
Step 4: Shortcuts
Like I said before in the lazyness category, there should be easy way to get to things. For example, on your HUD you have your cash UI, if the player would want to buy more cash, simply add it so if you click your cash it takes you right to the shop. Simple, but important things like this could improve your UI’s navigation.
Step 5: Good use of UserInputService
In UI, buttons are a lot of it. Buttons help you get around the UI, but sometimes clicking can get tiring. (I know this is crazy, but yeah it happens to players.) A more simpler way would be to just hit > and < to switch UI pages (for example on the menu.) Or Q and E. UserInputService is something that can help you a lot to make your UI’s more navigational.
Step 6: Easy to look at
You have to make your UI’s easy to look at and find. Something like making the shop button in the bottom right corner, and home button in the top left, maps button in the top right, is not a correct way to do it. Your UI’s should be organized and clean. Do not add too much things to the screen, (but don’t add so little that the screen is empty) It shouldn’t be too hard to find something. When a player looks on the UI, and sees the home button, their mind expects all the other menu buttons to be right next to it, so they will look there.
This is in the top left corner of the screen, they are all together and clean. Two other things is that 1. you should add a easy way to know what screen you are on, for example the home button is bigger.
- Look at the underline for the menu buttons. Notice two things, after the home button there is a little swish adding a separation between them. Imagine if that was not there, it would look weird and with this, it adds a distinct separation indicating that you are on the home menu. Another thing about the underline: When someone first joins the game and looks, the underline will get them to look there. (and i am pretty sure the first thing you want players to see is the menu options.)
EXAMPLES
The swish is gone, the separation is now worse.
Home button being the same size, it takes away the player knowing what screen they are on.
Step 7: Pop ups
Often, if you have an events menu screen or something like that featuring limited time items. Most people will not look at it! Add pop ups instead so people see it while they are playing and then can click on it, faster, easier, and more reliable for you to know that the player will attend to this event/ featured item.
Step 8: Distinctive UI’s
How can you make a UI pop out more than other UI’s? Color, shape, brightness depending on how you use it. There are some colors that pop out more to people. Use those to draw in players to that specific UI, for example brighter colors might attract the eye. This includes brightness, but dont make it so much that it looks wayy to bright. Shape is another thing, if a UI has this cool organic shape, other than a square box, rectangle, or circle, it will attract the players eye.
Conclusion and Main Idea
Overall, players can sometimes be lazy, and you should add ways for them to better get to UI’s, etc. Make distinct UIs, menu buttons, featured UIs or something that the player needs to look at.
This is one that I think fits the qualities that are wanted. The screen you are on is bigger than the others. There is a distinctive line “swiggle” on the underline of the menu buttons which is separating them, indicating that you are on the Home page. The cash in the bottom left corner takes you to the shop, but then right above it is again all the menu buttons. (I combined the HUD and menu UI’s to show a final product for this tutorial)
I hope this tutorial helped you, if theres something I did not do in this tutorial I can do in the future ones, please tell me. Always looking to help people get better at what they do! 