Game UI

Game UI

  • the part of the game the player interacts with
  • a good UI tells you what you need to know, and then it gets out of the way
  • combines visual appearance from movie fake UIs and ergonomy from software UIs
  • Great Game UI is invisible

Movie UI

Game UI

Software UI

UI components

  • Game UI is about space, structure, hierarchy and clarity
  • it takes time and many iterations for UI to become amazing
  • types: non-diegetic, meta, spatial, diegetic

Non-diegetic components

  • don't exist in the story, don't exist in the game space
  • e.g. assessment of resources in strategic games, level map

Ikari Warriors

Age of empires 3

Meta components

  • exist in the story, don't exist in the game space
  • e.g. filter that signifies damage to a player's avatar

Doom

Call of Duty

Spatial components

  • don't exist in the story, exist in the game space
  • e.g. visual aids, text labels, racing lines

Forza Motorsport 5

World of Warcraft

Diegetic components

  • exist in the story, exist in the game space
  • e.g. in-game HUDs

Metroid Prime

Project Cars

Game UI principles

  • use color, size, shape, texture, and position for differentiation
  • embrace consistency
  • less is more

Panelled vs overlaying interface

Odallus: The Dark Call

Rayman

Simplicity

Prince of Persia

Half-life 2

Consistency with the game

Icons instead of labels

Eternal Daughter

Commander Keen