Sixty years ago the Brookhaven National Laboratory in Upton, NY held an open house.

Visitors who toured the lab were treated to an interactive exhibit, a game titledTennis for Two.

The setup was simplea 5-inch analog display and two controllers, each with one knob and one button.

From start screens to coin counters — a guide to video game UI

The worlds first video game was born, but after two years, the exhibit was closed.

Twelve years passed, and an eerily similar arcade game showed up in a bar called Andy Capps Tavern.

The name of the game?Pong.

Article image

Seemingly overnight, the burgeoning world of video games was transformed.

SincePong, the complexity of video game graphics has evolved exponentially.

Weve encountered alien insects,elven adventures, and soldiers from every army imaginable.

Game UI

Weve braved mushroom kingdoms,boxing rings, and an expanding universe of hostile landscapes.

It’s free, every week, in your inbox.

Narrative

Narrativeis the story that a video game tells.

Video game UI

Non-Diegetic

Non-diegetic UI components reside outside of a games story and space.

None of the characters in the game, including a players avatar, are aware that the components exist.

The design, placement, and context of non-diegetic components are paramount.

Game interface

In fast-paced games, non-diegetic components may interrupt a players sense of immersion.

But in strategy-heavy games, they can provide players with a more nuanced assessment of resources and actions.

Non-Diegetic components commonly appear in video games as stat meters.

Video game UI design

Scale makes diegetic components tricky.

In the demolition racing gameWreckfest, cars are diegetic UI components.

Spatial components often work as visual aids, helping players select objects, or pointing out important landmarks.

Best video game UI

Text labels are a classic example of spatial UI components.

In fantasy and adventure games, players may encounter important objects that are unfamiliar in appearance.

Text labels quickly remove ambiguity and keep players immersed in the gaming experience.

Video game UI classification infographic.

The American football franchiseMaddenhas spatial UI components that help players select avatars and understand game scenarios.

A players avatar may or may not be aware of meta components.

Traditionally, meta components have been used to signify damage to a players avatar.

Classifying video game UI components isnt always cut and dry.

A life meter may be diegetic in one game but non-diegetic in another.

Also tagged with