UI & UX : Using Human Psychology in Game Design
- 1. UI / UX : Psychology in Game Design Matt Perrin 7/31/2010 www.pxlgames.com www.facebook.com/matthewperrin
- 2. 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.
- 3. Don Norman – 3 laws of Emotional Design Three Levels Visceral Level Behavioral Level Reflective Level TED Talks http://www.youtube.com/watch?v=RlQEoJaLQRA&NR=1 http://www.youtube.com/watch?v=jS1tyRMviXY
- 4. 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
- 5. 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
- 6. 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
- 7. What makes for a good experience? Recognition Immediacy Feedback Simplicity Every distraction or dissatisfaction exponentially affects a user’s experience.
- 8. 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.
- 9. 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.
- 14. 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
- 15. 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)
- 16. The Frankfurt Kitchen : A Time & Motion Study
- 17. Immediacy in Video Games Interactivity drives immediacy.
- 18. 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, 1 st 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.
- 19. 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#!
- 20. 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)
- 21. 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?
- 22. 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.
- 23. 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.
- 24. Who’s the champion at user feedback? LAS VEGAS CASINOS!
- 25. Here’s where I rave about Popcap
- 26. 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.
- 27. 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
- 32. 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
- 33. 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
- 34. 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
- 35. 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 Best Job-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
- 36. 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
- 37. 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 - B lack 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
- 38. Standard Fonts * - The displayed font is not Helvetica! I’m too cheap to buy it Font Family Readability Arial 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 & headlines Segoe UI Sans Serif Good, 10+, MS Favorite Times New Roman Serif Good at 12+ Trebuchet MS Sans Serif Readable, pt 10+ Verdana Sans Serif Most readable San Serif, designed for web
- 40. 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
- 43. 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
- 44. 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.
- 45. 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.
- 46. 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.
- 47. Color Blind
- 48. 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/
- 49. Normal Deuteranopia - 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)
- 50. Designing for Colorblindness Avoid bad combinations Red/Green, Blue/Purple, others Contrast Analyzer App http://www.paciellogroup.com/resources/contrast-analyser.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
- 51. 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.
- 52. 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?Id=76 http://trace.wisc.edu/peat/photosensitive.php
- 53. 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.
- 54. 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
- 56. 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
- 57. Another cool resource http://www.ted.com/talks/rory_sutherland_life_lessons_from_an_ad_man.html
- 58. Apple’s UX Documentation http://developer.apple.com/mac/library/documentation/UserExperience/Conceptual/AppleHIGuidelines/XHIGHIDesign/XHIGHIDesign.html
- 59. Intermediacy resources http://biae.clemson.edu/bpc/bp/Lab/110/reaction.htm http://www.colorado.edu/eeb/courses/1230jbasey/abstracts%202005/5.htm
- 60. 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
Editor's Notes
- #3: UI & UX go hand in hand, they dove tail together What I hope to do is show you standardized concepts and approaches to UI design that improves UX This is not going to be a deep dive into usability or user psychology or eye tracking or heat maps or all the other technical mumbo jumbo What I want to show is solutions and consideration to common user problems
- #5: hard wired into our generic makeup Evoking positive emotions as soon as we look at something Common examples Apple software, modern automobile
- #6: Response times are a classic example Feels bad to sit & wait for an app to load Or maybe you were confused by new UI changes – Office 2007 ribbon (quick show of hands, does anyone actually like it!?) Subconscious, automatic
- #7: Does it evoke a happy memory? That word prestigious there is kind of important Generic products versus name brand (Cheerios – branded box that is ¼ the size of the generic product, same price) Why do we pay the difference? Because it was ingrained in us My wife always made a big deal about Cheerios when I went grocery shopping. Switched the contents of a boxed cereal, asked her and she couldn’t tell
- #8: In order of priority You want as many of these as possible Strengthen others to make up for weaknesses Not cumulative!
- #9: Here’s where things get interesting What do we really mean by recognition Recognition Includes feelings of familiarity, item matching, multiple choice exams, True/False questions, recognizing someone you know... Recognition memory can be subdivided into two components: recollection and familiarity, sometimes referred to as "remembering" and "knowing" Recall Includes: coming up with the name for person you recognized, recalling where you were when Obama won the presidency?, fill-in-the-blank or essay exams That statement TIP OF THE TONGUE, that’s your Recall mechanism kicking in Ultimately Easier / faster to recognize something than it is to remember or reconstruct a description of it and then recognize it
- #10: Words may trigger a need to read, a need to recall If there is prior art established for how something should operate, then use it or emulate it
- #11: Standardized playback control buttons. This screenshot isn’t a great example but illustrates the point See reverse, fast forward, stop, play and record The only one that’s non-standard is the first one, what could it be? possible a refresh or reset? What happens when I press it? And what do those “C” numbers stand for? Where’s the manual? Slippery slope towards a bad user experience
- #12: 1981, actually the third model of the walkman Here we are looking at 30 years of innovation, but those fundamental playback controls are still the same
- #13: Bet your first reaction was that this was a real blue screen of death That was your recognition memory kicking in due to previous stimulus
- #14: Not just for UI but for brand names as well Coca-cola hasn’t changed their core font style in 100 hundred years, Pepsi evolves theirs constantly
- #15: Immediacy is a little tricky to discuss Not just waiting time for something to load Every single round trip of stimulus generates immediacy
- #16: Perceived time waiting is exponential MS Reversing progress bar / inaccurate timer Vista’s “UAC” User Access Control feature = negative immediacy What do we mean by cost? Time, money, public perception, reputation Slow respawn rates are negative, cause frustration, versus fast immediacy / restart
- #17: In Episode 2 of the BBC’s excellent “ Genius of Design ” series, ( available on Vimeo ), there is an interesting section on the Frankfurt Kitchen . Designed by Margarete Schütte-Lihotzky, the Frankfurt Kitchen was a response to the need for cost-efficient housing in Germany after WW1.
- #18: Wii, you have the immediate feedback of real world movement having an effect on the game Geometry Wars – Really fast meny options to dive in, restart levels. When you exit a game, it immediately takes you back to that same game type to be selected. It’s fast, it’s almost addictive. Make a mistake, keep that adrenaline rush going and jump right back in with 3 rapid button presses Super Metroid – Defeat Mother Brain, the final boss, game throws a curve ball at you. The base is self-destructing, you have 3 minutes to escape fighting your way back through the labyrinth. Adrenaline rush And then, if you make it back to your ship, you get a different ending based on the amount of time it took to beat the game and the number of items you collection, pushing you to replay it
- #19: Speed of clicking onscreen elements Same reason why homepages use their logo as a link to home page
- #21: I think I can wait to mell or taste in a game. Wii remote has a cool little speaker for special sound effects Dreamcast tried the VMU for a personalized video interaction, but who wants to look at their controller at a non-backlit display to pick a football play? There was a novelty Bit of a hot topic is touch… By touch, in my mind I am thinking of the vibration built into a controller or using a stylus to interact True haptic response
- #23: By the time you see a threat, it’s already too late Intensity, loudness, tone, crescendos Don’t just stick with a flat palette of sounds, be dynamic, diverse, surprise the brain with stimulus
- #24: So, who’s the most influential designer of Feedback driven games..? Las Vegas Casinos!
- #25: Las vegas
- #26: Here is where I talk about how awesome Popcap is http://www.youtube.com/watch?v=gflGglx7kcc&feature=related
- #28: Better to have a few helpful features than many unhelpful ones
- #30: Elegant design. What team are you on? What class are you playing? How much time is left? How much ammo? How much life?
- #31: March 1998
- #32: Prettier, but essentially the same basic UI layout and iconography w/ room for expansion 12 years later Immediacy, the portrait
- #34: Helps users process in to manageable units Doesn’t necessarily have to be white
- #35: Human brain can get bored by over stimulation The human brain is also good at processing isolated areas
- #36: How many average users say or believe they have a Tivo because that is the defacto brand name it became the verb? Luckily, DVR and VCR sounds similar for people to pick up on the similarities. If your name is established, then you’ve got it made. You can Facebook me your website so I can Google it when I get home after Tivoing my favorite show. Looking back at Starcraft… “Vespene gas”… Does the typical player care about “Vespene”? Even mineral might not be acknowledge. There’s really just gas & crystals
- #37: Recognition!
- #38: Hopefully the typography geeks out there are cringing at my use of Papyrus Transparency - Your not even realizing its there. Vector fonts – Adobe Illustrator – Effects > Rasterize. 3 options, Anti-Alias, Art Optimized (Supersampling), Type Optimized (Hinted)
- #39: Helvetica is also a fascinating documentary on Netflix
- #40: Syndicate Wars… anyone remember Syndicate? As much as I love cyberpunk, this is a little overkill
- #43: Masters of the Visual Heiarchy Completely customizable UIs Panels, transparencies, Indicators, custom colors & fonts for special items, damage level, Centereed error messages & warnings
- #47: The big studios have not taken this seriously Developing trend in Independent gaming Tidalus, puzzle game by Arceb… mentions color blind support Popcap has been a huge implementer of accessiblity options
- #50: Pro tan opia
- #51: For any elements in the foreground & background. Red text on a green background is a problem WoW – Item rarity in Beta
- #52: Julian Murdoch story – graphic card glitch while playing Lord of the Rings w/ friends, 15 minute seizure