Content-first UX Design: What video games teach us about UX
Download as PPTX, PDF34 likes54,647 views
The document discusses content-first UX design, highlighting its focus on creating a user-centered experience that resembles a conversation. It emphasizes two key principles from video game design: content-first and contextual learning, which aim to enhance user engagement and learning retention. Ultimately, the approach advocates for lower risk and cost while improving collaboration and approval processes in UX design.
![“There is no tutorial, no
[prompt] that pops up on
screen, nobody telling
you where you’re going
or why.”](https://image.slidesharecdn.com/sh-bdconf-140730091000-phpapp01/85/Content-first-UX-Design-What-video-games-teach-us-about-UX-6-320.jpg)
Content-first UX Design: What video games teach us about UX
- 1. CONTENT-FIRST UX DESIGN IS REALLY GREAT WHAT VIDEO GAMES TEACH US ABOUT UX stephanie hay * 07.29.14 * @steph_hay
- 6. “There is no tutorial, no [prompt] that pops up on screen, nobody telling you where you’re going or why.”
- 7. “The storytelling is purely about the game experience itself.”
- 27. Does your design feel like a conversation?
- 31. Do your heroes feel like they’re “winning?”
- 35. 2 KEY DESIGN APPROACHES FROM THE VIDEO GAME INDUSTRY
- 36. 1. Content FirstDoes your design feel like a conversation?
- 43. It’s the lowest risk way to design
- 45. It’s the lowest risk way to design It starts with what the hero really needs to “win”
- 47. 2. Contextual Learning Do your heroes feel like they’re “winning?”
- 52. It teaches over time—not all at once—which improves retention
- 53. BORDERLA NDS
- 54. BORDERLA NDS
- 55. BORDERLA NDS
- 56. BORDERLA NDS
- 57. BORDERLA NDS
- 58. BORDERLA NDS
- 59. It teaches over time—not all at once—which improves retention It provides answers in the moment when users are most likely to have questions
- 60. BORDERLA NDS
- 62. BORDERLA NDS
- 63. BORDERLA NDS
- 64. Outcomes Lowest risk, lowest cost Greater collaboration Faster approvals + launches Higher engagement
- 65. FLIPPING OUR PARADIGM FOR WEB & MOBILE
- 69. CONTENT WORKBOOK THE LOWEST-FIDELITY TOOL FOR PLANNING AND DISCUSSING UX DESIGN
- 70. Qualitative Data
- 73. Key Takeaways
- 74. LANGUAGE BOARDS THE CORE MESSAGING EACH USER SEGMENT NEEDS TO MAKE A CHOICE (the majority of users—not all users)
- 75. Language Board
- 76. Language Board
- 77. Language Board
- 78. Language Board
- 79. CONVERSATION MAPS THE CONVERSATION WE WANT TO HAVE WITH USERS ALONG EACH STEP OF THEIR JOURNEY
- 80. Conversation Map
- 81. Conversation Map
- 82. Where should our hero go next?
- 83. Conversation Map
- 85. What brought our hero to this place? Where should our hero go next?
- 86. Conversation Map
- 88. CONTENT DEFINES STRUCTURE NOT THE OTHER WAY AROUND
- 90. “I never want to work without this again. It lets me focus entirely on design, which is what I do best. So I make better designs as a result.”
- 92. 1. Content FirstDoes your design feel like a conversation?
- 93. 2. Contextual Learning Do your heroes feel like they’re “winning?”
- 94. COME TO MY WORKSHOP OCTOBER 27 stephanie hay * Boston @ UI19 * @steph_hay http://ui19.uie.com/workshops/content-first-ux- design-a-lean-approach
- 95. Evil Clippy: http://steve-lovelace.com/wordpress/wp-content/uploads/2013/01/evil-clippy.png Clippy Irritation Meme: http://i.huffpost.com/gen/1383038/thumbs/o-BILL-GATES-CLIPPY-570.jpg?1 Inexplicable angry Clippy: https://drawception.com/pub/panels/2013/6-21/f5FLEdR5Ok-6.png Clippy: http://4.bp.blogspot.com/-_O8aTWfk1Oo/Tcq6OS6daMI/AAAAAAAADzg/V_jW-ZAWJFw/s1600/Clippy.jpg Games have so much freedom: https://c2.staticflickr.com/8/7075/6866856808_0359a7d35b_z.jpg Jenova Chen: https://c2.staticflickr.com/4/3314/3235139236_c3f17cf77d.jpg Journey: http://en.wikipedia.org/wiki/Journey_(2012_video_game)#mediaviewer/File:Journey-PS3-Screenshot.jpg Journey trailer: https://www.youtube.com/watch?v=_mF8KkDiIdk&feature=kp Japanese garden: http://www.coolwallpapers.me/japanese-garden/japanese-garden-wallpaper/ Journey hero: http://static.giantbomb.com/uploads/original/0/5504/2214707-1333509735311.jpg Mario 8-bit: http://img2.wikia.nocookie.net/__cb20130324144324/fantendo/images/7/78/8_bit_mario_by_raivcesleinadnayr-d3b6hpi.png Atari: http://en.wikipedia.org/wiki/Atari#mediaviewer/File:Atari-2600-Wood-4Sw-Set.jpg James VB crying: http://4.bp.blogspot.com/-MzCNjlLwFd4/U4oJsbxgMDI/AAAAAAAAKBY/UKDT3ufNk_M/s1600/James-Van-Der-Beek-Crying-On-Dawsons-Creek-Gif.gif IBM 5150: http://history-computer.com/ModernComputer/Personal/images/IBM5150.jpg Borderlands video: https://www.youtube.com/watch?v=jGjZHipc0h4 Animal Crossing video: https://www.youtube.com/watch?v=OPXRAKu-MyQ Gowalla: http://antikewl.com/daily/wp-content/uploads/2009/09/gowalla.jpg Instruction manual: http://goo.gl/9qxkov credits The Annie E. Casey Foundation: aecf.org Ben & Jerry’s: benjerry.com Happy Cog: happycog.com FastCustomer: fastcustomer.com thanks UIE: uie.com Video game stats: http://www.theesa.com/facts/pdfs/esa_ef_2013.pdf 2003-2013 growth chart: http://www.marketingcharts.com/wp/wp-content/uploads/2013/04/IBISWorld-Top-10-Fastest-Growing-US-Industries-Apr2013.png comScore: https://dl.dropboxusercontent.com/u/7753809/comScore-Media-Placement-Strategies.pdf Wayne’s World: http://i.imgur.com/eM8Ux9L.gif Breaking Development + All of you awesome people