UI design for games

1. UI design for games

2. Where is the "chrome" for games? • Character builders • Inventory/resource management • Leaderboards and trophy rooms • Level/mission/map navigation • Start/pause/save/exit controls

3. Character Builders Ref: http://www.charactercreator.net

4. Inventory systems One platformerdev'shistory: http://electromagneticproject.wordpress.com/2012/03/09/menuinventory-design-in-games And her progress: http://electromagneticproject.wordpress.com/2012/04/12/updates-and-remodels/

5. Leaderboards

6. Level/mission navigation

7. Start/pause/save/exit controls

8. Diagetic and Spatial and Meta:Oh My!

9. 2 Key Gameplay UI Questions: 1. Is the UI element part of the game story?

10. 2 Key Gameplay UI Questions: 2. Is the UI element part of the game world?

11. What is Diegesis? • Diegesis • By utilizing the concept of diegesis one can define what is and what is not part of a virtual world, and what the characters inhabiting this alternative world can and cannot see. • In movies, non-diegetic elements are for example the subtitles or the musical score, while diegetic elements are the elements that make up the world that the film characters live and act in.

12. Movie Time Diegetic and Non-Diegetic Elements

13. Quizlette You’re watching a live play in a theater. It’s about a 19th-century family sitting in their house doing various things. Name some diegetic elements in the play. Name some non-diegetic elements.

15. Diegetic elements Is the UI element part of the fictional game story? Yes Is the UI element drawn as part of the game space? Yes Diegetic elements are UI elements that are both part of the spatial and the fictional game world; entities that exist in the game world, and are presented as they were viewed by the player character. Few games seem t o explore diegetic user interface elements in a manner similar to Farcry 2 or Dead Space (see 6.2).

16. Signifiers Signifiers are a sub-group of diegetic elements, and subsequently both part of the 3D geometry and the fictional world of the game. Rather than conveying information in a direct manner like normal diegetic UI elements, signifiers provide the player with subtle informational cues for the player to interpret by logical reasoning. A signifier is separated from the object that it provides information about. “Smoke is a signifier of fire, an empty train station platform signifies that the train has just left, and a pool of blood is a signifier for danger."

17. Meta representation elements Is the UI element part of the fictional game story? Yes Is the UI element drawn as part of the game space? No Meta-representations are information-carrying entities existing in the fictional game world, but visualized in a manner not spatial regarding the game world. Looking at the subjective game study, meta-representations could be exemplified by the Grand Theft Auto IV cell phone, which is a part of the player avatar’s inventory but presented in an overlay manner.

18. Meta perception elements Is the UI element part of the fictional game story? Maybe Is the UI element drawn as part of the game space? Yes Meta-perception elements reside in the non-spatial part of the design space, and make up for the broken perceptual link that occurs when a player is linked to a virtual avatar through a display, an audio system and a controller . Typically, meta-perception conveys information about one’s in-game internal status in a way reminiscent of some kind of perception if it were to be visualized graphically. Conventionally, meta-perception is not connected to the game fiction, although games like Killzone 2 prove that the fictional world can be used (using blood to inform the player of health, rather than an abstract visualization). Meta-perception is not restricted to the visual part of the user interface. For example, heartbeat audio can be used to convey a critical level of health, and a similar approach can be taken if the haptic information channel was to be used for the same purpose, by utilizing pulsating controller vibrations in a heartbeat manner.

19. Spatial/geometric elements Is the UI element part of the fictional game story? No Is the UI element drawn as part of the game space? Yes Spatial/geometric elements are UI elements presented in the 3D geometry without being an entity of the fictional game world. Examples of geometric representations are the character outlines of Left 4 Dead, the runner vision or checkpoint beacons in Mirror's Edge, or the mission briefings projected onto the game environments in Splinter Cell: Conviction.

20. Non-diegetic elements Is the UI element part of the fictional game story? No Is the UI element drawn as part of the game space? No Non-diegetic elements are visual UI elements residing in the non-fictional, non-spatial part of the design space. These are elements presented in an overlay manner, and this type of element is what conventionally makes up most of the user interface of FPS games.

21. Quizlette 2 Name some diegetic elements. Name some non-diegetic elements. Name some meta-representation elements. Name some meta-perception elements. Name some spatial/geometric elements.

22. Personality (look & feel) Still work both GUI aspects: Visual organization “Visual contrast and visual hierarchy to create layouts that guide users through content (i.e. work the Gestalt principles and CRAP) “Selecting the right fonts, colors, shapes, textures, and images to communicate an appropriate message to your target audience