The 6 Most Obvious UI / UX mistakes you’re making on your project

Cover art: Loosum from Rage (PC, Console – iD Software)

The 6 Most Obvious UI / UX mistakes you’re making on your project

Introduction – Excuses, excuses

Of course I get it, you’re Indie. Or switching careers. Or fresh out of school – or any number of legitimately good excuses. You’ve got a lot on your plate, and not nearly enough time to learn UX Design, one of the most complicated artforms in the modern world. So you could be forgiven for making an okayish User Interface at best, a mind-bendingly poor Use Experience at worst. Well… I could forgive you – your audience (hiring managers & players alike) will burn you alive.

I know The Heat all too well because I’m your friendly neighborhood professional User Interface Artist and User Experience Designer (1-on-1 mentor too) of some 20 years. Games, apps, websites; if it has a pixel, I’ve probably done it. In the Covid-age of wanting to give back generously, I’ve put together some wise words (in the wisest format known: bullet points) to help every newbie, indie and Up-And-Comer avoid obvious mistakes… and make brand new ones of their own!  

A note to my fellow designers: Nope. I’m going to stop you right there. Yes, there are other ways, considerations, exceptions, blah blah blah to the guidelines I’m promoting here. This is meant for the non-designer; a sort of Survival Guide if you find yourself lost in a Bauhaus desert. These rules aren’t meant to shape an incredible UI designer – just spare the world a ruinously terrible one! 

Nova Blitz UI UX game design mentorship low rez
The Landing Page I designed for Nova Blitz (PC – Dragon Foundry)

The 6 Most Obvious UI / UX mistakes you’re making on your project

1 – Bad Typography

We’ll start with the obvious. Oh beloved fledgling designer, your choice and use of the written word is stupid-bad. Some Graphic Designers spend the better part of their careers studying Typography, so there is little shame in being hot garbage when put to task. Nevertheless, your typographic sensibilities truly add or rob a project of its luster. Here are a few easy typography lessons to remember:

  • Pick a Sans Serif (fonts without the “fiddly bits”). They read better, especially on mobile

  • Work around 2 fonts: a Title font and a Body font. A title font should be showy and used sparingly as (unsurprisingly) titles and subheadings. Your body font should be comparatively boring, and read well small and in dense paragraphs

  • Pick 2 font sizes at most and stay consistent on all your screens. Optimally pick two sizes exclusively for your body font and one size exclusively for the title font. Determine an appropriate font size based on your worst-case text field on your worst-case medium!

  • Solve for long text fields by making sure most of them are double-lined. It’s a simpler solution than something programmatic. Translating? German is often twice as long as any English equivalent, so work around the idea of things inflating at least by double.
  • When in doubt, left justify. Right justifying will get you killed in Art School, or worse

The HUD I designed for Zombie Gunship Survival (mobile – Limbic Games)

The 6 Most Obvious UI / UX mistakes you’re making on your project

2 – Horrible HUDs

HUD design, like typography, is an ocean unto itself complete with pearlescent beauty and abyssal frights. Like I tell every mentee and dev team, ”we’ll be working on the HUD all the way up until we ship”. 

And we do. Always. Every. Single. Time. 

Thus, having an awed appreciation (and primal terror) of game HUDs, there are a few things you can fix that’ll make you read like a designer well beyond your years:

  • No thin lines! These are easily lost when the action heats up, and turn damn-near translucent on mobile

  • No red HUDs! Red reads as invalid or conditional, and you’ll have a Sisyphean-ass time trying to create a visual language without using red as a cautionary.

  • Try not to have floating text, support it with a shape or design behind it to help separate vital information from screen noise. Can’t do that? Add a subtle stroke or shadow around floating text fields to draw it out from the background. You are using a thick sans serif, right?
  • Take a video of the game in action and superimpose your HUD on top of it as early as possible (especially the wireframe!). Get a sense of how your HUD works in motion and in hectic, colorful action. No HUD will ever exist statically, so video helps you prototype under realistic conditions that much faster.

The Enemy Health Bar widget I designed for Wasteland 3 (PC, console – inXile & Microsoft)

The 6 Most Obvious UI / UX mistakes you’re making on your project

3 – Overabundance of Information

I love my designers, love ‘em to death – but I absolutely believe they think their job is to put as much stuff on the screen as humanly possible (The Great Kitchen Sink School of Applied Design). UI/UX’s job is to shred a Designer’s mobius-long wishlist to comparative ribbons. Absent a finger-wagging UX Designer by your side, you’ve probably fallen into the “100% of this information is relevant and needed, dammit!” trap a few times yourself. A few ways to avoid that:

  • Write down everything you want to display on the screen and assign it a number value from most to least important. That’s your Hierarchy, a critical concept in UX design. Place the items on your list in order, with the highest value getting more real-estate and prominence than the lower values. Build on top of your numerical importance. Trees never start with the leaves – and neither should you. Start with the root, vital priorities of your design, and build on top of your foundations.

  • Have “opt-in” information. This can be: displays that only come out when the information is relevant (updates or experience gained). Info that fades away after X amount of time (HUD without action, achievement milestones). You can even tuck tertiary-level functions away under a single option button (ellipsis or hamburger menu buttons).

  • Start removing huge portions of your Interface and test it out. Or turn around and start with only the most basic 3 elements on the HUD and build from that. You’ll be genuinely surprised how little you need on the screen to play. You’ll also discover that the less there is on screen, the less chance you have to mess it all up, either aesthetically or logistically. Minimalism saves lives and projects. 

