jason paolasini - 1162915- chapter 8 a benjamin isherwood – 1051749 – chapter 8 b chapter 8 ui...

47
Jason Paolasini - 1162915- Chapter 8 A Benjamin Isherwood – 1051749 – Chapter 8 B CHAPTER 8 UI DESIGN

Upload: isabella-ball

Post on 17-Jan-2018

226 views

Category:

Documents


0 download

DESCRIPTION

WHAT IS THE USER INTERFACE What works is better than what looks good. The looks good can change, but what works works. – Ray Kaiser Eames

TRANSCRIPT

Page 1: Jason Paolasini - 1162915- Chapter 8 A Benjamin Isherwood – 1051749 – Chapter 8 B CHAPTER 8 UI DESIGN

Jason Paolasini - 1162915- Chapter 8 ABenjamin Isherwood – 1051749 – Chapter 8 B

CHAPTER 8 UI DESIGN

Page 2: Jason Paolasini - 1162915- Chapter 8 A Benjamin Isherwood – 1051749 – Chapter 8 B CHAPTER 8 UI DESIGN

USER INTERFACES• User Interface Design and the Processes

• Managing Complexity

• Interaction Models & Camera Models

• Functionality and input devices

• Game Customization

Page 3: Jason Paolasini - 1162915- Chapter 8 A Benjamin Isherwood – 1051749 – Chapter 8 B CHAPTER 8 UI DESIGN

WHAT IS THE USER INTERFACE

What works is better than what looks good. The looks good can change, but what works works. – Ray Kaiser Eames

Page 4: Jason Paolasini - 1162915- Chapter 8 A Benjamin Isherwood – 1051749 – Chapter 8 B CHAPTER 8 UI DESIGN
Page 5: Jason Paolasini - 1162915- Chapter 8 A Benjamin Isherwood – 1051749 – Chapter 8 B CHAPTER 8 UI DESIGN

A LITTLE BIT OF TERMINOLOGY BEFORE WE START

Button !=Button

Page 6: Jason Paolasini - 1162915- Chapter 8 A Benjamin Isherwood – 1051749 – Chapter 8 B CHAPTER 8 UI DESIGN

PLAYER CENTRIC DESIGNNot Just Any Old Interface

Page 7: Jason Paolasini - 1162915- Chapter 8 A Benjamin Isherwood – 1051749 – Chapter 8 B CHAPTER 8 UI DESIGN
Page 8: Jason Paolasini - 1162915- Chapter 8 A Benjamin Isherwood – 1051749 – Chapter 8 B CHAPTER 8 UI DESIGN

DESIGN RULE 1Do Not Innovate Unnecessarily in UI Design

Page 9: Jason Paolasini - 1162915- Chapter 8 A Benjamin Isherwood – 1051749 – Chapter 8 B CHAPTER 8 UI DESIGN

THE GENERAL PRINCIPLES• Be Consistent

• Give good Feedback

• Remember the player is in control

• Limit the number of steps required

• Permit easy reversal of actions

• Minimize Physical Stress

• Don’t strain players short term memory

Page 10: Jason Paolasini - 1162915- Chapter 8 A Benjamin Isherwood – 1051749 – Chapter 8 B CHAPTER 8 UI DESIGN

• Group related screen-based controls and feedback mechanisms

• Provide shortcuts for experienced players

Page 11: Jason Paolasini - 1162915- Chapter 8 A Benjamin Isherwood – 1051749 – Chapter 8 B CHAPTER 8 UI DESIGN

WHAT THE PLAYER NEEDS TO KNOWThink of these as questions a player would ask…

Page 12: Jason Paolasini - 1162915- Chapter 8 A Benjamin Isherwood – 1051749 – Chapter 8 B CHAPTER 8 UI DESIGN

WHAT THE PLAYER NEEDS TO KNOW• Where am I?

• What am I doing right now?

• What challenges am I facing?

• Did my action succeed or fail?

• Do I have what I need to play successfully?

• Am I in danger of loosing the game?

• Am I making progress?

• What should I do next?

• How did I do?

Page 13: Jason Paolasini - 1162915- Chapter 8 A Benjamin Isherwood – 1051749 – Chapter 8 B CHAPTER 8 UI DESIGN

DESIGN RULE 2Do Not Taunt the Player

