Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

The Design of Everyday Games

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Nächste SlideShare
Designing for Change
Designing for Change
Wird geladen in …3
×

Hier ansehen

1 von 100 Anzeige

The Design of Everyday Games

Herunterladen, um offline zu lesen

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.

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.

Anzeige
Anzeige

Weitere Verwandte Inhalte

Diashows für Sie (20)

Andere mochten auch (20)

Anzeige

Ähnlich wie The Design of Everyday Games (20)

Anzeige

Aktuellste (20)

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.

Hinweis der Redaktion

  • Model introductions here
  • After World War II anthropologists discovered that an unusual religion had developed among the islanders of the South Pacific. It was oriented around the concept of cargo which the islanders perceived as the source of the wealth and power of the Europeans and Americans. This religion, known as the Cargo Cult, held that if the proper ceremonies were performed shipments of riches would be sent from some heavenly place. It was all very logical to the islanders. The islanders saw that they worked hard but were poor whereas the Europeans and Americans did not work but instead wrote things down on paper and in due time a shipment of wonderful things would arrive.
    The Cargo Cult members built replicas of airports and airplanes out of twigs and branches and made the sounds associated with airplanes to try to activate the shipment of cargo.
  • Amazon offers a wide variety of products
  • Powerful algorythm
  • Unmatched delivery, smiling boxes
  • Subscriptions solve a real problem
  • Doodles are the fun, surprising, and sometimes spontaneous changes that are made to the Google logo to celebrate holidays, anniversaries, and the lives of famous artists, pioneers, and scientists.
    How did the idea for doodles originate?
      In 1998, before the company was even incorporated, the concept of the doodle was born when Google founders Larry and Sergey played with the corporate logo to indicate their attendance at the Burning Man festival in the Nevada desert. They placed a stick figure drawing behind the 2nd "o" in the word, Google, and the revised logo was intended as a comical message to Google users that the founders were "out of office." While the first doodle was relatively simple, the idea of decorating the company logo to celebrate notable events was born.
    Two years later in 2000, Larry and Sergey asked current webmaster Dennis Hwang, an intern at the time, to produce a doodle for Bastille Day. It was so well received by our users that Dennis was appointed Google's chief doodler and doodles started showing up more and more regularly on the Google homepage. In the beginning, the doodles mostly celebrated familiar holidays; nowadays, they highlight a wide array of events and anniversaries from the Birthday of John James Audubon to the Ice Cream Sundae.
    Over time, the demand for doodles has risen in the U.S. and internationally. Creating doodles is now the responsibility of a team of talented illlustrators (we call them doodlers) and engineers. For them, creating doodles has become a group effort to enliven the Google homepage and bring smiles to the faces of Google users around the world.
    How many doodles has Google done over the years?
      The team has created over 1000 doodles for our homepages around the world.
    Who chooses what doodles will be created and how do you decide which events will receive doodles?
      A group of Googlers get together regularly to brainstorm and decide which events will be celebrated with a doodle. The ideas for the doodles come from numerous sources including Googlers and Google users. The doodle selection process aims to celebrate interesting events and anniversaries that reflect Google's personality and love for innovation.
    Who designs the doodles?
      There is a team of illustrators (we call them doodlers) and engineers that are behind each and every doodle you see.
    How can Google users/the public submit ideas for doodles?
    The doodle team is always excited to hear ideas from users - they can email proposals@google.com with ideas for the next Google doodle. The team receives hundreds of requests every day so we unfortunately can't respond to everyone. But rest assured that we're reading them :)
  • Instructor talks about a product you love (replace mini with one you love). Why do you love it? What makes it great?
  • Now talk about the wider ecosystem, the things that add to the expereince.
  • Talk throughthe model
  • Compare the keyboard buttons you can feel and push, to the hyper-flat keyboad. What is nicer to use? Is the ipad keyboard enough?
  • Compare the keyboard buttons you can feel and push, to the hyper-flat keyboad. What is nicer to use? Is the ipad keyboard enough?
  • On twitter, when you post you get feedback so you know your tweet went out.
    on Facebook, they show the link preview as soon as you add it, so you know all is workign (and can preview0
    Your new status is always posted on top, to let you know its there.

    Discuss: do you need a message? Is it enough it always shows? What if technology doesn’t allow it to be on top (more recent, etc) Should you force it there to make sure user knows its posted?
  • On twitter, when you post you get feedback so you know your tweet went out.
    on Facebook, they show the link preview as soon as you add it, so you know all is workign (and can preview0
    Your new status is always posted on top, to let you know its there.

    Discuss: do you need a message? Is it enough it always shows? What if technology doesn’t allow it to be on top (more recent, etc) Should you force it there to make sure user knows its posted?
  • On twitter, when you post you get feedback so you know your tweet went out.
    on Facebook, they show the link preview as soon as you add it, so you know all is workign (and can preview0
    Your new status is always posted on top, to let you know its there.

    Discuss: do you need a message? Is it enough it always shows? What if technology doesn’t allow it to be on top (more recent, etc) Should you force it there to make sure user knows its posted?
  • There is a movement toward simpler headers
  • Exercise

    Have a student write their name on a white board. Now tape the marker to a long stick (like a broom handle) and try again.
  • Interviewees are interviewed in their context, when doing their tasks, with as little interference from the interviewer as possible.
    Data should be gathered during interviews with little or no analysis, interview should result in raw data. 
  • Takes 5 minutes w/ 3-4 ppl
  • Most diagrams we use in IA/IxD/UX are already conceptual Diagrams

×