How to Label Unfamiliar Icons in Video Game UIs

First published as The Acagamic Tip Tuesday #2 on acagamic.com. Edited for this archive.

Label unfamiliar icons. Make your game UI accessible.

People from many cultures play video games. They speak different languages and bring very different amounts of gaming experience, and symbols and colours mean different things to each of them. Labelling icons should be as standard in game UI design as alt text is for images, which blind people rely on to use technology. Destiny 2 and Firewatch show two ways to do it.

Destiny 2: complex symbols that need context

Destiny 2 is a first-person shooter with MMO elements. Its interface is dense, with icons for items, abilities, and quests. New players struggle with these symbols. The class and damage-type icons, for example, are not obvious at first.

The developers added labels to the inventory screen. When a player hovers over an icon, a tooltip explains what it means and where it belongs. Players no longer need a wiki to decode the screen.

Destiny 2 could go further with a setting that switches between icon-only and labelled modes. Veterans would get a cleaner screen, and newcomers would get the context they need.

Destiny 2 labels its inventory icons with hover tooltips.

Firewatch: a minimal UI with labels in view

Firewatch is an indie adventure game with a minimal interface. Its map and compass use simple shapes and colours to mark points of interest.

Firewatch labels items directly in the player's field of view.

Even this sparse design labels things. When an object matters, Firewatch places an icon and a short text label right where the player is looking. The labels appear only when needed, so they explain without cluttering the scene.

Five practices for labelling icons

  1. Add short tooltips. A tooltip explains an unfamiliar icon on hover without cluttering the screen.
  2. Offer display modes. Let players switch between icon-only and labelled modes to match their experience.
  3. Write plain labels. Avoid slang, idioms, and culture-specific phrases that some players won’t understand.
  4. Design for colour blindness. Many players are colour-blind, so make icons distinguishable by shape and pattern as well as colour.
  5. Test with diverse players. Run your icons and labels past players from different cultures, languages, and skill levels, and fix what confuses them.



Enjoy Reading This Article?

Here are some more articles you might like to read next: