Your SlideShare is downloading. ×
  • Like
Are We Having Fun Yet: Usability Heuristics
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Are We Having Fun Yet: Usability Heuristics

  • 2,967 views
Published

The joke goes something like this: if interaction designers had made Super Mario Brothers, the game would just have one large button labeled “Rescue Princess.” There is some truth to that. Interaction …

The joke goes something like this: if interaction designers had made Super Mario Brothers, the game would just have one large button labeled “Rescue Princess.” There is some truth to that. Interaction designers strive for products that let people get tasks done quickly and easily. Yet, the fun of gameplay is overcoming challenges and rules deliberately set to impede a player’s progress. So as interaction designers, how do we separate challenges that add to the gameplay from those points of frustration which detract? For game developers without access to interaction designers or researchers, the challenge can be even greater. When developing a new game, what general principles should be followed to make sure it remains safely on the fun side of frustrating? Jakob Nielsen gave us the ten canonized Usability Heuristics for web and system design; our humble goal is to do the same for computer games. This presentation will provide ten interface heuristics applicable to games as well a few useful “discount” evaluation techniques for when you don’t have the time, or the money, for a full lab study.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Great presentation, guys. Perhaps most remarkable is that you managed to talk about this without using the word ’gamification’ :)
    Are you sure you want to
    Your message goes here
  • About slide 32 - a common problem. I've seen lots of players wander around with no pants in-game. Granted it was single-player so not so very embarrassing as leaving your lair unclothed or being unable to enter battle due to missing equipment. In fact there was even some talk of designing benefits such as swimming faster. :P
    Are you sure you want to
    Your message goes here
  • Talk given by Corey Chandler and John Mark Josling at SXSWi 2011.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
2,967
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
41
Comments
3
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • Welcome everyone.\n\nThanks for joining us this afternoon. And thanks the SXSW organizers for giving us the opportunity to talk.\n\nBefore we begin, just out of curiosity, how many people here work in the Game Industry? Of those, how many identify as UI designers?\n
  • So why is UI even important? I probably don’t even need to explain this to this crowd.\n\nOf course, we experience everything digital through its interaction with us. These interactions can be the difference between success and failure at any task. \nAnd not inconsequentially they also influence how a product makes us feel. Look at the major successes in the technology world and you can see how much impact good UI can have. (Apple, Mint, Tivo,) \nAnd this is exactly the same for games.\n\nThe best story, graphics, gameplay, or sound can be tarnished by a bad UI. \n
  • These days, UI designers are talking a lot about what we can learn from games. Game mechanics are everywhere now-a-days (badges, rankings, mayors, points, progress bars). “Gameify” is the hot trend in business and design. (God, I hate that word.) - \nBut we have a feeling the learnings can go both ways.\n\nUI Designers have developed a unique perspective on the world. A toolset. We see an ATM and immediately evaluate the UI; we visit a shopping site and we instantly become critical of the flow or the presentation or the interaction. It can be quite debilitating. And this It even happens when we play games. Which is why we thought it might be useful to share our perspective with game designers and get their reaction.\n\nRescue princess? OK.\n
  • Not experts in Game UI, for sure. \n\nI am John Mark Josling, I lead Interaction Designer at Yola Inc. (a san francisco-based company which provides tools to help small business create an online presence) \nI have been an interaction designer for a while, and a front-end engineer before that. I have played games all my life. And I have become increasingly obsessed with the intersection between experience design and games.\n\nSitting next to me is Corey Chandler...\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Provide a path to mastery?\n
  • \n
  • \n
  • \n
  • Dragon age pie menu\n
  • Issue: Actions to perform > number of available inputs\n
  • \n
  • \n
  • \n
  • \n
  • Connection between player and virtual representation of self & the world. Mismatch / ambiguity makes this connection weaker, not as immersive. Games seek to connect the player with a virtual representation of a world & themselves\n\n
  • Street Fighter Video\n
  • \n
  • As we grew-up, the real world taught us what can be moved, pushed, lifted, clicked or turned on. We are great at learn these rules and patterns and using them to apply to new objects we find.\nIn UI design, we tend to lump these patterns into a category called “affordances”, but it can be strange to talk about shrubs as having affordance, so I have more generalize this by talking about Active and Inactive.\n\nSince games are by choice or by constraints limited in the world that they represent, almost every game must teach the player these new rules as they play. Games must piggy-back on existing rules or quickly teach us new ones. \n\n\n
  • ---Ask audience which plant is interactive.----\n\nAs it turns out I was searching for a small root on the ground, the only way to detecting interactivity was by moving my cursor over the ground in a grid, watching to see when the action/object value changed. \nIn this case, I was forced to relearn-rules as to what plants in this world could be harvested and which ones were for atmosphere only.\n\nAs texture maps become richer and more detailed, I can foresee this problem becoming worse. \n
  • Peggle often uses detailed background patterns to create variety. But what this means is that a player can be asked to identify key properties of an object at a glance. Clues need to be built in to the system to make this easy. \n\nIn this case, a strong drop shadow effect is used for object on which the ball will bounce, but is it enough? Will it bounce off the smoke? Will the ball bounce off of the dragon? In this case we are fighting against gestalt grouping effects. \n
  • The web had to struggle with the same challenges, we had to teach our users new affordances that didn’t exist in the real world. We established patterns and conventions, such as blue links and underline effects to help distinguish interactive parts of a page from those static parts.\n\nYou can look at this page instantly and understand what is click-able, and what is not. Each website does not need to re-teach you a notion of links. \n
  • World of Warcraft provides a rich backdrop of fauna and flora, but some parts are actually valuable resources to players. Blizzard identifies these with a sparkling animation, quickly distinguishing interactive objects from non. Works for plants, also works for barrels. \n\nSuddenly Blizzard was able to make any of its previous set-pieces-only interactive by applying this affordance to them. Players had already learned this rule from previous game experiences. \n
  • Everquest 2 used text labels to establish this convention. If a player, and npc or a monster has a name over it, it can be interacted with. The same applies to certain rocks and plants. A player can quickly identify which objects in this scene are ‘active’.\n
  • I don’t want to spend too much time talking about how some of these heuristics can be broken for deliberate effect, but I thought I would point out this one. \nSome games actually can use this ambiguity to create the game mechanics. In the adventure game series, Monkey Island, part of the game play actually becomes figuring out which items within the rich and detailed landscape are useable. But it is this should be done with caution, as games of ‘hunt the pixel’ can quickly cross over that line between fun and frustration. \n
  • Challenges come with implied risks, part of what builds up the feeling of ‘fiero’ or the ‘epic win’ moment -- is the very real risk of failure. \n Exploring through trial and error is a key gameplay mechanic. Where this becomes problematic from a UI standpoint is when this failure comes at unexpected times. \n These tend to happen during routine tasks or mundane activities: inventory management, character customization, meta game activities such as saving and loading, mapping, tracking, etc. These tasks are generally not assumed to carry any risk.\n \n
  • Getting dressed is a good example. My character puts on a certain set of clothes before beginning her dungeon delve. This is a mundane activity which I don’t expect to carry any risk.\n\nIn this example the error is subtle.\nI have made a grave mistake...\n
  • I forgot to put on pants.\n\nI had made an error. The game system knew this. There is really little reason for me to be fighting monsters without pants, yet I am provided with no warning or error message.\n
  • A key component of this heuristic is to identify and also PREVENT errors. Especially that type of errors known as “non-recoverable”. \n\nIn World of Warcraft, for example, deleting items is done by dragging an item into empty space and then releasing the mouse button. In a game where objects are often transferred around through drag-and-drop, you can imagine how this action be ripe for mistakes. Since the accidental deletion of an object is not easily recovered from, a traditional method of prevention is a confirmation dialog box. This helps...\n
  • However, a better solution is to make errors recoverable. We are all familiar with “Undo”. \n\nFor example, in the case where a player accidentally sells an item to the vendor she would rather keep, she can use the “Buyback” tab to undo the mistake.\n\nThis helps because it prevents flow interruption, and honestly, most people click “yes” dialog boxes without reading them. \n+ MS Word delete\n
  • Your game should be self-aware. Maybe not like Skynet. But in such a way that it can provide the right information to the player at the right time.\n\nThis doesn’t all have to be exposed at once, but look for ways of using progressive disclosure to let players themselves control the flow of additional information. This can be both game status information as well as additional help documentation.\n
  • Traditional printed manuals provide a great resource for the user, but they suffer from two major shortcomings.\n1) They take the player out of the game flow. If a player needs help at a particular part of the game, they need to put down the controller and pick up a book.\n2) The manual is “dumb”, it has no notion of the current state of the game or the context of the player. It can’t use that state information to filter or curate the data that it gives to the user.\n
  • In this example, Civilization 4 can provide a context appropriate technology tree. \nNot only can it slide the tree over to the area which best reflects the players current level of technology, but it can highlight missing conditions (with red Xs) and objectives that still need to be completed to achieve that technology. \n\nCompare this to a raw data drop free of context.\n
  • Look for ways to provide progressive information disclosure that is player controlled. \nWe use mouse-over tool tips a lot in web sites and applications. \nIn this second Civilization example, a player is able to indicate her desire to learn more about the Water Mill improvement by mouse-ing over the icon. In this way the game is able to provide specific pieces of extremely relevant information.\n
  • I think game industry has made some remarkable UI strides on over the last 10 years. But I wanted to highlight the heuristic none the less because it is so important.\nIt really gets down to the idea of reducing the cognitive load on players. Games like almost all digital systems have reached new level of complexity. With this complexity comes a cost. A player now has more things to track and remember than ever before. This heuristic is focused around reducing that burden.\n
  • Obviously, we don’t see a whole lot of manuals like this any more, but it is worth remembering the old days when the button combinations needed to execute a move were ONLY found in a small printed booklet. If you didn’t remember what buttons to press when, you needed to return to the manual.\n
  • Now a days there are some well established conventions to help ease that burden. Actions can be laid out to map to physical controls to help aid in this memory. \nMinecraft attempts to do with with its action bar. However, this is not always enough. Without clear labels, this mapping can get challenging and can be difficult to at a glance remember if drop stone block is 4 or 5.\n
  • In contrast, Zelda: Wind Walker does provides a visual mnemonic that maps keys to buttons on the controller. The visual representations of the buttons on the screen map to the physical layout of the controller as well as in color.\n
  • More obvious, but modern games often ask players to complete a large number of dis-sperte tasks. Look for ways to help users track these objectives and tasks in clean and precise ways.\n
  • And of course, objective tracking doesn’t have to be as literal as a ToDo list, you can use subtle environmental cues such as color, animation and sound to help guide users from task to task.\n
  • Consider the context that your game is played in. It is easy to think at all games are played in optimal settings with ideal hardware, lighting, and with 100% of focus given to the game. This sadly, is not always the case.\n
  • iPhone apps are designed to be played in a context-swapping heavy environment. There is no quit or camp button to find, no escape key. \n
  • \n
  • Cinematic, can you pause when someone needs to talk to you.\nColor blind - ? \n
  • More than just maintaining Jenova Chen’s notion of game flow.\n
  • \n
  • \n
  • \n
  • \n
  • If you assume no one likes loading screens, this ends up actually creating a slightly negative feedback loop. \nThis can discourage players from exploring, which might go against one of the behaviors you are actually trying to encourage.\n
  • When you have to have a loading screen try to keep it contextual to the game.\n\n
  • This includes ‘death’ or failure in Fl0w provides no break in the experience, ( Super Meat Boy has a similar way of minimizing the flow penalty of death.)\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Transcript

  • 1. Are We Having Fun Yet?Usability Heuristics for Games #havingfunUI Corey Chandler & John Mark Josling
  • 2. Why is UI Important?
  • 3. What do UI Designers Know About Games?
  • 4. Wait, Who Are You?Corey Chandlercorey.chandler@coreychandler.netJohn Mark Joslingjmjosling@gmail.com
  • 5. Boundaries Between UI and Game Design
  • 6. Game vs. Interface Design Game
