UI / UX : Psychology in Game Design

Matt Perrin7/31/2010www.pxlgames.comwww.facebook.com/matthewperrin

Boring terminology

• What is User Interface (UI)?– Effective operation, control and feedback of a

machine that aids the operator in making operational decisions

• What is User eXperience (UX)?– Interaction of a person with a system including

their actions and perceptions• I have included my freeform speech notes

within the Notes of the PowerPoint.

Don Norman – 3 laws of Emotional Design

• Three Levels– Visceral Level– Behavioral Level– Reflective Level

• TED Talks– http://www.youtube.com/watch?v=RlQEoJaLQRA&N

R=1 – http://www.youtube.com/watch?v=jS1tyRMviXY

• Visceral– Most immediate, dominated by Appearance– Smooth or round object, bright colors,

symmetry have pleasant connotations– Sharp or pointed invoke feelings of fear /

danger• A survival principal• Most graphic design operates at visceral

• Behavioral– Based on the use of an object– How does it feel to operate it? Feeling in

control– Is it annoying or pleasant to use?– Core of usability relate to behavioral

• Reflective– How we think about or reflect on, an object– Does it have a positive or prestigious

connotation?– Branding!

• Works at reflective level by making people think in advance that a certain product or vendor is special

What makes for a good experience?

• Recognition• Immediacy• Feedback• Simplicity

• Every distraction or dissatisfaction exponentially affects a user’s experience.

Recognition vs. Recall• Recognition

– The ability to correctly remember something that has been encountered before

• Recollection involves remembering in detail a particular stimulus, including the context in which it was previously experienced

• Familiarity only requires knowledge of the stimulus’s features – the basic realization that one has encountered the stimulus before.

• An instinctual / reflexive response to a stimulus

• Recall– A search and retrieval process response to a

stimulus, and then a decision or recognition process is performed where the correct information is chosen from what has been retrieved.

Recognition• Recognition is better than recall for UI design• Standardized symbols or conventions improve

recognition• Design so that users can scan for their choices

– Human beings scan instead of read. We’ve been doing it for decades

• Thinking leads to frustration, misjudgment, and potentially failure.

Recognition Example

Recognition is Powerful

Immediacy

• Immediacy - An individual’s perceived amount of time between an action and its resulting consequences (Crano, 1995).

• First assumption is that its waiting / loading time.• Not entirely true

– Also, the speed with which a UI can be accessed– And the speed with which a user receives feedback– And the push onto a user to react to a stimulus

What creates Immediacy

• Positive Immediacy– Feedback (New & reinforcement)– Animation to show something is working– Accurate progress bars– Low cost of failure (Fast restart of a game after death/loss)– Time limits (Push adrenaline response)

• Negative Immediacy– Waiting– Lack of feedback– Extra movement / irrelevancy in the UI– High cost of failure (Waiting to restart a game after death / loss)– Time limits (Causing frustration)

The Frankfurt Kitchen : A Time & Motion Study

Immediacy in Video Games

Interactivity drives immediacy.

Fitt’s Law “of Click Times”• “The time it takes for a pointing device to reach a target is

proportional to the logarithm of the distance to the target divided by the size of the target.”– Dr. Paul Fitts,1954, 1st U.S. Air Force Human Engineering Division– Still holds true today!– Dependant on Human characteristics than specific tech

• The farther away something is, the more time it will take to click. – But since the law is logarithmic, it increases slowly. – This is because people accelerate their movements when moving

pointers to something that is a long distance away• The bigger something is, the less time it takes to click

– User’s don’t need to be as precise, which takes more time.

More on Fitt’s Law

• Fitts, P.M., The information capacity of the human motor system in controlling the amplitude of movement. J Experimental Psychology, 1954. 47.

• http://www.youtube.com/watch?v=EpBa3VzD5xY&feature=player_embedded#!

Feedback

• A reaction or response to a particular  process or activity

• The essential key to learning!• Also the easiest one to explain.• Three main types of sensory stimulation in

video games– Sound– Visual– Tactile Touch (vs. Perception Touch)

Feedback

• Types of Feedback– Sound effects– Visuals effects– Onscreen indicators– Rewards– Pleasure

• Feeling of satisfaction• Overcoming of an obstacle

• What’s does the human brain process fastest?

Sound!

• Mean Reaction Time for college-age individuals is about…– 160 milliseconds to detect an auditory stimulus– 190 milliseconds to detect visual stimulus– Milliseconds matter!

• Like the “Visceral Level” mentioned earlier, this is part of our evolution– Fight or flight

• You can apply the same principals of visual effects to sound effects.

You startled the Witch

The “Witch” in Left 4 Dead is preceded by sobbing noises & haunting music. Then an onscreen indicator & dramatic music signal her arrival.

Who’s the champion at user feedback? LAS VEGAS CASINOS!