Page 14: Jason Paolasini - 1162915- Chapter 8 A Benjamin Isherwood – 1051749 – Chapter 8 B CHAPTER 8 UI DESIGN
Page 15: Jason Paolasini - 1162915- Chapter 8 A Benjamin Isherwood – 1051749 – Chapter 8 B CHAPTER 8 UI DESIGN

WHAT THE PLAYER NEEDS TO DO

Page 16: Jason Paolasini - 1162915- Chapter 8 A Benjamin Isherwood – 1051749 – Chapter 8 B CHAPTER 8 UI DESIGN

WHAT THE PLAYER NEEDS TO DO• Move

• Look around

• Interact with NPC’s

• Move Portable objects

• Manipulate Fixed Objects

• Construct and Demolish Objects

• Negotiations and Financial transactions

• Conversations with NPC’s

• Customize Character

• Talk to friends in Multiplayer games

• Pause the Game

• Set Game Options

• Save the Game

• End the Game

Page 17: Jason Paolasini - 1162915- Chapter 8 A Benjamin Isherwood – 1051749 – Chapter 8 B CHAPTER 8 UI DESIGN

BEFORE YOU DESIGN

DEFINE INTERACTIONSTYLE AND CAMERA STYLE

Page 18: Jason Paolasini - 1162915- Chapter 8 A Benjamin Isherwood – 1051749 – Chapter 8 B CHAPTER 8 UI DESIGN

MANAGING COMPLEXITY

Page 19: Jason Paolasini - 1162915- Chapter 8 A Benjamin Isherwood – 1051749 – Chapter 8 B CHAPTER 8 UI DESIGN

SIMPLIFY THE GAMEUsing Abstraction and Automation

Page 20: Jason Paolasini - 1162915- Chapter 8 A Benjamin Isherwood – 1051749 – Chapter 8 B CHAPTER 8 UI DESIGN

ABSTRACTION & AUTOMATION

Page 21: Jason Paolasini - 1162915- Chapter 8 A Benjamin Isherwood – 1051749 – Chapter 8 B CHAPTER 8 UI DESIGN

ABSTRACTION & AUTOMATION

Page 22: Jason Paolasini - 1162915- Chapter 8 A Benjamin Isherwood – 1051749 – Chapter 8 B CHAPTER 8 UI DESIGN

DEPTH VS. BREADTH UI

Page 23: Jason Paolasini - 1162915- Chapter 8 A Benjamin Isherwood – 1051749 – Chapter 8 B CHAPTER 8 UI DESIGN

CONTEXT SENSITIVE INTERFACES

Page 24: Jason Paolasini - 1162915- Chapter 8 A Benjamin Isherwood – 1051749 – Chapter 8 B CHAPTER 8 UI DESIGN
Page 25: Jason Paolasini - 1162915- Chapter 8 A Benjamin Isherwood – 1051749 – Chapter 8 B CHAPTER 8 UI DESIGN

AVOID OBSCURITYArtistic Overenthusiasm, Pressure to Reduce Screen Usage,

Developer Familiarity

Page 26: Jason Paolasini - 1162915- Chapter 8 A Benjamin Isherwood – 1051749 – Chapter 8 B CHAPTER 8 UI DESIGN

INTERACTION MODELS

Page 27: Jason Paolasini - 1162915- Chapter 8 A Benjamin Isherwood – 1051749 – Chapter 8 B CHAPTER 8 UI DESIGN

AVATAR BASED

Page 28: Jason Paolasini - 1162915- Chapter 8 A Benjamin Isherwood – 1051749 – Chapter 8 B CHAPTER 8 UI DESIGN

MULTI-PRESENT

Page 29: Jason Paolasini - 1162915- Chapter 8 A Benjamin Isherwood – 1051749 – Chapter 8 B CHAPTER 8 UI DESIGN

PARTY-BASED

Page 30: Jason Paolasini - 1162915- Chapter 8 A Benjamin Isherwood – 1051749 – Chapter 8 B CHAPTER 8 UI DESIGN

CONTESTANT

Page 31: Jason Paolasini - 1162915- Chapter 8 A Benjamin Isherwood – 1051749 – Chapter 8 B CHAPTER 8 UI DESIGN

CAMERA MODELS

Page 32: Jason Paolasini - 1162915- Chapter 8 A Benjamin Isherwood – 1051749 – Chapter 8 B CHAPTER 8 UI DESIGN

FIRST PERSON

