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.

More than bleeps and bloops: UX lessons from game design

225 views

Published on

When UX designers think of borrowing from game design, achievement systems and points are often the first approaches that come to mind. But there's so much more we can learn from games. In this talk, I explore other ways to integrate game design concepts into user experiences. Attendees left with methods to make experiences more engaging – and even game-like – without coming off as gimmicky.

Published in: Design
  • Be the first to comment

More than bleeps and bloops: UX lessons from game design

  1. 1. @cattsmall – @cattsmall@mastodon.social More than bleeps and bloops UX lessons from game design Design It; Build it 2017 – Catt Small
  2. 2. @cattsmall – @cattsmall@mastodon.social@cattsmall – @cattsmall@mastodon.social UX, game design, and ways to integrate game design concepts into the user experience design process. Today we’ll discuss:
  3. 3. @cattsmall – @cattsmall@mastodon.social@cattsmall – @cattsmall@mastodon.social But first...
  4. 4. @cattsmall – @cattsmall@mastodon.social Five Stages
  5. 5. @cattsmall – @cattsmall@mastodon.social Five Stages
  6. 6. @cattsmall – @cattsmall@mastodon.social Breakup Squad
  7. 7. @cattsmall – @cattsmall@mastodon.social Breakup Squad
  8. 8. @cattsmall – @cattsmall@mastodon.social SweetXheart
  9. 9. @cattsmall – @cattsmall@mastodon.social SweetXheart (WIP)
  10. 10. @cattsmall – @cattsmall@mastodon.social UX design
  11. 11. @cattsmall – @cattsmall@mastodon.social
  12. 12. @cattsmall – @cattsmall@mastodon.social@cattsmall – @cattsmall@mastodon.social UX vs. game design
  13. 13. @cattsmall – @cattsmall@mastodon.social Similar
  14. 14. @cattsmall – @cattsmall@mastodon.social Interaction
  15. 15. @cattsmall – @cattsmall@mastodon.social Process
  16. 16. @cattsmall – @cattsmall@mastodon.social Ideation
  17. 17. @cattsmall – @cattsmall@mastodon.social Prototyping
  18. 18. @cattsmall – @cattsmall@mastodon.social Testing
  19. 19. @cattsmall – @cattsmall@mastodon.social Different
  20. 20. @cattsmall – @cattsmall@mastodon.social 1 2 3 4 1 2B 3 4B 2A 4A 4C UX Games
  21. 21. @cattsmall – @cattsmall@mastodon.social Caryn Vainio, UX designer for games The design of a game – its rules, its fun factor, its balance – is different than the design of the navigation into and throughout a game.
  22. 22. @cattsmall – @cattsmall@mastodon.social Game design elements Mechanics – Ways a player can interact with the game. Rules – Systems that determine what the player can or can’t do in a game. Characters – Beings with which players interact. Goals – What the player must do to finish the game. Narrative – Atmosphere that drives the game’s goal, mechanics, and rules.
  23. 23. @cattsmall – @cattsmall@mastodon.social Useful Meaningful
  24. 24. @cattsmall – @cattsmall@mastodon.social@cattsmall – @cattsmall@mastodon.social What UX can learn
  25. 25. @cattsmall – @cattsmall@mastodon.social Swarm, © Foursquare
  26. 26. @cattsmall – @cattsmall@mastodon.social Lesson 1: Document everything.
  27. 27. @cattsmall – @cattsmall@mastodon.social Design document
  28. 28. @cattsmall – @cattsmall@mastodon.social Change logs
  29. 29. @cattsmall – @cattsmall@mastodon.social Historical reference
  30. 30. @cattsmall – @cattsmall@mastodon.social Document as you go
  31. 31. @cattsmall – @cattsmall@mastodon.social Clockwise from left: InVision, Google Drive, and Basecamp
  32. 32. @cattsmall – @cattsmall@mastodon.social Lesson 2: Simple isn’t always best.
  33. 33. @cattsmall – @cattsmall@mastodon.social Balance Complexity Value
  34. 34. @cattsmall – @cattsmall@mastodon.social Richard Garfield, designer for Magic: the Gathering Game designs have a complexity budget. You can only have a certain amount of complexity and you have to figure whether it’s worth spending.
  35. 35. @cattsmall – @cattsmall@mastodon.social Five Stages, © Asia Hoe, Catt Small & Chris Algoo
  36. 36. @cattsmall – @cattsmall@mastodon.social Spelunky © Mossmouth LLC
  37. 37. @cattsmall – @cattsmall@mastodon.social Super Smash Bros © Nintendo
  38. 38. @cattsmall – @cattsmall@mastodon.social Accomplishment
  39. 39. @cattsmall – @cattsmall@mastodon.social
  40. 40. @cattsmall – @cattsmall@mastodon.social
  41. 41. @cattsmall – @cattsmall@mastodon.social SHIP AT LAUNCH Required feature Feature goal SHIP LATER Nice-to-have feature 1 SHIP LATER Nice-to-have feature 2
  42. 42. @cattsmall – @cattsmall@mastodon.social Lesson 3: Connect through personality.
  43. 43. @cattsmall – @cattsmall@mastodon.social Easter eggs
  44. 44. @cattsmall – @cattsmall@mastodon.social Memes Borderlands 2, © Gearbox Software
  45. 45. @cattsmall – @cattsmall@mastodon.social Hacks Sonic Mania, © SEGA
  46. 46. @cattsmall – @cattsmall@mastodon.social Culture SweetXheart
  47. 47. @cattsmall – @cattsmall@mastodon.social
  48. 48. @cattsmall – @cattsmall@mastodon.social Google search
  49. 49. @cattsmall – @cattsmall@mastodon.social Google Maps
  50. 50. @cattsmall – @cattsmall@mastodon.social Coca Cola
  51. 51. @cattsmall – @cattsmall@mastodon.social Facebook Messenger
  52. 52. @cattsmall – @cattsmall@mastodon.social Lesson 4: Focus on emotions.
  53. 53. @cattsmall – @cattsmall@mastodon.social Fun Memorable
  54. 54. @cattsmall – @cattsmall@mastodon.social Fear Amnesia, © Frictional Games
  55. 55. @cattsmall – @cattsmall@mastodon.social Joy Rayman Legends, © Frictional Games
  56. 56. @cattsmall – @cattsmall@mastodon.social Sadness Contrast, © Compulsion Games
  57. 57. @cattsmall – @cattsmall@mastodon.social Excitement Breakup Squad, © Brooklyn Gamery
  58. 58. @cattsmall – @cattsmall@mastodon.social MailChimp
  59. 59. @cattsmall – @cattsmall@mastodon.social MailChimp
  60. 60. @cattsmall – @cattsmall@mastodon.social Journey map
  61. 61. @cattsmall – @cattsmall@mastodon.social Lesson 5: Give feedback.
  62. 62. @cattsmall – @cattsmall@mastodon.social LUFTRAUSERS and Nuclear Throne, © Vlambeer
  63. 63. @cattsmall – @cattsmall@mastodon.social Beglitched, © Hexecutable (Jenny+AP)
  64. 64. @cattsmall – @cattsmall@mastodon.social Steve Swink The sensation of controlling a digital object is one of the most powerful – and overlooked – phenomena ever to emerge from the intersection of people and computers.
  65. 65. @cattsmall – @cattsmall@mastodon.social Facebook
  66. 66. @cattsmall – @cattsmall@mastodon.social Twitter
  67. 67. @cattsmall – @cattsmall@mastodon.social Medium
  68. 68. @cattsmall – @cattsmall@mastodon.social
  69. 69. @cattsmall – @cattsmall@mastodon.social Users want to feel valued
  70. 70. @cattsmall – @cattsmall@mastodon.social@cattsmall – @cattsmall@mastodon.social Wrap up
  71. 71. @cattsmall – @cattsmall@mastodon.social@cattsmall – @cattsmall@mastodon.social ◇ Both center around how people interact with interfaces ◇ Both involve ideation, prototyping, testing, & documentation ◇ UX is about removing roadblocks ◇ Game design is about challenging players UX & game design
  72. 72. @cattsmall – @cattsmall@mastodon.social@cattsmall – @cattsmall@mastodon.social ◇ Create references with documentation ◇ Ensure that complexity has value ◇ Connect with users through personality ◇ Focus on emotions and memorability ◇ Give interaction feedback Beyond gamification
  73. 73. @cattsmall – @cattsmall@mastodon.social@cattsmall – @cattsmall@mastodon.social ◇ Prune (iOS) ◇ Spelltower (Android, iOS, Mac) ◇ TwoDots (Android, iOS) ◇ Beglitched (Mac, Windows) ◇ Ghosts of Miami (Mac, Windows) Games to check out
  74. 74. @cattsmall – @cattsmall@mastodon.social@cattsmall – @cattsmall@mastodon.social ◇ Gamasutra gamasutra.com ◇ That Game’s UX thatgamesux.com ◇ The Indie Gaming Source tigsource.com ◇ Sirlin on Game Design sirlin.net Websites
  75. 75. @cattsmall – @cattsmall@mastodon.social Thank you. Questions? Tweet @cattsmall Toot @cattsmall@mastodon.social Email catt@cattsmall.com / cattsmall@etsy.com

×