ICS3211 - Intelligent

Interfaces IICombining design with technology for effective

human-computer interaction

Week 12Department of Intelligent Computer

Systems,University of Malta,

2016

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

Learning OutcomesAt 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.

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

complexities

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

Early Video Games• Tennis for two: Original video game in1958

• Display:oscilloscope – graph that shows a change in voltages. Input: dial and a button:

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.

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

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.

Early Video Games• 1978: Magnavox

Odyssey2; Includes full-sized keyboard.

• Used for educational software and programming. First home electronics device with speech synthesis.

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.

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.

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…

Arcade Games

Arcade Games

VR Arcade Games• 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.

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

• 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

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.

• 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

In Half-Life the HUD is semi-transparent and complemented by a computerised voice giving feedback on health, radiation levels etc.

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;

A conceptual view of the visual UI conventions of FPS games

Games Studied:• Mirror’s Edge

A springboard coloured red to invite to player interaction in Mirror’s Edge

Games Studied:• Dead Space

Hologram indicating that an object can be picked up by the player

Games Studied:• Far Cry 2

The map and GPS device in Far Cry 2

Games Studied:• Killzone 2:

Overlay blood splatter to indicate being hit by enemy fire in Killzone 2

Games Studied:• Left 4 Dead:

Glowing silhouette outlines (upper right) indicating position and status of teammates in Left 4 Dead

Games Studied:• Grand Theft Auto IV:

The Grand Theft Auto IV phone appearing in the bottom right corner

Emerging Guidelines

1. Know your design space;

2. Know your game;

3. Establish player agency;

4. Strengthen the player-avatar perceptual link;

Classroom Discussion

• Log on to the VLE

• Find the class discussions and choose a discussion

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?

Bad UI examples

Oblivion

Far Cry 3

Good UI examples

Morrowind

Homeworld

Crusader Kings 2

Civilisation V

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.