Cross Platform User Interface Development

1
Cross PlatformUser InterfaceDevelopment

• Tim Stellmach
• Design Group Manager
• Rob Caminos
• Game Designer

2
FROM PC TO CONSOLE

• PC always part of the pipeline
• Understand the differences

3
The PC Display The Monitor

• Variable resolution
• Consistent screen area
• Crisp and clear display

4
The Console Display The Television

• Fixed resolution
• Variable screen area
• Fuzzy and blurry

5
Screen Distortion

• TVs use electron guns.
• Electron guns spew forth electrons, in a vacuum.
  
• The screen glows where they hit.
• Electrons repel other electrons.

6
Screen Distortion

• There are lots of things that could go wrong in
  getting a contraption like this to shoot straight.

7
Jedi Knight Jedi Academy BETA

• What we got on some TVs. Why?

What we sent to the frame buffer.
8
Screen Distortion

• TVs can distort badly when presented with a
  high-contrast image.
• Lines are made brighter by shooting more
  electrons at the screen.
• Electrons repel other electrons.
• Brighter scan lines will deflect different
  amounts than darker scan lines.

9
The Television was not designed for this sort of
thing.
10
Suggestions

• Invest in a really cheap TV for distortion
  testing.
• Avoid using bright and dark colors together.

11
Screen Legibility

• Text is more complex than you may realize.
• TVs were not designed for reading text.

12
Concerning Fonts

• Fonts should be large and have a consistent
  thickness.
• Avoid using lowercase letters in UI menus.
• Consider adding an outline to the font.

MENUS SHOULD LOOK LIKE THIS
Not like this
13
Concerning Fonts
HUD Readouts in Jedi Academy
Before
After
14
Always test for legibility of text on a
television.

• If you can read this then youre straining your
  eyes ?

15
Aspect Ratios
Screen extents scaled to be equal in area.
16
Over Scanning

• Console manufactures require a safe region.
• Microsoft requires a safe region of 544x408 (85).

17
Jedi Knight Jedi Academy
Note the impact the safe region has on the HUD.
18
Split-Screen
Note what this does to the safe region!
19
From Mouse to Controller

• Mouse è Selecting
• Controller è Seeking

20
Streamline Menus
21
Show As Much As Possible
22
Fast Navigation
NEW GAME LOAD GAME SETTINGS EXTRAS
NEW GAME LOAD GAME SETTINGS EXTRAS
23
Crash Nitro Kart

• Based on Naughty Dogs Crash Team Racing.
• One year to develop the game on Playstation 2 ,
  Xbox, Game Cube, and Game Boy Advance. Currently
  under development on N-Gage.

24
UI Flowchart
25
Text Database
26
UI Menu System

• Graphical User Interface Design Outline.
  G.U.I.D.O.
• Lightweight
• Clean
• Extendible
• Reusable
• Easy to Use
• Powerful and Flexible

27
Technical Compliance Aikido

• Technical standards vary from platform to
  platform.
• The underlying principles behind them largely
  dont.
• If you internalize good design principles, youll
  achieve higher technical compliance with less
  effort and risk.

28
THE DESIGN OF EVERYDAY THINGSby Donald Norman

• A must read for any UI developer.
• Points out things in our everyday lives that are
  poorly designed and dont need to be.
• Much better than CATS.

29
THE DESIGN OF EVERYDAY THINGS

• The human mind is exquisitely tailored to make
  sense of the world. Give it the slightest clue
  and off it goes, providing explanation,
  rationalization, and understanding. - Donald
  Norman

30
Get a Clue!
31
THE DESIGN OF EVERYDAY THINGS

• One of the most important principles of design
  is visibility. The correct parts must be
  visible, and they must convey the correct
  message. - Donald Norman

32
Provide Instructions
33
THE DESIGN OF EVERYDAY THINGS

• Imagine trying to draw a picture with a pencil
  that leaves no mark there would be no
  feedback. - Donald Norman

34
Provide Feedback
35
Seven Principles for Transforming Difficult Tasks
into Simple Ones

• Use knowledge in the world and the head.
• Simplify the structure of tasks.
• Make things visible
• Communicate mappings.
• Exploit the power of constraints
• Design for errors.
• Standardize.

36
Soft Keyboard

• Use Knowledge
• Simplify Structure
• Visible
• Show mappings
• Constraints
• Design for errors
• Standardize

37

• Use Knowledge
• Simplify Structure
• Visible
• Show mappings
• Constraints
• Design for errors
• Standardize

38

• Use Knowledge
• Simplify Structure
• Visible
• Show mappings
• Constraints
• Design for errors
• Standardize

39
Design for Errors
40
Standardize
- Select - Back
- Accept - Cancel
- Yes - No
41
Knowledge in the Head
42
Technical Compliance Aikido

• If you internalize good design principles, youll
  achieve higher technical compliance with less
  effort and risk.

43
Final Thoughts

• K.I.S.S.
• Make It FUN!!!