Here’s where I rave about Popcap

Simplicity

• Does it simplify a user’s task?• Does it add value to the user?• If the answer is “no”, eliminate it!• Good designers get the maximum use out

of limited space.• Complexity increases learning time, &

chance for bewilderment.

Simplicity Continued

• Sometimes low-tech is the right tech.– The Google Homepage

• Developing fewer features frees you to refine features that users really need. – Fewer features mean fewer confused users,

less risk of errors, less documentation– Removing one feature increases usability of

the others

Visual Hierarchy

• The more important, the more prominent• Use visual cues

– Bold, Italics, Underscores– “White” space– Positioning– Height

• Very important• A little less important• Nowhere near as important

Visual Hierarchy

• Related logically = related visually– Grouping under similar headings

• Use “white space” to separate logical areas– Draws users attention to key points– Creates a sense of Order

Visual Noise• Use animations, distractions & eye candy in moderation• Grey borders / dividers

– _________________________________________– Black or white borders can be too strong of a color– _________________________________________– _________________________________________– A hint of grey can help items stand out– _________________________________________

• Use contrasting colors but muted colors can still have an effect as well! Experiment, offer different styles

Keep It Simple• Avoid over complicated or cute / clever names

– Unestablished or unbranded marketing names– Unfamiliar technical names or terms– Terms outside the common lexicon of your audience

• Fine line between flavor text and confusion

Worst Better BestJob-O-Rama Employment Opportunities Jobs

Style Points Points Score

Gamercard Profile Account

WAP or WLAN Wireless Access Point Wireless Router

Widget Stand-alone application A small application

Flash Memory Flash Drive USB Drive / Memory Card

Time shifting DVR Tivo

TEXT SHOULD BE EASY TO READ

• ALL-CAP TEXT REDUCES READING SPEED BY ABOUT 10 PERCENT.– Mixed case words have variations that break

up the text into recognizable shapes– Using All-Caps, test appears blocky & run

together.– Gives readers impression that the product is

childish, amateur, aggressive, unprofessional

Typography / Fonts

• Use common fonts. • Sized at 10 points or above• Use contrasting backgrounds so that text POPS

– Avoid busy backgrounds– Use a light grey transparency intermediate

• Best option - Black text on white backgrounds• Avoid anti-aliasing any text below 12 points

– Makes it harder to read– Also affects screenshots as the blur increases image

size– Consider working with Vector fonts in Illustrator

Standard FontsFont Family ReadabilityArial Sans Serif Readable, pt 10+

Comic Sans MS Cursive Difficult, even 12+Georgia Serif Most readable Serif Font, designed for web

Helvetica (*) Sans Serif Readable,10+, Apple favorite

Impact Sans Serif Poor, Used for print & headlinesSegoe UI Sans Serif Good, 10+, MS FavoriteTimes New Roman Serif Good at 12+

Trebuchet MS Sans Serif Readable, pt 10+Verdana Sans Serif Most readable San Serif, designed for web

* - The displayed font is not Helvetica! I’m too cheap to buy it

Buttons

• Primary factor in button usability…– Can I click this?

• Best to worst– Buttons (shadowed/bordeedr/styled)– CSS Styled

• Colored rectangle w/ options• The Facebook button

– Text w/ underline– Text

• Getting too clever with buttons can lead to confusion

Accessibility• Accessibility Problems

– Not being able to receive feedback from the game due to a sensory impairment.

• Examples• Not being able to hear dialogue between game characters or audio

cues, such as an explosion, because of an Hearing impairment and unable to see visual feedback to a Visual impairment.

• Not being able to identify friend from foe due to colour blindness

• Not being able to determine what input to provide to the game; – for example, not being able to understand how to play the game because of a

Cognitive impairment. • Not being able to provide input using a conventional input

device;– for example, someone who can only play games using switch input

Game accessibility • A recent study conducted by casual games studio

PopCap games found that an estimated one in five casual video gamers have a physical, mental or developmental disability – Estimated 50 million casual gamers, 10 million are disabled

• Microsoft commissioned a general survey on accessibility and predicted that 70 million computer users use accessibility technology–  Among US computer users who range from 18 to 64 years old,

57% (74.2 million) are likely to benefit from the use of accessible technology due to disabilities and impairments that may impact computer use. 

Legal obligation

• As Educational games are increasingly used as education tools, there may be a legal obligation to make them accessible, as Section 508 of the Rehabilitation Act mandates that schools and universities that rely on federal funding must make their electronic and information technologies accessible.

Common Accessibility Options• Attempt to accommodate disabilities• Hearing disabilities

– Offer text alternative to audio– Optional subtitles / captioning to video– On screen indicators towards objectives or threats

• Visual impaired– A text to voice option– Larger fonts option– Voice command support (Accessiblity APIs exist)

• The Marketing Angle: These small additions could impact thousands of your players! They add good will &

