Designing a UI for Racing Games? Here’s 5 tips.

aut_0005_au4b

I’m always surprised by some key factors that are overlooked in Racing Game UI design. Here’s a few thoughts.

1 — Keep that lower third empty!

This one surprises me the most. From hardcore Sim Racers (myself included) with full rigs to casual players with just a budget wheel on their desk, many racing titles simply don’t consider which parts of the screen maybe obfuscated.

Perhaps the lower third?

Where a wheel rim may hide important elements?

Like key navigation such as a ‘START’ or ‘PRESS TO CONTINUE’ buttons?

Sure, not everybody pushes a wheel up against their display, but a little UX research would quickly reveal the percentage of Players who do, and the frustration it causes. It wouldn’t harm to design with that assumption in mind, regardless.

pcars_wheelinway

There are some notable exceptions – Assetto Corsas’ in-game side menu panel provides a unique way of quickly accessing HUD panels which are then pinnable anywhere on the screen of the players’ choosing. A minor limitation is that it’s only navigable with a mouse, but otherwise great thinking from Kunos:

ac_0003_ass10_sq

2 — Ensuring easy UI control using peripherals (Wheels, Pedals)

Something that’s not often considered: allowing a Player to easily control (and indeed configure) UI navigation from devices other than primary controllers such as console controllers, PC keyboards and mice.

The simplicity of Arcade racing titles such as Daytona USA, Ferrari F355 Challenge and contemporary titles should serve as inspiration for solving this: where lateral, column-based designs or radial screen layouts could be presented; allowing the Player to simply turn their wheel and accelerate to make their selections. Mouse/Controller navigation would work more than happily alongside.

Many screens in Codemasters’ Dirt and Dirt Rally titles give us a contemporary example of this, and indeed the title allows those additional controllers to function well within the UI:

Image result for codemasters "dirt rally" menu

3 — Over-pagination

I’m going to call out RaceRoom directly here; in its current state, RR offers an example of the worst form of UI over-pagination, as well as zero visibility for page numbers within a section, screen hierarchy depths or the actual numeracy of content (particularly IAP you own within the title).

These combined with repetitive navigation make it a downright chore to use. Superb sim otherwise, it must be said.

RRRE_UI_0007_Layer 6.jpg

Solutions can include a simple-as-hell scroll mechanism, also infinite-scroll (see most content-heavy Apps, online Video websites etc..) mouse-swiping, shallower menu depths or better-designed panel-based content heirarchy (see Project Cars 2’s vehicles list screens for example):

Image result for project cars 2 menu

4 — Over-bright

Oh RaceRoom. Racing Simulations are often played in darker surroundings to help the feeling of immersion – and after racing for an hour or more at a dark/night-time circuit, the jump to a fully-white UI can be VERY painful on the eyes.

RRRE_UI_0000_Layer 13

5 — And finally… not overdoing things entirely

The Gran Turismo series.

Sigh.

There’s no denying the AAA+ slickness and immensity of GT UI’s (and its game content) but when you’re in the UI as-much-as-you-are-playing-the-game something is clearly, clearly wrong.

“No UI is the best UI”, I was once told. Well, as a statement it’s clearly not 100% true – nor practical – but something that Polyphony should at least consider aiming loosely towards ;)

Chris @ Vyxl designed the BAFTA®-nominated UI for Lotus Challenge (PlayStation 2, Xbox, Gamecube, PC) in 2001, as well as dozens of AAA game titles’ UI since.

He is currently involved with GOATi’s 22nd Century Racing Series (PC) title, and is always keen to connect with new clients.

VYXL_Logo_2018_Q4_MASTER_90