chapter 8 ui design
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 PresentationTRANSCRIPT
![Page 1: Chapter 8 UI design](https://reader036.vdocument.in/reader036/viewer/2022081503/568164cc550346895dd6ec62/html5/thumbnails/1.jpg)
Jason Paolasini - 1162915- Chapter 8 ABenjamin Isherwood – 1051749 – Chapter 8 B
CHAPTER 8 UI DESIGN
![Page 2: Chapter 8 UI design](https://reader036.vdocument.in/reader036/viewer/2022081503/568164cc550346895dd6ec62/html5/thumbnails/2.jpg)
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](https://reader036.vdocument.in/reader036/viewer/2022081503/568164cc550346895dd6ec62/html5/thumbnails/3.jpg)
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](https://reader036.vdocument.in/reader036/viewer/2022081503/568164cc550346895dd6ec62/html5/thumbnails/4.jpg)
![Page 5: Chapter 8 UI design](https://reader036.vdocument.in/reader036/viewer/2022081503/568164cc550346895dd6ec62/html5/thumbnails/5.jpg)
A LITTLE BIT OF TERMINOLOGY BEFORE WE START
Button !=Button
![Page 6: Chapter 8 UI design](https://reader036.vdocument.in/reader036/viewer/2022081503/568164cc550346895dd6ec62/html5/thumbnails/6.jpg)
PLAYER CENTRIC DESIGNNot Just Any Old Interface
![Page 7: Chapter 8 UI design](https://reader036.vdocument.in/reader036/viewer/2022081503/568164cc550346895dd6ec62/html5/thumbnails/7.jpg)
![Page 8: Chapter 8 UI design](https://reader036.vdocument.in/reader036/viewer/2022081503/568164cc550346895dd6ec62/html5/thumbnails/8.jpg)
DESIGN RULE 1Do Not Innovate Unnecessarily in UI Design
![Page 9: Chapter 8 UI design](https://reader036.vdocument.in/reader036/viewer/2022081503/568164cc550346895dd6ec62/html5/thumbnails/9.jpg)
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](https://reader036.vdocument.in/reader036/viewer/2022081503/568164cc550346895dd6ec62/html5/thumbnails/10.jpg)
• Group related screen-based controls and feedback mechanisms
• Provide shortcuts for experienced players
![Page 11: Chapter 8 UI design](https://reader036.vdocument.in/reader036/viewer/2022081503/568164cc550346895dd6ec62/html5/thumbnails/11.jpg)
WHAT THE PLAYER NEEDS TO KNOWThink of these as questions a player would ask…
![Page 12: Chapter 8 UI design](https://reader036.vdocument.in/reader036/viewer/2022081503/568164cc550346895dd6ec62/html5/thumbnails/12.jpg)
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](https://reader036.vdocument.in/reader036/viewer/2022081503/568164cc550346895dd6ec62/html5/thumbnails/13.jpg)
DESIGN RULE 2Do Not Taunt the Player
![Page 14: Chapter 8 UI design](https://reader036.vdocument.in/reader036/viewer/2022081503/568164cc550346895dd6ec62/html5/thumbnails/14.jpg)
![Page 15: Chapter 8 UI design](https://reader036.vdocument.in/reader036/viewer/2022081503/568164cc550346895dd6ec62/html5/thumbnails/15.jpg)
WHAT THE PLAYER NEEDS TO DO
![Page 16: Chapter 8 UI design](https://reader036.vdocument.in/reader036/viewer/2022081503/568164cc550346895dd6ec62/html5/thumbnails/16.jpg)
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](https://reader036.vdocument.in/reader036/viewer/2022081503/568164cc550346895dd6ec62/html5/thumbnails/17.jpg)
BEFORE YOU DESIGN
DEFINE INTERACTIONSTYLE AND CAMERA STYLE
![Page 19: Chapter 8 UI design](https://reader036.vdocument.in/reader036/viewer/2022081503/568164cc550346895dd6ec62/html5/thumbnails/19.jpg)
SIMPLIFY THE GAMEUsing Abstraction and Automation
![Page 20: Chapter 8 UI design](https://reader036.vdocument.in/reader036/viewer/2022081503/568164cc550346895dd6ec62/html5/thumbnails/20.jpg)
ABSTRACTION & AUTOMATION
![Page 21: Chapter 8 UI design](https://reader036.vdocument.in/reader036/viewer/2022081503/568164cc550346895dd6ec62/html5/thumbnails/21.jpg)
ABSTRACTION & AUTOMATION
![Page 22: Chapter 8 UI design](https://reader036.vdocument.in/reader036/viewer/2022081503/568164cc550346895dd6ec62/html5/thumbnails/22.jpg)
DEPTH VS. BREADTH UI
![Page 23: Chapter 8 UI design](https://reader036.vdocument.in/reader036/viewer/2022081503/568164cc550346895dd6ec62/html5/thumbnails/23.jpg)
CONTEXT SENSITIVE INTERFACES
![Page 24: Chapter 8 UI design](https://reader036.vdocument.in/reader036/viewer/2022081503/568164cc550346895dd6ec62/html5/thumbnails/24.jpg)
![Page 25: Chapter 8 UI design](https://reader036.vdocument.in/reader036/viewer/2022081503/568164cc550346895dd6ec62/html5/thumbnails/25.jpg)
AVOID OBSCURITYArtistic Overenthusiasm, Pressure to Reduce Screen Usage,
Developer Familiarity
![Page 26: Chapter 8 UI design](https://reader036.vdocument.in/reader036/viewer/2022081503/568164cc550346895dd6ec62/html5/thumbnails/26.jpg)
INTERACTION MODELS
![Page 27: Chapter 8 UI design](https://reader036.vdocument.in/reader036/viewer/2022081503/568164cc550346895dd6ec62/html5/thumbnails/27.jpg)
AVATAR BASED
![Page 28: Chapter 8 UI design](https://reader036.vdocument.in/reader036/viewer/2022081503/568164cc550346895dd6ec62/html5/thumbnails/28.jpg)
MULTI-PRESENT
![Page 29: Chapter 8 UI design](https://reader036.vdocument.in/reader036/viewer/2022081503/568164cc550346895dd6ec62/html5/thumbnails/29.jpg)
PARTY-BASED
![Page 30: Chapter 8 UI design](https://reader036.vdocument.in/reader036/viewer/2022081503/568164cc550346895dd6ec62/html5/thumbnails/30.jpg)
CONTESTANT
![Page 31: Chapter 8 UI design](https://reader036.vdocument.in/reader036/viewer/2022081503/568164cc550346895dd6ec62/html5/thumbnails/31.jpg)
CAMERA MODELS
![Page 32: Chapter 8 UI design](https://reader036.vdocument.in/reader036/viewer/2022081503/568164cc550346895dd6ec62/html5/thumbnails/32.jpg)
FIRST PERSON
![Page 33: Chapter 8 UI design](https://reader036.vdocument.in/reader036/viewer/2022081503/568164cc550346895dd6ec62/html5/thumbnails/33.jpg)
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](https://reader036.vdocument.in/reader036/viewer/2022081503/568164cc550346895dd6ec62/html5/thumbnails/34.jpg)
THIRD PERSON
![Page 35: Chapter 8 UI design](https://reader036.vdocument.in/reader036/viewer/2022081503/568164cc550346895dd6ec62/html5/thumbnails/35.jpg)
TYPES OF THIRD PERSON
![Page 37: Chapter 8 UI design](https://reader036.vdocument.in/reader036/viewer/2022081503/568164cc550346895dd6ec62/html5/thumbnails/37.jpg)
TOP-DOWN PERSPECTIVE Grand Theft Auto 1
![Page 38: Chapter 8 UI design](https://reader036.vdocument.in/reader036/viewer/2022081503/568164cc550346895dd6ec62/html5/thumbnails/38.jpg)
ISOMETRIC PERSPECTIVEWarcraft III
![Page 39: Chapter 8 UI design](https://reader036.vdocument.in/reader036/viewer/2022081503/568164cc550346895dd6ec62/html5/thumbnails/39.jpg)
FREE-ROAMING CAMERAMaze ball
![Page 40: Chapter 8 UI design](https://reader036.vdocument.in/reader036/viewer/2022081503/568164cc550346895dd6ec62/html5/thumbnails/40.jpg)
CONTEXT-SENSITIVE CAMERA MODELS ICO and the colossus collection
![Page 41: Chapter 8 UI design](https://reader036.vdocument.in/reader036/viewer/2022081503/568164cc550346895dd6ec62/html5/thumbnails/41.jpg)
DESIGN RULE 3Limit Camera Movement During Frenetic Action
![Page 42: Chapter 8 UI design](https://reader036.vdocument.in/reader036/viewer/2022081503/568164cc550346895dd6ec62/html5/thumbnails/42.jpg)
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](https://reader036.vdocument.in/reader036/viewer/2022081503/568164cc550346895dd6ec62/html5/thumbnails/43.jpg)
SINGLE SCREENRobotron 2084
![Page 44: Chapter 8 UI design](https://reader036.vdocument.in/reader036/viewer/2022081503/568164cc550346895dd6ec62/html5/thumbnails/44.jpg)
SIDE SCROLLINGMario Bros. 3
![Page 45: Chapter 8 UI design](https://reader036.vdocument.in/reader036/viewer/2022081503/568164cc550346895dd6ec62/html5/thumbnails/45.jpg)
TOP SCROLLINGAtari Space Invaders
![Page 46: Chapter 8 UI design](https://reader036.vdocument.in/reader036/viewer/2022081503/568164cc550346895dd6ec62/html5/thumbnails/46.jpg)
PAINTED BACKGROUNDLeisure Suit Larry