Design Interface
Design• "Game design is the process of designing the content and rules of a game.”• "The goal of user interface design is to make the user’s interaction as simple and efficient as possible, in terms of accomplishing user goals...” - Wikipedia• Both seek to achieve a net positive user experience, and to avoid unanticipated negative experiences.
  • 7. Anticipated Negative ExperiencesBoth Game Design and Interface Design addressanticipated negative experiences.Street Fighter IV Ebay Inc.
  • 8. Unanticipated Negative ExperiencesBoth Game Design and Interface Design seek tominimize unanticipated negative experiences.Halo 3 Heatmap SiteCatalyst
  • 9. Ten Heuristics
  • 10. Increase Interaction Speed Over TimeAs users become more experienced with a game,enable them to speed up their interactions.Frequent tasks should be the most streamlined.
  • 11. Bad Example:Continuing a multi-player game Borderlands
  • 12. Good Example:Frequent transactions are immediately available Wells Fargo ATM 13
  • 13. Good Example:Pie menus are one design pattern that enables expertise Dragon Age: Origins
  • 14. Avoid Conceptually Conflicting InputsChallenge: # actions > # inputsWhen assigning multiple actions to one input, try tomake them as conceptually consistent as possiblethroughout the game.
  • 15. Red Dead Redemption
  • 16. Red Dead Redemption
  • 17. Red Dead Redemption
  • 18. Provide Immersive CuesUsers should be aware of their status and impact onthe world and when these change.Mismatches & ambiguity make the connectionbetween player and virtual world weaker, lessimmersive.
  • 19. Bad Example:How much health remains? Street Fighter 2
  • 20. Bad Example:How much health remains? Street Fighter 2
  • 21. Good Example:Directional awareness as an immersive cue Gears of War 2
  • 22. Distinguish Active from InactiveDigital spaces and games piggy-back onlearned expectations.Games need to either stay true theseexpectations or provide cues to help playerslearn new ones.
  • 23. Bad Example:In games, it can be hard to tell foreground from background Fallout 3: New Vegas
  • 24. Bad Example:Make it clear what can be interacted with, and what is just decoration Peggle
  • 25. Good Example:The web has developed new affordance cues ebay.com
  • 26. Good Example:Games must rely on affordance cues World of Warcraft
  • 27. Good Example:Games must rely on affordance cues Everquest II
  • 28. Exception:Some games build this ambiguity into their puzzles Monkey Island 2
  • 29. Prevent Surprise ErrorsFrustration comes from unintendedchallenges, often during mundane tasks.When the user does fail, make sure theyunderstand why.
  • 30. Bad Example:Suspected errors should be identified World of Warcaft
  • 31. Bad Example:In this case, the error was not identified No pants World of Warcaft
  • 32. Good Example:Try to prevent non-recoverable errors World of Warcaft
  • 33. Good Example:Allow players to undo previous errors Dragon Age: Origins
  • 34. Be Game State AwareLook for ways of providing contextual help.Some players prefer documentation overexploration; provide for both.
  • 35. Bad Example:Printed manuals don’t reflect the player’s current situation Civilization V
  • 36. Good Example:Look for ways of providing information as it is needed Civilization IV
  • 37. Good Example:Context sensitive tool-tips can help expose richer detail when needed Civilization V
  • 38. Reading is Easier than RememberingAvoid excessive cognitive burden.Keep information contextual.Make objectives clear, memorable.
  • 39. Bad Example:Printed manuals are memorization exercises Street Fighter 2
  • 40. Bad Example:Learning a new key or button mapping can take time Minecraft
  • 41. Good Example:Look for ways to provide mnemonicsor clues as to current button mapping The Legend Zelda: Wind Waker
  • 42. Good Example:Summaries can help remind players of objectives Rift
  • 43. Good Example:Reminders of current goals or objectives can be as simple as color clues Mirrors Edge
  • 44. Remember Real LifeProvide quick-and-easy exits.Consider the environment your game is playedin.
  • 45. Good Example:Remember the context in which aplayer will be enjoying your game Dungeon Raiders
  • 46. Good Example:Allow players to enter and exit thegame quickly
  • 47. Good Example:Consider unique player needs Starcraft 2
  • 48. Maintain FlowMinimize context breaks, cognitive dissidence.
  • 49. Bad Example:Consider the impact of the entire player flow • Find Screen Shots Yola Inc.
  • 50. Bad Example:Consider the impact of the entire player flow • Find Screen Shots Yola Inc.
  • 51. Bad Example:Consider the impact of the entire player flow • Find Screen Shots Yola Inc.
  • 52. Bad Example:If your game encourages exploration, try to keep it seamless Dragon Age: Origins
  • 53. Bad Example:Context beaks can be seen as punishment Dragon Age: Origins
  • 54. Good Example:If you need loading screens, consider keeping the playerin context as much as possible Fallout 3
  • 55. Good Example:When possible, avoid transitions between levels completely Flow
  • 56. Ask “What Could I Take Away?”Interface elements should not contain informationwhich is irrelevant or rarely needed.Beware of chrome creep.
  • 57. Good Example:Chrome ~30% screen Diablo
  • 58. Good Example:Chrome ~25% screen Diablo II
  • 59. Good Example:Chrome ~15% screen Diablo III
  • 60. Good Example:Reducing chrome enables primary content to shine
  • 61. Bad Example:Non-essential controls cover important real estate Starcraft 2
  • 62. Bad Example:Non-essential controls cover important real estate Starcraft 2
  • 63. Good Example:Find ways to incorporate key information into the primary area Dead Space
  • 64. Discount Usability Techniques
  • 65. Thanks!And special thanks to Marina Kobayashi for all herhelp!
  • 66. Questions & Discussion
  • 67. (1) Increase Interaction Speed Over Time(2) Avoid Conceptually Conflicting Inputs(3) Provide Immersive Cues(4) Distinguish Active from Inactive(5) Prevent Surprise Errors(6) Be Game State Aware(7) Reading is Easier than Remembering(8) Remember Real Life(9) Maintain Flow(10) Ask “What Could I Take Away?”