– Sites like ablegamers.com eagerly promote games that are accessible.

• ArcenGames.com – Tidalis – Feature list– Options for colorblind players, players averse to lots of light and motion, and older

computers.

Color Blind

Colorblindness

• In the general population, 8% of men, .5 percent of women have color blindness

• Bioshock 2 Example– http://nukezilla.com/2010/02/11/what-bioshock-2s-hacking-looks-like-if-youre-colour-blind/

NormalDeuteranopia - Red-Green Color Blindness (6% of male gamers, 0.1% of female gamers)

Protanopia - Red-Green Color Blindness (1% of male gamers, 0.01% of female gamers)

Tritanopia - Blue-Yellow Color Blindness (0.01% of male gamers, 0.01% of female gamers)

Designing for Colorblindness

• Avoid bad combinations– Red/Green, Blue/Purple, others

• Contrast Analyzer App– http://www.paciellogroup.com/resources/contrast-analy

ser.html• Test by viewing game screenshots in grayscale.

– Important elements should be discernable in grayscale• Provide secondary cues when you use color to

distinguish important information.– Shapes, custom textures, palette swaps

Epilepsy

• Some individuals may be prone to epileptic seizures due to visual effects on screen.– In the UK, television shows provide onscreen

warnings of upcoming flash photography or other potential seizure inducing imagery. This is due to European TVs using a 50hz refresh rate.

– In 1997 a Pokémon episode broadcast in Japan showed a sequence of flickering images which triggered seizures in hundreds of children.

More on Epilepsy

• Electronic and Information Technology Accessibility Standards (Section 508)– http://www.access-board.gov/sec508/standards.htm– Software shall not use flashing or blinking text,

objects, or other elements having a flash or blink frequency greater than 2 Hz and lower than 55 Hz.

• ANSI/HFES 200 Human Factors Engineering of Software User Interfaces ($200!)– http://www.hfes.org/Publications/ProductDetail.aspx?I

d=76• http://trace.wisc.edu/peat/photosensitive.php

Motor Skill Impairments

• Bigger buttons• Button “stickiness”• Auto-aiming to targets• Goal Based Interfaces

– Goal crossing (where users pass a target line with the mouse cursor rather than stop and click on a small area) may be a more efficient approach to target selection for people with motor impairments than area pointing.

More on Accessibility• In 2003, the International Game Developers Association (IGDA) introduced the Game

Accessibility Special Interest Group, founded by Thomas Westin and currently chaired by Michelle Hinn. In 2006, the Bartiméus Accessibility foundation initiated the Game Accessibility project, a project which focuses on creating awareness and providing information for game developers, researchers and gamers with disabilities, led by Richard Van Tol. These two major groups work together as advocates within the game industry for increasing the accessibility of video games for gamers with disabilities.

• In 2004 two disabled gamers, Mark Barlet and Stephanie Walker, founded AbleGamers.com, set out to further advance game accessibility in the AAA gaming space. Some of their efforts include: pressuring NCSoft to remove Game Guard from the game Aion and discussing with game developer Blizzard the addition of color blind friendly enhancements to the game World of Warcraft. In 2009 AbleGamers.com started 501(c)(3) nonprofit The AbleGamers Foundation to facilitate their work.

• In 2010 the Accessible GameBase was launched by the charity SpecialEffect. This site aims to develop (and is developing) a welcoming, all-encompassing gaming community. This, alongside outreach projects such as accessible gaming roadshows and the development of a significant accessible gaming database, will see positive change.

• http://www.igda.org/accessibility/• http://dwarfpriest.com/2008/09/03/is-blizzard-committed-to-disabled-gamers/• http://www.gamasutra.com/features/20060920/zahand_01.shtml

Cool Resource: Air Force 1986

• GUIDELINES FOR DESIGNING USER INTERFACE SOFTWARE

• http://hcibib.org/sam/index.html– August 1986– Sidney L. Smith and Jane N. Mosier

Another cool resource

• http://www.ted.com/talks/rory_sutherland_life_lessons_from_an_ad_man.html

Apple’s UX Documentation

• http://developer.apple.com/mac/library/documentation/UserExperience/Conceptual/AppleHIGuidelines/XHIGHIDesign/XHIGHIDesign.html

Intermediacy resources

• http://biae.clemson.edu/bpc/bp/Lab/110/reaction.htm

• http://www.colorado.edu/eeb/courses/1230jbasey/abstracts%202005/5.htm

Resources

• Design Anti Patterns - How to Design a Poor Web Experience– Netflix / Yahoo “anti-pattern”– http://www.slideshare.net/billwscott/design-anti-

patterns-how-to-design-a-poor-web-experience• Prioritizing Web Usability

– Jakob Nielsen, Hoa Loranger• Don't Make Me Think! : A Common Sense

Approach to Web Usability– Steve Krug