chapter 8 ui design

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

Upload: tamber

Post on 23-Feb-2016

49 views

Category:

Documents


0 download

DESCRIPTION

Chapter 8 UI design. Jason Paolasini - 1162915- Chapter 8 A Benjamin Isherwood – 1051749 – Chapter 8 B. User Interfaces. User Interface Design and the Processes Managing Complexity Interaction Models & Camera Models Functionality and input devices Game Customization. - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: Chapter 8 UI design

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

CHAPTER 8 UI DESIGN

Page 2: 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: 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: Chapter 8 UI design
Page 5: Chapter 8 UI design

A LITTLE BIT OF TERMINOLOGY BEFORE WE START

Button !=Button

Page 6: Chapter 8 UI design

PLAYER CENTRIC DESIGNNot Just Any Old Interface

Page 7: Chapter 8 UI design
Page 8: Chapter 8 UI design

DESIGN RULE 1Do Not Innovate Unnecessarily in UI Design

Page 9: 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: Chapter 8 UI design

• Group related screen-based controls and feedback mechanisms

• Provide shortcuts for experienced players

Page 11: Chapter 8 UI design

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

Page 12: 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: Chapter 8 UI design

DESIGN RULE 2Do Not Taunt the Player

Page 14: Chapter 8 UI design
Page 15: Chapter 8 UI design

WHAT THE PLAYER NEEDS TO DO

Page 16: 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: Chapter 8 UI design

BEFORE YOU DESIGN

DEFINE INTERACTIONSTYLE AND CAMERA STYLE

Page 18: Chapter 8 UI design

MANAGING COMPLEXITY

Page 19: Chapter 8 UI design

SIMPLIFY THE GAMEUsing Abstraction and Automation

Page 20: Chapter 8 UI design

ABSTRACTION & AUTOMATION

Page 21: Chapter 8 UI design

ABSTRACTION & AUTOMATION

Page 22: Chapter 8 UI design

DEPTH VS. BREADTH UI

Page 23: Chapter 8 UI design

CONTEXT SENSITIVE INTERFACES

Page 24: Chapter 8 UI design
Page 25: Chapter 8 UI design

AVOID OBSCURITYArtistic Overenthusiasm, Pressure to Reduce Screen Usage,

Developer Familiarity

Page 26: Chapter 8 UI design

INTERACTION MODELS

Page 27: Chapter 8 UI design

AVATAR BASED

Page 28: Chapter 8 UI design

MULTI-PRESENT

Page 29: Chapter 8 UI design

PARTY-BASED

Page 30: Chapter 8 UI design

CONTESTANT

Page 31: Chapter 8 UI design

CAMERA MODELS

Page 32: Chapter 8 UI design

FIRST PERSON

Page 33: 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: Chapter 8 UI design

THIRD PERSON

Page 35: Chapter 8 UI design

TYPES OF THIRD PERSON

Page 36: Chapter 8 UI design

AERIAL PERSPECTIVES

Page 37: Chapter 8 UI design

TOP-DOWN PERSPECTIVE Grand Theft Auto 1

Page 38: Chapter 8 UI design

ISOMETRIC PERSPECTIVEWarcraft III

Page 39: Chapter 8 UI design

FREE-ROAMING CAMERAMaze ball

Page 40: Chapter 8 UI design

CONTEXT-SENSITIVE CAMERA MODELS ICO and the colossus collection

Page 41: Chapter 8 UI design

DESIGN RULE 3Limit Camera Movement During Frenetic Action

Page 42: 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: Chapter 8 UI design

SINGLE SCREENRobotron 2084

Page 44: Chapter 8 UI design

SIDE SCROLLINGMario Bros. 3

Page 45: Chapter 8 UI design

TOP SCROLLINGAtari Space Invaders

Page 46: Chapter 8 UI design

PAINTED BACKGROUNDLeisure Suit Larry

Page 47: Chapter 8 UI design

Click icon to add picture