Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The Design of Everyday Games

1,490 views

Published on

NOTE: this is NOT the slide deck I presented, rather it's a "extended dance remix version" where many things I cut out for time are put back in.

In 2013, Don Norman updated The Design Of Everyday Things. In 2015, references to "affodances" and "feedback" were everywhere at GDC. As games reacher broader audiences, it's critical that game designers make games accessible to players who are more familiar with Amazon than Fallout 4. A positive user experience can create the next Monument Valley or Clash of Clans.
Norman pointed out that a positive user experience begins with usability, but it doesn't end there. Great user experiences anticipate the user's needs and then go beyond that to delight. User experience designers have evolved a variety of approaches and tools to assure that the a product is "a joy to own, a joy to use."
In this talk, Christina will explore the core principles of user experience design, and how it can create games that are elegant and complete experiences that both serve and delight their players.

Takeaway
She will begin with relevant UXD approaches: Hick's Law, Concept Models, as well as affordances and feedback. She will present an introduction to useful techniques in UXD, from charrettes to journeymaps to usability. Finally, why user experience design is more than just good business, it's a moral prerogative.

Intended Audience
This talk is for game Designer, artists and anyone who has to make decisions about player-facing interfaces. A familiarity with popular games and software is needed, but no advanced knowledge is required. It will be an accessible talk.

Published in: Design
  • Be the first to comment

