Content-first UX Design: What video games teach us about UX

41,137 views

Published on

Great UX design influences one video game becoming a cultural icon while another lands in the $5 bin at GameStop. So what cues can we take from these popular games—and from this technology-driven industry that so closely parallels our own?

Steph is going to teach us about two: Content-first UX Design and Contextual Learning.

See popular video games whose character stories form the backbone of design, and whose flow teaches players to use the game while they’re playing it.

Then hear how Steph translated these two concepts to her work with Ben & Jerry’s, the Annie E. Casey Foundation, and FastCustomer.com—which resulted in fewer design iterations, more cohesive content, and higher levels of user engagement.

Published in: Design

Content-first UX Design: What video games teach us about UX

  1. 1. CONTENT-FIRST UX DESIGN IS REALLY GREAT WHAT VIDEO GAMES TEACH US ABOUT UX stephanie hay * 07.29.14 * @steph_hay
  2. 2. “There is no tutorial, no [prompt] that pops up on screen, nobody telling you where you’re going or why.”
  3. 3. “The storytelling is purely about the game experience itself.”
  4. 4. Focus on the hero
  5. 5. Remove all distractions
  6. 6. Iterate until you “win”
  7. 7. source: ibisworld.com
  8. 8. Does your design feel like a conversation?
  9. 9. http://www.amazon.com/Make-It-Stick-Successful- Learning/dp/0674729013
  10. 10. Do your heroes feel like they’re “winning?”
  11. 11. http://www.amazon.com/Gamify-Gamification-Motivates-People- Extraordinary/dp/1937134857/ref=sr_1_1?ie=UTF8&qid=1405204323 &sr=8-1&keywords=gamification
  12. 12. 2 KEY DESIGN APPROACHES FROM THE VIDEO GAME INDUSTRY
  13. 13. 1. Content FirstDoes your design feel like a conversation?
  14. 14. WHAT’S GREAT ABOUT CONTENT-FIRST UX DESIGN
  15. 15. It’s the lowest risk way to design
  16. 16. It’s the lowest risk way to design It starts with what the hero really needs to “win”
  17. 17. 2. Contextual Learning Do your heroes feel like they’re “winning?”
  18. 18. WHAT’S REALLY GREAT ABOUT CONTEXTUAL LEARNING
  19. 19. It teaches over time—not all at once—which improves retention
  20. 20. BORDERLA NDS
  21. 21. BORDERLA NDS
  22. 22. BORDERLA NDS
  23. 23. BORDERLA NDS
  24. 24. BORDERLA NDS
  25. 25. BORDERLA NDS
  26. 26. 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
  27. 27. BORDERLA NDS
  28. 28. BORDERLA NDS
  29. 29. BORDERLA NDS
  30. 30. Outcomes Lowest risk, lowest cost Greater collaboration Faster approvals + launches Higher engagement
  31. 31. FLIPPING OUR PARADIGM FOR WEB & MOBILE
  32. 32. http://goo.gl/HknnJT
  33. 33. CONTENT WORKBOOK THE LOWEST-FIDELITY TOOL FOR PLANNING AND DISCUSSING UX DESIGN
  34. 34. Qualitative Data
  35. 35. Quantitative Data
  36. 36. Quantitative Data
  37. 37. Key Takeaways
  38. 38. LANGUAGE BOARDS THE CORE MESSAGING EACH USER SEGMENT NEEDS TO MAKE A CHOICE (the majority of users—not all users)
  39. 39. Language Board
  40. 40. Language Board
  41. 41. Language Board
  42. 42. Language Board
  43. 43. CONVERSATION MAPS THE CONVERSATION WE WANT TO HAVE WITH USERS ALONG EACH STEP OF THEIR JOURNEY
  44. 44. Conversation Map
  45. 45. Conversation Map
  46. 46. Where should our hero go next?
  47. 47. Conversation Map
  48. 48. What brought our hero to this place? Where should our hero go next?
  49. 49. Conversation Map
  50. 50. CONTENT DEFINES STRUCTURE NOT THE OTHER WAY AROUND
  51. 51. “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.”
  52. 52. 1. Content FirstDoes your design feel like a conversation?
  53. 53. 2. Contextual Learning Do your heroes feel like they’re “winning?”
  54. 54. COME TO MY WORKSHOP OCTOBER 27 stephanie hay * Boston @ UI19 * @steph_hay http://ui19.uie.com/workshops/content-first-ux- design-a-lean-approach
  55. 55. 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

×