UI/UX DESIGN TIPS TO ENHANCE THE EXPERIENCE OF YOUR GAME
What part in a Game frustrates the Player instantly when it’s done wrong? You guessed it: It’s the User Interface! Even though UI Design can be hard, here are some tips that might help you out when it comes to enhancing your UI easily and to avoid common design flaws.
This guide is especially aimed at Game Designers that just start out with UI Design, are doing games as a hobby or are from a different Game Department and are interested in UI Design.
----------------------------------------
Overview
1. Choose an appropriate font size
2. Have enough color contrast between font and background
3. Ensure your font is readable
4. Do not show too much text at once in dialog boxes
5. Have enough space in (padding) and surrounding (margin) UI Elements
6. Have just enough colors, and make sure they fit
7. Keep your design consistent
8. Plan ahead
----------------------------------------
1. Choose an appropriate font size
Something that can turn your players instantly away from the UI are font sizes that are too small. Nothing is more annoying than not being able to actually read what is written on the screen while playing, right?
While developing it may easily happen, that you develop your game on the same screen and don't test how it looks on other Resolutions and Ratios. People could play your game on tv, where the distance to the screen is larger than anticipated during development. Another possibility may, that you develop the game for mobile and were not able to actually test it on the device beforehand.
So what is the best solution to ensure that your font is readable for all cases? Thankfully for us, best practices exist for this particular question. The awesome people in charge of the Xbox Accessibility Guide recommend the following sizes:
- Console: 20pt (26px) at 1080p; 29pt (39 px) at 4k
- PC/VR: 14pt (18px) at 1080p; 27pt (36px) at 4k
- Mobile: 14pt (18px) at 100 DPI; 27pt (36px) at 200 DPI; 54pt (72px) at 400
- DPI; scale linear as DPI increases
If this is too technical for you, then just remember to actually test your game on different screen sizes and distances. Do you have a TV, that you can plug into your PC? Great! Test, whether you are actually able to read the font while playing and sitting on a couch. Also, remember to ask friends that have worse eyesight than you to verify your size assumptions.
2. Have enough color contrast between font and background
The next problem, that may make it hard to read anything in your game is low contrast between font and text background. I've been there, I've done that. To help you assess whether the contrast between font and background is feasible you can take a screenshot of your UI and edit it to grayscale in any software of choice. If you find it hard to differentiate between font and background, chances are you have to up the contrast. Thankfully, there are also tools out there, that allow you to paste the hex color codes of font and background and check if your contrast is acceptable. I personally use the coloors contrast checker for that, that also tells you how your contrast works on small and large text. This checker also follows the web accessibility guidelines.
Color Contrast Checker Website
3. Ensure your font is readable
This one is a bit more tricky to define, since accessibility needs differ greatly from person to person. There are a ton of unique, interesting and playful fonts out there, but sadly not all of them are suitable for large portions of text. Of course, this is a different story if you search for a font for your game logo (this is probably the best place to go creative if you want to!).
Finding a font, that gives your game character, while fitting the aesthetic or theme of your game and while also being readable is a hard task. Especially, given that unreadable fonts are by far one of the most criticized aspects in Game UI. So, I want to give you some rules of thumb to make it easier for you to navigate this process of finding the right fonts for your game.
First things first, in my experience, most Sans Serif fonts are easier to read than Serif fonts. Also, when in doubt use fonts that people already know, and that are commonly used for large portions of text. These are popular for a reason and have most likely been tested on a wide audience, including people with dyslexia.
Also, you should avoid fonts that have a small width, as these are most likely hard to read in smaller sizes. The same goes for fonts, that are too narrow. Also do not stretch your font if you want to increase the size. If you want to do that, just use the font size parameter in your engine and don't scale the font.
Lastly, my hot tip is, if you want to use multiple fonts, then use two different font styles at most. Too many fonts can easily look bad and are confusing to navigate. On that matter: font pairing is not that easy. On one hand the chosen fonts should have a certain similarity, but they should also differ enough to actually make it clear that these have different purposes. Luckily out in the wild, there are again websites and tools that give examples of font pairings that work good together and that are free, such as Fontpair.
4. Do not show too much text at once in dialog boxes
This one applies especially for PC and console! If your dialog box text stretches across the whole screen it get's incredible hard to read. But again, we have best practice guides out there, and this time they come directly form the TV industry. From Netflix for example.
For dialog boxes the optimum is to have just two lines of text shown at once. Each Line should not have more than 47 characters (as recommended by Netflix and BBC Guidelines). A black semi transparent background with white font is advised, but as long as you keep your contrast and font size in mind you can play around with these. Also, artsy dialog boxes inspired by old RPG's don't need to be banished, they can simply be adjusted to also be accessible.
5. Have enough space in (padding) and surrounding (margin) UI Elements
If elements are too close together they are easily confusing. It's hard to give a one solution fits all approach here, because it absolutely depends for which device you design. So, I guess the hot tip here is to just don't forget to add extra space between elements and keeping equal distances between elements, to ensure that everything looks coherent. It's also useful to ask for feedback on your design and let others check, if it is too overwhelming.
6. Have just enough colors, and make sure they fit
Color as a topic could easily fill multiple blog posts. So, I try to break it down to the most important things here. Similar to the font case, for colors less is often better. To avoid overwhelm, start with 3 colors for your design. In practice, many people use the 60-30-10 rule to help with balance and hierarchy in your UI.
This rule states that,
- 60% of your UI is a neutral color for your design
- 30% of your UI is composed of a secondary color that works great with your highlight color
- 10% of your UI is reserved for a highlight color
Example of the 60/30/10 Rule
Should you need help to find colors that work good together the following site is really helpful to get recommendations for color combinations. Should you already have a color you wish to use, you can also insert that and get recommendations on colors that are a good fit. I love this tool and use it really frequently.
7. Keep your design consistent
This one is especially important for your button design but of course applies to everything in your UI. Are all your buttons that do the same things styled similarly, so the player can easily identify what they do and how they are used? Did you reduce the button styles so they don't get clustered and irritating?
Consistency in your spacing is also something that applies here (as mentioned before). The same goes for consistency in your colors and fonts. This is the single point that brings everything together and helps your player in understanding your game and navigating your UI.
8. Plan ahead
So the biggest pro tip comes at last. I know most of us just want to start and make it work and don't plan too much ahead especially when we do something as a hobby. Maybe, you think that planning UI is boring. Trust me: you spare yourself of a big headache later on, if you start your UI creation process with a little bit of planning.
Example of how your screen sketches can look like (this one is from my Dragon Age redesign)
Things you should do:
- ask yourself what UI features and screens you need
- do research on the UI of other games (for this I absolutely recommend the Game UI Database)
- sketch out simple ideas of how your UI should look (it can be as messy as you want it to be)
- choose your fonts
- choose your color
----------------------------------------
Tools/Websites mentioned:
- XBOX Accessibility Guidelines for Text
- Coloors Contrast Checker
- Fontpair
- Netflix Subtitle Guide
- Coolors Website
- Game UI Database
----------------------------------------
So that's it! I hope this little guide was useful. Especially for you hobby and beginner devs. Have fun creating and should you have questions or need advice feel free to hit me up.