The Design of Everyday Games

  1. 1. The Design of Everyday Games
  2. 2. Associate Professor, California College of the Arts @cwodtke | eleganthack.com Christina Wodtke
  3. 3. Apple’s Cargo Cult
  4. 4. OW! MY EYES!
  5. 5. User Interface Interaction Design Information Architecture User Psychology Concept Models
  6. 6. "User experience" encompasses all aspects of the end-user's interaction with the company, its services, and its products. Don Norman
  7. 7. Let’s be honest: It’s all about the smiling boxes.
  8. 8. The first requirement for an exemplary user experience is to meet the exact needs of the customer, without fuss or bother. Don Norman
  9. 9. A) Amazon understands I always run out of razors! B) Amazon understands I have no clue how often to buy them!
  10. 10. Next comes simplicity and elegance that produce products that are a joy to own, a joy to use. True user experience goes far beyond giving customers what they say they want, or providing checklist features. Don Norman
  11. 11. In order to achieve high- quality user experience in a company's offerings there must be a seamless merging of the services of multiple disciplines, including engineering, marketing, graphical and industrial design, and interface design. Don Norman
  12. 12. WHAT IS USER EXPERIENCE? The mini cooper convertible has my favorite car experience. The way it handles, accelerates as well as the beautiful interior, the innovative half-open position of the roof!.
  13. 13. But the experience doesn’t stop at the car. There are stickers, swag, driving adventures, dedicated AAA support for the life of the car and music services! What does it mean to enjoy driving a car, they asked… then answered.
  14. 14. User Experience Design: the design of anything independent of medium or across [device] with human experience as an explicit outcome and human engagement as an explicit goal -Jesse James Garrett
  15. 15. Jesse James Garrett
  16. 16. UI IxDIA The User Copywriting Graphic Design MARKETING CUSTOMERSERVICE Pre-use Use Post-use User experience design Key word is USE
  17. 17. Things you should know
  18. 18. UNIVERSAL PRINCIPLES ● Affordances ● Feedback ● Direct Manipulation ● Standards UI IxDIA
  19. 19. “Like putting an Armani suit on Attila the Hun, interface design only tells how to dress up an existing behavior.” – Alan Cooper
  20. 20. AFFORDANCES Things that look pushable, get pushed. Things that look pullable, get pulled. UI IxDIA
  21. 21. AFFORDANCES U I I x D I A Buttons that look pushable, get pushed
  22. 22. Forms should say “type here” See: Flat UI and Forms by JESSICA ENDERS
  23. 23. MEANING Links, buttons and inputs are not decorative. They tell a story. UI Ix D IA
  24. 24. UI Ix D IA BUTTONS HAVE MEANING
  25. 25. LINKS HAVE MEANING UI Ix D IA
  26. 26. You are always communicating. Don’t be rude.
  27. 27. Set expectations, meet expectations UI Ix D IA
  28. 28. Feedback Let people know it worked UI Ix D IA
  29. 29. Feedback On Facebook, they show the link preview as soon as you add it, so you know all is working (and can preview) UI Ix D IA
  30. 30. Feedback Your new status is always posted on top, to let you know it was successfully posted (even if a new status came in a second after, and is thus newer) UI Ix D IA
  31. 31. Alphabear won’t embarrass me socially
  32. 32. Recognition over recall Seeing is easier than scavenger hurts U I I x D I A
  33. 33. Don’t do this Don’t make people memorize where things are!
  34. 34. UI Ix D IA
  35. 35. Variation Unique Visitors Unique Clicks Hamburger 120543 1211 Menu 121152 1455 Unique Visitors Hamburger Clicks % Menu Clicks % iOS 148097 906 0.61% 1143 0.77% Android 87245 216 0.25% 237 0.27% UI Ix D IA
  36. 36. U I I x D I APJ McCormick, Challenging Data Driven Design, WarmGun 2013
  37. 37. UI Ix D IA PJ McCormick, Challenging Data Driven Design, WarmGun 2013 What do these dots mean?
  38. 38. UI Ix D IA PJ McCormick, Challenging Data Driven Design, WarmGun 2013
  39. 39. UI Ix D IA PJ McCormick, Challenging Data Driven Design, WarmGun 2013
  40. 40. UI Ix D IA PJ McCormick, Challenging Data Driven Design, WarmGun 2013 The navigation carries information. Unless:
  41. 41. Clear affordances + Recognition over recall UI Ix D IA
  42. 42. USE CLEAR LANGUAGE 5 8 UI Ix D IA
  43. 43. Direct Manipulation
  44. 44. Harry Potter Years 1-4 on Ipad Direct Manipulation Harry Potter Years 5-7 on Ipad Virtual Controller
  45. 45. Contextual Principles ● What you know about the context/users/activity. E.g. ● Recipes must be scannable ● User should know where they are in a recipe ● Recipes allow users to find ingredients for shopping and mise en place by listing them apart from instructions U I I x D I A
  46. 46. Tivo Tennants ●It’s entertainment, stupid. ●It’s TV, stupid. ●It’s video, dammit. ●Everything is smooth and gentle. ●No modality or deep hierarchy. ●Respect the viewer’s privacy. ●It’s a robust appliance, like a TV.
  47. 47. FarmVille 2 Postmortem: What Grew Wild & What Withered Away: Wright Bagwell, Mike McCarthy
  48. 48. Things you do
  49. 49. OBSERVE from IDEO’s Designkit.org
  50. 50. 67CONTEXTUAL INQUIRY, FIELD STUDIES, & ETHNOGRAPHY http://www.flickr.com/photos/halversongroup
  51. 51. USABILITY TESTING http://nform.com | http://uid.com
  52. 52. ANALYZE from IDEO’s Designkit.org
  53. 53. CHUNK FINDINGS INTO AFFINITY GROUPS
  54. 54. Play with possible models Relationship to other data Credit: Steve Portigal
  55. 55. Play with possible models Frequency Credit: Steve Portigal
  56. 56. Play with possible models Timeline Credit: Steve Portigal
  57. 57. MAKE
  58. 58. COMMUNICATE START HERE: CONCEPT MODELS
  59. 59. We explain things with pictures all the time. How to conceive, how to build…
  60. 60. CONCEPT MODEL: a visual representation of a set of ideas that clarifies their meaning for both the thinker and the audience
  61. 61. Concept models for ideas See http://boxesandarrows.com/how-to-make-a-concept- model/
  62. 62. Concept Models to Communicate to team
  63. 63. Architecture concept model
  64. 64. User Designer Mental model Conceptual model 1. Discover Mental Model 2. Understand system 3. Synthesize into conceptual model System For Software, Concept modeling proces
  65. 65. How areas of site interlock Via Andrew Hinton @inkblurt Consider conceptual models over sitemaps
  66. 66. Stone Librande’s One Page Designs are concept models
  67. 67. Flows
  68. 68. Paula Scher modelled out the approval process at CBS records in hope of saving her sanity.
  69. 69. 8 7
  70. 70. Content Models & Information Architecture
  71. 71. https://www.interaction-design.org/literature/article/what-is-information-architecture
  72. 72. Organizing content (like inventory, collections, etc)
  73. 73. And yes, User Interface.
  74. 74. WHAT MUST BE DONE WELL UI IxDIA The User Observe & Understand Organize Content Design Behavior Communicate Clearly
  75. 75. USER EXPERIENCE DESIGN IS A BIG JOB Too big?
  76. 76. 95 dan saffer
  77. 77. UI IxDIA Th e Us er Copywriting Graphic Design MARKETING CUSTOMERSERVICE The Heart of UX is Small ● Start with the user: her goals, needs and habits ● Follow known principles ● Finish with the user, test during design. ● Everyone must care for the user. It’s all about the USER’S EXPERIENCE
  78. 78. DISCUSSION
  79. 79. LEARN MORE
  80. 80. Don’t Be This Guy
  81. 81. @cwodtke
  82. 82. Why I am Not a Painter Frank O'Hara I am not a painter, I am a poet. Why? I think I would rather be a painter, but I am not. Well, for instance, Mike Goldberg is starting a painting. I drop in "Sit down and have a drink" he says. I drink; we drink. I look up. "You have SARDINES in it." "Yes, it needed something there." "Oh." I go and the days go by and I drop in again. The painting is going on, and I go, and the days go by. I drop in. The painting is finished. "Where's SARDINES?" All that's left is just letters, "It was too much," Mike says. But me? One day I am thinking of a color; orange. I write a line about orange. Pretty soon it is a whole page of words, not lines. Then another page. There should be so much more, not of orange, of words, of how terrible orange is and life. Days go by. It is even in prose, I am a real poet. My poem is finished and I haven't mentioned orange yet. It's twelve poems, I call it ORANGES. And one day in a gallery I see Mike's painting, called SARDINES.

×