UIs in Games

1. ICS3211 - Intelligent
Interfaces II
Combining design with technology for effective human-
computer interaction
Week 10
Department of AI,
University of Malta,
20211

2. Case Studies:
UIs in Games: Immersion & Engagement
Week 10 overview:
• A case study illustration: Investigating UIs in games
especially: 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. 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
5

6. • 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
6
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.

7. • 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
7
In Half-Life the HUD is semi-transparent
and complemented by a computerised
voice giving feedback on health, radiation
levels etc.

8. 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;
• Suspension of Disbelief;
• Diegesis and Agency: how much control over the
world is given to the players?
8

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

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

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

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

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

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

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

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

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

18. 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?
18

19. Bad UI examples
19
Oblivion

20. 20
Far Cry 3

21. Good UI examples
21
Morrowind

22. 22
Homeworld

23. 23
Crusader Kings 2

24. 24
Civilisation V

25. A Summary
• 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.
25

26. 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.
26