the

gamedesigninitiative at cornell university

Lecture 7:

Learnability and User Interfaces

The Riot Gameplay Pipeline Engineering a New Champion for League of Legends

2

Speaker: Jeremy Ong, Game System Engineer Riot Games Time: 5pm Wednesday, September 17th Place: Gates Hall G01

the

gamedesigninitiative at cornell university

Design Document  Due Friday at 11:59pm

3

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

So You Want to Make a Game?  For the design document  Need to assign tasks to team members  Helps to break game into components  Each component is a logical unit of work.

4

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

Traditional Way to Break Up a Game  Rules and Mechanics  Game Engine  User Interface  Content

5

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

Traditional Way to Break Up a Game    User Interface 

6

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

What is a user interface?

the means by which the user and a computer system interact

7

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

What is a user interface? Input

Output

8

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

Input  Mouse  Keyboard  Controller  Multitouch  Brain

9

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

Interaction Mechanisms  Buttons  Menus  Text input fields

10

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

Output  View of the virtual environment  Status indicators  Progress bar  Health bar

11

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

12

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

13

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

14

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

15

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

What makes a UI “good”?

16

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

Oblivion

17

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

Minecraft

18

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

Learnability

the capability of a software product to enable the user to learn how to use it

19

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

20

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

21

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

22

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

23

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

This is not about technology

24

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

Tough crowd

25

Pokemon Red & Blue

StarCraft

Final Fantasy 7

1998 (USA)

1998

1997

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

Nielsen’s heuristics for good UI design 1. Visibility of system status 2. Match between system and the real world 3. User control and freedom 4. Consistency and standards 5. Error prevention

26

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

Nielsen’s heuristics for good UI design 6. Recognition rather than recall 7. Flexibility and efficiency of use 8. Aesthetic and minimalist design 9. Help users recognize, diagnose, and recover from errors

10. Help and documentation

27

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

1. Visibility of System Status  The player needs to be aware of critical information

28

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

Minecraft

29

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

30

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

2. Match between system and real world  The game should use concepts familiar to the user

31

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

Minecraft

32

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

6. Recognition rather than recall  Player should recognize objects  Shouldn’t have to recall the tutorial

33

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

34

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

35

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

36

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

Affordances

37

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

38

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

39

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

40

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

3. User control and freedom  Player should feel  in control  free to explore

 What are potential problems?

41

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

Be the neck

42

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

43

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

44

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

45

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

46

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

47

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

48

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

49

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

50

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

51

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

52

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

53

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

54

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

55

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

56

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

57

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

3. User control and freedom  Player should feel  in control  free to explore

 But the game should guide them

58

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

8. Aesthetic and minimalist design  Avoid clutter  Provide only critical information

59

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

60

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

61

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

5. Error prevention  Anticipate possible errors and prevent them

62

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

5. Error prevention

63

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

64

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

9. Help users recognize, diagnose, and recover from errors

 Don’t unnecessarily punish the player for failure  The player should know why he failed

65

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

King’s Quest 2 Bridge of Death

66

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

King’s Quest 6 Catacombs

67

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

68

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

69

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

70

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

Nielsen’s heuristics 1.

Visibility of system status

6.

Recognition rather than recall

2.

Match between system and the real world

7.

Flexibility and efficiency of use

8.

Aesthetic and minimalist design

9.

Help users recognize, diagnose, and recover from errors

3.

User control and freedom

4.

Consistency and standards

5.

Error prevention

71

10. Help and documentation

Learnability and User Interfaces

the

gamedesigninitiative at cornell university

Group Work  Pick two mechanics in your game  Brainstorm a plan for how the user will learn these mechanics

 Design a user interface that will support this learning

72

Learnability and User Interfaces

the

gamedesigninitiative at cornell university