UI & UX : Using Human Psychology in Game Design
-
Upload
saurabh-mathur -
Category
Documents
-
view
4.188 -
download
2
Transcript of UI & UX : Using Human Psychology in Game Design
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