Wait a minute… you like UI UX Design, too? Want to learn safely from home?

I run an online 1-on-1 UI UX Design mentorship program that teaches you game and app design. Affordable classes that teach you real-world skills with real-world projects. Four star rated!

video game ux designer ui artist wireframe wasteland 3
The Shell Menu Inventory screen I designed for Wasteland 3 (PC, console – inXile & Microsoft)

The 6 Most Obvious UI / UX mistakes you’re making on your project

4 – No Grid System

A consistent grid system helps the eye parse information cleanly and swiftly. Non-designers tend to place things by eye, and this is, of course, wildfire dumb. Placing elements on a tight grid with comfortable margins will make any screen read with crystalline clarity. In general:

  • When in doubt, space things in Golden Ratio 3rds. Pairing ⅓ with ⅔ has been an attractive rule since long before the Renaissance; no reason to think it’ll get stale now.

  • Make sure that if your text is in a container or shape that it has a comfortable margin of space around it. If you don’t have the visual chops for this, just make sure the text doesn’t run all the way to the edges of a shape or past it. You’d think this’d be obvious, but… here we are.
  • Conceptualize your screen in terms of horizontal slices, like a hamburger. This isn’t just good practice for responsive design, it also helps to compartmentalize the information for both the audience and the poor designer / coder.

PC/Console style Direct Messaging system speculative design for mobile gaming

The 6 Most Obvious UI / UX mistakes you’re making on your project

5 – Importing the wrong solutions

Tell me if you’ve heard this one. You’re on Pinterest or Google grabbing whatever you can find UI-wise. In this hydra-handed snatchfest, you find an interface you like and exclaim, “Why, this interface is perfect for my needs, I’ll just copy-paste this and my troubles will be over!”

Except they won’t. Them troubles are going to go through cellular mitosis. 

When you copy and paste UI, you’re not taking into account the months, possibly years of refinement it took several Talents to solve a very specific problem. You’re grabbing somebody else’s answer to a visual question only obliquely related to yours.

And this is the classic, possibly classical mistake of focusing on technique first. It always fails you because your copying something contextless and without insight. For reasons that are difficult to fully articulate here, let’s just say copying somebody else’s interface verbatim always leads to problems, most especially when you don’t know what rules to bend and which to snap like wet celery. Instead of committing grand-theft-design, try to start with a better process

  • Sketch out your ideas first. This is known as the Conceptualization phase of my job, where I figure out what all the “low-hanging fruit”-level problems are. Sketch roughly until you have the basic “scaffolding” around the project’s basic issues, quirks, and challenges

  • Wireframe. There’s lots of ways to do it, mostly because it’s an intermediary between sketches and final art. For this phase, place things on a grid, and move elements in gigantic zones. Think of the wireframe as a TV-dinner: each section is meant for a different part of the meal, compartmentalized and specially sized for the meat, the veggies, the cobbler…

  • Art pass. If the wireframe phase was done with respectable vigilance, you can simply paint-over your Wires with pixel-perfect art in the Art Pass (this rarely happens). So make sure when you wireframe, set it up as close to the final dimensions as possible and throw it in the game in as early a form as possible. Real testing doesn’t happen in a lab – it happens in the field. 

learn UX and UI call of duty
The Shell Menu War Room screen I designed for Call of Duty Advanced Warfare (PC, Console – Seismic Games & Activision)

The 6 Most Obvious UI / UX mistakes you’re making on your project

6 – Not Using UI as the test for Design

Speaking of testing, this last one is near and dear to my heart as a man who, by necessity, can’t do his job without doing a little of everyone else’s. And here’s the dirty secret I know about being the man “who wears many hats”. 

If your UI guy/gal is reasonably good and they’re struggling with your design – it’s a bad design. Full stop. Here’s how to fix gameplay issues from the UI/UX on backwards:

  • If your inventory system requires a massive space, ask yourself just how much loot the player is receiving every 5 minutes, every hour, and by endgame. Nobody has fun with inventory management – make sure you’re balancing the game to mitigate the player’s annoyance first!

  • If you’re showing a variable number of elements on screen like status effects, how many are there on average? How many can there be max? Fun fact: I had to make a blackjack minigame back at Midway Games. The average Blackjack hand is around 2-3 cards… but you can absolutely get 4 aces, 4 twos, 4 threes… now try to make a single system that accounts for 99% 2-3 cards in a hand and also accounts for the 1% design-flaying exceptions!

  • If your players or testers end up dying a lot, it might not be the difficulty. It might be poor feedback. Do you have potent signals for low health and ammo? Are there audio as well as visual cues, for example, the sound of a clip becoming hollower with lower bullets? Did the player suffer a debilitating effect and not know about it? Are you showing too much information and as a result, nobody’s reading it?

And that’s it! Congratulations, you are now a full-fledged UI Designer, ready to handle any challenge a project may throw at you. But if by some gruesome stretch of the imagination that didn’t happen, maybe read some more blogs? Throw in a paypal donation – you don’t know – maybe me getting more Steam games helps you out somehow.

John “The Wingless” Burnett is a 20 year User Interface Artist (UI Artist) and User Experience Designer (UX Designer) in the video game industry and digital design sphere. He is an award-winning artist available for hire or for 1-on-1 Design Mentorship

Share your thoughts