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.
@cattsmall – @cattsmall@mastodon.social
More than bleeps and bloops
UX lessons from game design
Design It; Build it 2017 –...
@cattsmall – @cattsmall@mastodon.social@cattsmall – @cattsmall@mastodon.social
UX, game design, and ways to
integrate game...
@cattsmall – @cattsmall@mastodon.social@cattsmall – @cattsmall@mastodon.social
But first...
@cattsmall – @cattsmall@mastodon.social
Five Stages
@cattsmall – @cattsmall@mastodon.social
Five Stages
@cattsmall – @cattsmall@mastodon.social
Breakup Squad
@cattsmall – @cattsmall@mastodon.social
Breakup Squad
@cattsmall – @cattsmall@mastodon.social
SweetXheart
@cattsmall – @cattsmall@mastodon.social
SweetXheart (WIP)
@cattsmall – @cattsmall@mastodon.social
UX design
@cattsmall – @cattsmall@mastodon.social
@cattsmall – @cattsmall@mastodon.social@cattsmall – @cattsmall@mastodon.social
UX vs. game design
@cattsmall – @cattsmall@mastodon.social
Similar
@cattsmall – @cattsmall@mastodon.social
Interaction
@cattsmall – @cattsmall@mastodon.social
Process
@cattsmall – @cattsmall@mastodon.social
Ideation
@cattsmall – @cattsmall@mastodon.social
Prototyping
@cattsmall – @cattsmall@mastodon.social
Testing
@cattsmall – @cattsmall@mastodon.social
Different
@cattsmall – @cattsmall@mastodon.social
1 2 3 4
1 2B 3 4B
2A 4A
4C
UX
Games
@cattsmall – @cattsmall@mastodon.social
Caryn Vainio, UX designer for games
The design of a game – its rules, its
fun fact...
@cattsmall – @cattsmall@mastodon.social
Game design elements
Mechanics – Ways a player can interact with the game.
Rules –...
@cattsmall – @cattsmall@mastodon.social
Useful
Meaningful
@cattsmall – @cattsmall@mastodon.social@cattsmall – @cattsmall@mastodon.social
What UX can learn
@cattsmall – @cattsmall@mastodon.social
Swarm, © Foursquare
@cattsmall – @cattsmall@mastodon.social
Lesson 1:
Document everything.
@cattsmall – @cattsmall@mastodon.social
Design document
@cattsmall – @cattsmall@mastodon.social
Change logs
@cattsmall – @cattsmall@mastodon.social
Historical reference
@cattsmall – @cattsmall@mastodon.social
Document as you go
@cattsmall – @cattsmall@mastodon.social
Clockwise from left: InVision, Google Drive, and Basecamp
@cattsmall – @cattsmall@mastodon.social
Lesson 2:
Simple isn’t always best.
@cattsmall – @cattsmall@mastodon.social
Balance
Complexity Value
@cattsmall – @cattsmall@mastodon.social
Richard Garfield, designer for Magic: the Gathering
Game designs have a complexity...
@cattsmall – @cattsmall@mastodon.social
Five Stages, © Asia Hoe, Catt Small & Chris Algoo
@cattsmall – @cattsmall@mastodon.social
Spelunky © Mossmouth LLC
@cattsmall – @cattsmall@mastodon.social
Super Smash Bros © Nintendo
@cattsmall – @cattsmall@mastodon.social
Accomplishment
@cattsmall – @cattsmall@mastodon.social
@cattsmall – @cattsmall@mastodon.social
@cattsmall – @cattsmall@mastodon.social
SHIP AT
LAUNCH
Required
feature
Feature goal
SHIP LATER
Nice-to-have
feature 1
SHI...
@cattsmall – @cattsmall@mastodon.social
Lesson 3:
Connect through personality.
@cattsmall – @cattsmall@mastodon.social
Easter eggs
@cattsmall – @cattsmall@mastodon.social
Memes
Borderlands 2, © Gearbox Software
@cattsmall – @cattsmall@mastodon.social
Hacks
Sonic Mania, © SEGA
@cattsmall – @cattsmall@mastodon.social
Culture
SweetXheart
@cattsmall – @cattsmall@mastodon.social
@cattsmall – @cattsmall@mastodon.social
Google search
@cattsmall – @cattsmall@mastodon.social
Google Maps
@cattsmall – @cattsmall@mastodon.social
Coca Cola
@cattsmall – @cattsmall@mastodon.social
Facebook Messenger
@cattsmall – @cattsmall@mastodon.social
Lesson 4:
Focus on emotions.
@cattsmall – @cattsmall@mastodon.social
Fun
Memorable
@cattsmall – @cattsmall@mastodon.social
Fear
Amnesia, © Frictional Games
@cattsmall – @cattsmall@mastodon.social
Joy
Rayman Legends, © Frictional Games
@cattsmall – @cattsmall@mastodon.social
Sadness
Contrast, © Compulsion Games
@cattsmall – @cattsmall@mastodon.social
Excitement
Breakup Squad, © Brooklyn Gamery
@cattsmall – @cattsmall@mastodon.social
MailChimp
@cattsmall – @cattsmall@mastodon.social
MailChimp
@cattsmall – @cattsmall@mastodon.social
Journey map
@cattsmall – @cattsmall@mastodon.social
Lesson 5:
Give feedback.
@cattsmall – @cattsmall@mastodon.social
LUFTRAUSERS and Nuclear Throne, © Vlambeer
@cattsmall – @cattsmall@mastodon.social
Beglitched, © Hexecutable (Jenny+AP)
@cattsmall – @cattsmall@mastodon.social
Steve Swink
The sensation of controlling a digital
object is one of the most power...
@cattsmall – @cattsmall@mastodon.social
Facebook
@cattsmall – @cattsmall@mastodon.social
Twitter
@cattsmall – @cattsmall@mastodon.social
Medium
@cattsmall – @cattsmall@mastodon.social
@cattsmall – @cattsmall@mastodon.social
Users want to feel valued
@cattsmall – @cattsmall@mastodon.social@cattsmall – @cattsmall@mastodon.social
Wrap up
@cattsmall – @cattsmall@mastodon.social@cattsmall – @cattsmall@mastodon.social
◇ Both center around how people interact
wi...
@cattsmall – @cattsmall@mastodon.social@cattsmall – @cattsmall@mastodon.social
◇ Create references with documentation
◇ En...
@cattsmall – @cattsmall@mastodon.social@cattsmall – @cattsmall@mastodon.social
◇ Prune (iOS)
◇ Spelltower (Android, iOS, M...
@cattsmall – @cattsmall@mastodon.social@cattsmall – @cattsmall@mastodon.social
◇ Gamasutra gamasutra.com
◇ That Game’s UX ...
@cattsmall – @cattsmall@mastodon.social
Thank you.
Questions?
Tweet @cattsmall
Toot @cattsmall@mastodon.social
Email catt@...
Upcoming SlideShare
Loading in …5
×

More than bleeps and bloops: UX lessons from game design

266 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

×