HCI Design

1
HCI -- Design

• Editing Quake Models
• Human-Computer Interaction
• Human-Centered Design
• Affordances, etc

2
Editing Quake Models

• Once you unpack the .pak file.
• You can edit the .mdl files
• Use tools on www.planetquake.com
• I have some of these planetquake pages on the
  course page

3
History of HCI -- Bad Attitudes

• Stage 1
• Users are exclusively programmers
• Catering to programmer needs is weak
• Wastes resources
• People who make mistakes should be smarter
• However Mistakes are inevitable!
• Allowing easy error recovery is cost efficient

4
Bad Design Attitudes

• Reflected in other engineering areas
• Car safety
• Good drivers dont have accidents
• Since accidents are the drivers fault, dont
  reward bad drivers
• Dont design for safety
• Design for the impossibly perfect user

5
Evolution of Bad Attitudes

• Stage 2
• Write the application first
• Add the UI later
• Stage 3
• Users are other than programmers
• The End User

6
Not-so-Bad Attitudes

• Stage 4
• Design UI and application together
• The central concern is
• What can the user understand
• Avoid Technocentrism
• Eg. Audience chooses ending to a story

7
User-Centered Design

• User-centered design process
• Analysis of user needs
• Prototype
• Informal feedback
• Iterate on design
• Final application
• Formal feedback

8
Analysis of User Needs

• Techniques
• Surveys
• Card-sorting tasks
• Interviews
• Focus groups
• Look at competing products
• Ethnography
• Participant observation

9
Prototyping

• Storyboards
• Paper simulations of application
• Wizard of Oz experiment
• Prototyping tools
• Cheap!

10
Informal Feedback

• Present prototype to users
• Do a quick questionnaire
• Observe the user struggle with your lousy design

11
Iterate on Design

• Redesign system
• in light of initial user impressions
• pay attention to common complaints
• Be prepared to abandon bad ideas!!
• Its just an idea, not a measure of your worth!

12
Iterate on Design

• Let me reiterate
• Be prepared to...
• Abandon bad ideas!!
• Its just an idea, not a measure of your worth!

13

• Abandon bad ideas!

14
Final Stages

• Implement the product
• Get formal feedback
• You now have something concrete to show
• Performance analysis
• Testing
• Look for bugs
• Attention to detail
• Good UI work is really picky

15
Final Stages

• Playtesting
• 100s of testers working for months
• Full-time job
• Looking to tune the games playability
• Single-player scenarios
• Somewhat subjective
• Culturally laden

16
Design fixation

• Keep an open mind
• Dont get wedded to an idea
• Dont let design review become about whose idea
  wins
• Honor the truth. People come first.

17
Quotable Quotes Practice

• The secret to having good ideas is to have many
  ideas -- Bill Buxton
• Youve got 100,000 bad drawings inside you.
  Youre here at art school to get them out. --
  Chuck Jones
• Design takes practice!!

18
Quotable Quotes

• Where principle is put to work, not as a recipe
  or as a formula, there will always be style
  -- Le Corbusier
• Every curve and line has to have real meaning
  it cant be arbitrary. -- Frank Lloyd Wright

19
UI Design

• Different from design for other kinds of
  software?
• Increased emphasis on temporal element
• Tolerance for greater complexity
• Immersiveness
• "I've never wanted to be inside Office 97."
• Specialized hardware

20
Ecological Psychology

• Ecological Psychology -- JJ Gibson
• People developed in the real world
• Human perceptual ability shaped strongly by
  features of the natural world
• An Evolutionary theory of psychology
• Natural selection gave us abilities to recognize
  and manipulate tools

21
Affordances

• Affordance
• A term coined by JJ Gibson
• Something in the real world that suggests how to
  manipulate it
• Hammers afford pounding
• (the theory is more subtle than that)

22
Affordances

• HCI Affordance
• an interface object that allows input in a
  particular way
• Some inputs easier than others
• What are the different affordances of
• Keyboard
• Mouse
• Joystick
• Nintendo joypad

23
Keyboard

• Buttons for letters
• Shift combinations

24
Mouse

• 2D position
• Button press
• While moving (dragging)

25
Joystick

• 4 Types
• Isometric
• Stick does not move
• Force input
• Spring-return
• Isotonic
• No spring
• Force-feedback

Force input
Absolute 2D Location
26
Joypad

• Buttons
• Various grip locations
• Buttons arranged spatially
• Joypad directional buttons

27
Device affordance

• Each device will affect the interaction
• Training on 1 device does not transfer
• Performance will be better with Natural Mapping
• To some degree, this depends on what natural
  experience is being simulated

28
Metaphor

• Eg View control -- Push Joystick Left
• Screen moves Right Vehicle control
• Screen moves Left Grabbing scene
• Both are Natural
• Must explicitly understand the metaphor
• The controller moves a camera
• Control stick controls an airplane
• The controller grabs the objects in the scene

29
Modes

• Another aspect of device affordance
• How many operations does the game have?
• How many buttons/actuators are there?
• More commands than buttons?
• Youve got modes!

30
Modes

• Modes are often used to specify a complex scope
• Insert text mode
• Draw new curve mode
• Edit curve mode

31
Modes

• Recall Model Human Processor
• Each button press will require a human processor
  cycle 200ms
• Modes allow the user to Enter scope once
• Instead of for each curve operation

Doom Examples Inventory Current
weapon Strafe
32
Modes

• Successful modes
• Are evident to the user
• Allow a clearly defined subset of the entire
  systems functionality
• Eliminate command specification
• Cognitive subset

33
Modes -- Key Chords

• Modes provide a separate context to interpret
  user input
• Lower vs Upper case Shift key
• Selecting characters
• Pick all by wireframe box
• Add to selection by holding down shift key
• Without shift, this would start new selection

34
Modes -- Chord advice

• User holds a button to enact a mode
• User provides physical tension to enact the mode
• Physical tension costs effort
• User wants to reduce effort
• Will release button ASAP
• Physical tension is the mode display method

35
Modes without physical tension

• Enter mode by
• Menu selection
• Selected by command
• Requires a visual Mode Indicator
• The current weapon in Doom/Quake/
• Change in cursor shape

36
Modes on screen

• Hit areas on the screen enact different
  commands
• Cursor shape tells you the mode
• Not quite the same as modes