This document provides an overview of game user interfaces throughout history and discusses principles of good UI design for games. It begins with early experimental electronic games from the 1940s-1970s with simple control schemes like dials and buttons. Modern consoles starting in the 1980s introduced more complex dual-hand controllers. Case studies examine first-person shooter games and how they integrated heads-up displays. The document concludes with guidelines for game UI design including understanding the design space and game context, establishing player agency, and strengthening the player-avatar link.

1. ICS3211 - Intelligent
Interfaces II
Combining design with technology for effective human-
computer interaction
Week 12
Department of Intelligent Computer Systems,
University of Malta,
20161

2. Case Studies II:
UIs & Games
Week 12 overview:
• History of Game UIs & Early Video Games
• A case study illustration: Investigating UIs in FPS
• The Good & Bad of UIs in current video games
2

3. Learning Outcomes
At the end of this session you should be able to:
• identify strengths and weaknesses in game UI;
• compare and contrast different game UIs and how they adapt to
the different contexts;
• describe a number of UI design principles in the design of
games;
• discuss ways of providing alternative UIs for specific games.
3

4. Introduction
• UI’s in games: immersion, flow and other complexities
4

5. History of Game UIs
• 1947: Cathode-ray tube amusement
device: Earliest proposal for an
electronic gaming device.The interface
consisted of knobs and buttons.
• Based on WWII radar displays, players
use knobs to adjust the trajectory of
light beams (missiles) in an attempt to
hit targets.Nobody knows if it was
actually implemented, but the idea was
patented
5

6. Early Video Games
• Tennis for two:Original video game in1958
• Display: oscilloscope – graph that shows a change
in voltages. Input: dial and a button:
6

7. Early Video Games
• Spacewar! First computer game: 1961 by Russel,
Graetz, and Wiitanen at MIT.
• Interface: mostly buttons, but also joysticks and light
pen - 2 armed spaceships attempt to shoot one another
while manoeuvring in the gravity well of a star.
7

8. Early Video Games
• 1972: Magnavox
“Odyssey” is a first ever
home game console. Could
play Ping-Pong with 2
people. Buttons and dials,
1D.
• 1975: Atari creates Pong
for home and arcades.
Game industry is born
8

9. Early Video Games
• 1977: Atari 2600 console
Cartridge based system, so
you could change games.
• 2D controllers – joystick
and a trackball.Introduced
quality sound hardware,
which is still popular today.
9

10. Early Video Games
• 1978: Magnavox Odyssey2;
Includes full-sized keyboard.
• Used for educational software
and programming. First home
electronics device with speech
synthesis.
10

11. Modern Consoles
• 1983: Nintendo Famicom with modern controller layout:
controls for both hands, directional buttons. Increasingly
complex controllers and interfaces: games are still 2D,
but interaction is more complex and rich.
• 1994: Nintendo 64 First “true” 3D console Adds joystick
to controller, game pad gets more controls.
11

12. Modern Consoles
• 1996: Sony dual-shock controller; Adds
second joystick and shoulder buttons.
Standard controller for PS, PS2, PS3.
Observations
• Increased complexity of game interface
allows for more expression in games.
• Difficult to master; Focuses more and
more on “hard-core” games, since
casual gamers often find games more
difficult.
12

13. Arcade Games
• Easy to learn, but difficult to ‘master’
• Has to be learned immediately.
• Interface can’t be too complex.
• Began in the mid 1970’s
• Specialized interfaces often based on
simulation activities: Shooting, driving,
snowboarding.
• Many innovative and original interfaces…
13

14. Arcade Games
14

15. Arcade Games
15

16. VR Arcade Games
16
• Disney Quest: Indoor interactive theme park
(opened 1998)
• Pirates of the Caribbean: Battle for
Buccaneer’s Gold; Uses motion platform,
shoot cannons, navigate with steering wheel.
Surround screen display, users wear stereo
glasses.
• Virtual Jungle Cruise; Users sit in raft, steer
and paddle.
• Aladdin’s Magic Carpet Ride; Users wear
Head Mounted Display (HMD), sit on
motorcycle-like device to steer.

17. Case Study I: FPS Game
Genre
• First modern FPS - Wolfenstein 1992
• FPS user interfaces designed with clear split between a "world
view" and a "tool bar”; often a distinct frame dividing the part of
the screen concerned with the game world from the part
concerned with providing player feedback and information
17

18. • 1997 clear shift in focus in FPS
interface design philosophy;
GoldenEye 007 (Rare, 1998)with
few user interface elements on
screen at the same time, many of
them context sensitive, only
fading into existence when
relevant.
• The interface elements being
superimposed onto the game
world rather than in a separate
form, thus mimicking a heads-up
display in an aircraft
18
In GoldenEye 007 the HUD had a circular
design showing remaining health (to the
left) and body armor (to the right). This
information was only visible when under
fire.

19. • Half-Life (Valve, 1998) one of the
first FPS games that successfully
introduced narrative and puzzle
elements to the genre without
compromising on the action or
phasing of the game experience
• End of 90’s HUD elements were
becoming more transparent and
some games now attempted to
integrate their HUD elements
into the story and game world
itself
19
In Half-Life the HUD is semi-transparent
and complemented by a computerised
voice giving feedback on health, radiation
levels etc.

20. Reflections from Literature
• HUD’s: yes or no? (Wilson, 2006)
• Immersion in games: what are the key aspects to
achieve immersion? (Breda, 2008)
• Immersion related to a sense of presence;
20

21. 21
A conceptual view of the visual UI conventions of FPS games

22. Games Studied:
• Mirror’s Edge
22
A springboard coloured red to invite to player interaction in Mirror’s Edge

23. Games Studied:
• Dead Space
23
Hologram indicating that an object can be picked up by the player

24. Games Studied:
• Far Cry 2
24
The map and GPS device in Far Cry 2

25. Games Studied:
• Killzone 2:
25
Overlay blood splatter to indicate being hit by enemy fire in Killzone 2

26. Games Studied:
• Left 4 Dead:
26
Glowing silhouette outlines (upper right) indicating position and status of teammates in Left 4 Dead

27. Games Studied:
• Grand Theft Auto IV:
27
The Grand Theft Auto IV phone appearing in the bottom right corner

28. Emerging Guidelines
1. Know your design space;
2. Know your game;
3. Establish player agency;
4. Strengthen the player-avatar perceptual link;
28

29. Classroom Discussion
• Log on to the VLE
• Find the class discussions and choose a discussion
29

30. Good UI Design
• Does this interface tell me what I need to know right now?
• Is it easy to find the information I'm looking for, or do I have to look
around for it? (Are the menus nested so deep that they hide
information from the player?)
• Can I use this interface without having to read instructions
elsewhere?
• Are the things I can do on this screen obvious?
• Do I ever need to wait for the interface to load or play an animation?
• Are there any tedious or repetitive tasks that I can shorten (with a
shortcut key, for example) or remove entirely?
30

31. Bad UI examples
31
Oblivion

32. 32
Far Cry 3

33. Good UI examples
33
Morrowind

34. 34
Homeworld

35. 35
Crusader Kings 2

36. 36
Civilisation V

37. Concluding thoughts
• Predict what the user wants to know, and give them that
information.
• Information must be easy to find.
• Your UI should be easy to use and navigate. Use established
patterns where you can: Everyone knows that Ctrl-Click adds items
to the selection, so don't make it swap items instead.
• Make the user's location in the menu system obvious, and make it
obvious where the user can go and what they can do from there.
• Minimise load times and avoid animations in your menus.
• Eliminate or simplify repetitive tasks.
37