Page 33: Jason Paolasini - 1162915- Chapter 8 A Benjamin Isherwood – 1051749 – Chapter 8 B CHAPTER 8 UI DESIGN

FIRST PERSON

Pros

• Avatar design is not required except cut scenes

• Camera AI is not required

• Body does not block view

• Most players find navigation easier

Cons

• No avatar customization

• Lack of avatar emotions

• First person perspective denies camera angles for dramatic effect

• Motion sickness in viewers

Page 34: Jason Paolasini - 1162915- Chapter 8 A Benjamin Isherwood – 1051749 – Chapter 8 B CHAPTER 8 UI DESIGN

THIRD PERSON

Page 35: Jason Paolasini - 1162915- Chapter 8 A Benjamin Isherwood – 1051749 – Chapter 8 B CHAPTER 8 UI DESIGN

TYPES OF THIRD PERSON

Page 36: Jason Paolasini - 1162915- Chapter 8 A Benjamin Isherwood – 1051749 – Chapter 8 B CHAPTER 8 UI DESIGN

AERIAL PERSPECTIVES

Page 37: Jason Paolasini - 1162915- Chapter 8 A Benjamin Isherwood – 1051749 – Chapter 8 B CHAPTER 8 UI DESIGN

TOP-DOWN PERSPECTIVE Grand Theft Auto 1

Page 38: Jason Paolasini - 1162915- Chapter 8 A Benjamin Isherwood – 1051749 – Chapter 8 B CHAPTER 8 UI DESIGN

ISOMETRIC PERSPECTIVEWarcraft III

Page 39: Jason Paolasini - 1162915- Chapter 8 A Benjamin Isherwood – 1051749 – Chapter 8 B CHAPTER 8 UI DESIGN

FREE-ROAMING CAMERAMaze ball

Page 40: Jason Paolasini - 1162915- Chapter 8 A Benjamin Isherwood – 1051749 – Chapter 8 B CHAPTER 8 UI DESIGN

CONTEXT-SENSITIVE CAMERA MODELS ICO and the colossus collection

Page 41: Jason Paolasini - 1162915- Chapter 8 A Benjamin Isherwood – 1051749 – Chapter 8 B CHAPTER 8 UI DESIGN

DESIGN RULE 3Limit Camera Movement During Frenetic Action

Page 42: Jason Paolasini - 1162915- Chapter 8 A Benjamin Isherwood – 1051749 – Chapter 8 B CHAPTER 8 UI DESIGN

OTHER 2D STYLES• ■ Single-screen. The display shows the entire world on one screen, normally from a

top-down perspective with cheated objects. The camera never moves. Robotron: 2084 provides a classic example. (See the left side of Figure 13.1.)

• ■ Side-scrolling. The world of a side-scroller—familiar from an entire generation of games—consists of a long 2D strip in which the avatar moves forward and back- ward, with a limited ability to move up and down. The player sees the game world from the side as the camera tracks the avatar.

• ■ Top-scrolling. In this variant of the top-down perspective, the landscape scrolls beneath the avatar (often a flying vehicle), sometimes at a fixed rate that the player cannot change. This forces the player to continually face new challenges as they appear at the top of the screen.

• ■ Painted backgrounds. Many graphical adventure games display the game world in a series of 2D painted backgrounds rather like a stage set.

Page 43: Jason Paolasini - 1162915- Chapter 8 A Benjamin Isherwood – 1051749 – Chapter 8 B CHAPTER 8 UI DESIGN

SINGLE SCREENRobotron 2084

Page 44: Jason Paolasini - 1162915- Chapter 8 A Benjamin Isherwood – 1051749 – Chapter 8 B CHAPTER 8 UI DESIGN

SIDE SCROLLINGMario Bros. 3

Page 45: Jason Paolasini - 1162915- Chapter 8 A Benjamin Isherwood – 1051749 – Chapter 8 B CHAPTER 8 UI DESIGN

TOP SCROLLINGAtari Space Invaders

Page 46: Jason Paolasini - 1162915- Chapter 8 A Benjamin Isherwood – 1051749 – Chapter 8 B CHAPTER 8 UI DESIGN

PAINTED BACKGROUNDLeisure Suit Larry

Page 47: Jason Paolasini - 1162915- Chapter 8 A Benjamin Isherwood – 1051749 – Chapter 8 B CHAPTER 8 UI DESIGN

Click icon to add picture