UI design for games. Where is the "chrome" for games?  Character builders  Inventory/resource management  Leaderboards and trophy rooms  Level/mission/map.

Slides:



Advertisements
Similar presentations
UI Best Practices Application Developer’s Intro School Week 1 Day 1.
Advertisements

Audio and Visual Technologies
2011 AECT International Convention Tired of PowerPoint? Using research-based and theory-grounded guideline in selecting Web 2.0 tools for effective and.
Graphic Design Principles
Interaction design using the graphical user interface (GUI)
Visualization Designs--- Depth Cues. Object Size.
RPG systems appeared in the early eightyes in America as a new form of socialisation trough play. The concept of RPG is in fact the creation of a virtual.
Graphic Design 1 The “look & feel”. Fall 2002CS/PSY Agenda Principles Examples SHW discuss.
SIMS 213: User Interface Design & Development Marti Hearst Thurs Feb 8, 2001.
CMPUT 301: Lecture 25 Graphic Design Lecturer: Martin Jagersand Department of Computing Science University of Alberta Notes based on previous courses by.
The four basic principles of design
Web Page Design ECE 3940 Megan O’Byrne 10 September 09.
Level > Next Level > …. > Crumb Trail (Hansel & Grettel) Bread Crumb Trail.
Visual Rhetoric and the Common Core Amy Jo Southworth Bay Shore High School
The Elements and Principles of Art Design
?v=4k4mkL70E3g.  Business Cards are often considered to be the strongest marketing tool for a company.  Business cards.
In this presentation,  I will compare the design elements of educational and commercial computer game.  I will pointed out what kinds barriers in.
Using product gamification to drive user engagement.
Table of Contents Introduction to Dashboard Design Dashboards for different audiences Dashboard Design - Questions to Ask Dashboard Color Schemes Color.
William H. Bowers – Designing Look and Feel Cooper 19.
Creative Commons Attribution 3.0 creativecommons.org/licenses/by/3.0 Key Abstractions in Game Maker Foundations of Interactive Game Design Prof. Jim Whitehead.
The Do’s and Don’ts of Infographic Design by Amy Balliett - Smashing Magazine - 10/14/11.
Principles of Visual Design TECM 4250 Dr. Lam. Set 1.
Diegetic vs. Non Diegetic Audio. Diegetic sound Sound that comes from the diegesis Dialogue Music from story source Ambient sounds.
Introduction to Graphic Design
Adobe FLASH What & Why? Where & When? Is Flash dead? What about HTML5?
Notes on our audience People have selective attention/tunnel vision (especially if problem-solving), limited working/short-term memory, slow long-term.
Web Accessiblity Carol Gordon SIU Medical Library.
Interaction Design – Part II by A.Surasit Samaisut Copyrights : All Rights Reserved.
Composition Composition can be defined as the orderly arrangement of elements in a scene which, when taken as a whole, conveys intent and meaning.
Graphic Design The “look & feel” portion of an interface What someone initially encounters Conveys an impression, mood.
Setting Project Requirements. Step One The first step in creating a website is to define the Purpose.
Interface Design.
Adobe Illustrator.  Graphic design can be thought of as a visual language that is used to convey a message to an audience.  A graphic design is a visual.
Art Analysis and Criticism When evaluating a work of art, it is always important to make a thorough inventory of the various characteristics and ideas.
+ CULTURAL FRAMEWORK + REFRESH ON FORMAL FRAMEWORK.
ARTDIRECTION BASIC DESIGN PRINCIPLES. PRINCIPLES OF DESIGN The combination of design elements.
1 User Interfaces at Microsoft Research Intelligent Information Access using Animated 2 and 3D Information Visualization Mary Czerwinski.
Presentation or Visual Design Gabriel Spitz 1 Lecture # 15.
Media Literacy. Purpose To gain an understanding for the role that media plays in our lives To be able to analyze various forms of media text To make.
The basic Principles of Design The following is a brief overview of the principles of design. Although they are discussed separately, they are really interconnected.
Desktop Publishing CRAP.
The Middle TV Show- Color Element: This picture uses color as an element. They chose to use a light green. Analysis: The creator of this picture uses.
Emily Kinsella USES OF 3D MODELING. WHAT IS 3D MODELING? 3D modeling is the process of creating a surface of a 3 dimensional object is specialised software.
Design Basics. Introduction to Design de-sign 1. To prepare the preliminary sketch or the plans for (a work to be executed) esp. to plan the form and.
VISUAL RHETORIC All the C.R.A.P. you need to know… The Purdue Writing Lab.
Visual Rhetoric and the Common Core Amy Jo Southworth Bay Shore High School
Game Design Document Pertemuan 4 Matakuliah: T0944-Game Design and Programming Tahun: 2010.
Academic Presentation Design Creating an Effective Tool for Communicating Your Topic.
What have you learned from your audience feedback?
Editing for Visual Design TECM 4190 Dr. Lam. Why is design so important? Intimately tied with decision making Impacts perceptions well beyond “looking.
Copyright © Terry Felke-Morris Learning Outcomes  In this chapter...  common types of website organization  principles of visual design  your target.
SOUND AND FUNCTION: “THE FIFTH DIMENSION OF FILM” Music in Multimedia.
 The same story, information, etc can be represented in different media  Text, images, sound, moving pictures  All media can be represented digitally.
Media. UNIT 3 SAC: Narrative - 40 marks – (All 3 SAC’s - 12%) SAT: Production Exercises SAT: PDP UNIT 4 SAT: Media Process SAC: Social Values - 40 marks.
CSE1GDT – Interfacing 2.0 Paul Taylor The Player and the Game Players Mind Game World.
Abstract Panoramic Virtual Reality Motivation to Use Virtual Reality VR Types
PBA Front-End Using Contrast. The Gestalt Laws mainly deal with perception of ”similar” elements (similar appearance, similar position, etc.) How do we.
Making the Web Accessible to Impaired Users
Form and Function in 2D Design
The Elements of Design (SWITCH) Journalism 125.
Web Design Techniques.
C.R.A.P. Design Principles
I have the question But what next?.
C.R.A.P. Design Principles
Introducing: CRAP TECH MENTORING
Interface Design Interface Design
The four basic principles of design
The four basic principles of design
Welcome to ‘Planning for Media Arts activities for the classroom (F-6)
Presentation transcript:

UI design for games

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

Character Builders Ref:

Inventory systems One platformer dev's history: 012/03/09/menuinventory-design-in-games 012/03/09/menuinventory-design-in-games And her progress: 012/04/12/updates-and-remodels/

Leaderboards

Level/mission navigation

Start/pause/save/exit controls

Diagetic and Spatial and Meta: Oh My!

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

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

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.

Movie Time Diegetic and Non-Diegetic Elements

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

Diegetic elements 1. Is the UI element part of the fictional game story? Yes 2. 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).

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."

Meta representation elements 1. Is the UI element part of the fictional game story? Yes 2. 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.

Meta perception elements 1. Is the UI element part of the fictional game story? Maybe 2. 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.

Spatial/geometric elements 1. Is the UI element part of the fictional game story? No 2. 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.

Non-diegetic elements 1. Is the UI element part of the fictional game story? No 2. 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.

Quizlette 2 1. Name some diegetic elements. 2. Name some non-diegetic elements. 3. Name some meta-representation elements. 4. Name some meta-perception elements. 5. Name some spatial/geometric elements.

Still work both GUI aspects: Visual organization Personality (look & feel)  “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