Home Design Content-first UX Design: What video games teach us about UX Content-first UX Design: What video games teach us about UX
Embed Size (px)
344 x 292 429 x 357 514 x 422 599 x 487
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.
Text of Content-first UX Design: What video games teach us about UX CONTENT-FIRST UX DESIGN IS REALLY GREAT WHAT VIDEO GAMES TEACH US ABOUT UX stephanie hay * 07.29.14 * @steph_hay There is no tutorial, no [prompt] that pops up on screen, nobody telling you where youre going or why. The storytelling is purely about the game experience itself. Focus on the hero Remove all distractions Iterate until you win source: ibisworld.com Does your design feel like a conversation? http://www.amazon.com/Make-It-Stick-Successful- Learning/dp/0674729013 Do your heroes feel like theyre winning? http://www.amazon.com/Gamify-Gamification-Motivates-People- Extraordinary/dp/1937134857/ref=sr_1_1?ie=UTF8&qid=1405204323 &sr=8-1&keywords=gamification 2 KEY DESIGN APPROACHES FROM THE VIDEO GAME INDUSTRY 1. Content FirstDoes your design feel like a conversation? WHATS GREAT ABOUT CONTENT-FIRST UX DESIGN Its the lowest risk way to design Its the lowest risk way to design It starts with what the hero really needs to win 2. Contextual Learning Do your heroes feel like theyre winning? WHATS REALLY GREAT ABOUT CONTEXTUAL LEARNING It teaches over timenot all at oncewhich improves retention BORDERLA NDS BORDERLA NDS BORDERLA NDS BORDERLA NDS BORDERLA NDS BORDERLA NDS It teaches over timenot all at oncewhich improves retention It provides answers in the moment when users are most likely to have questions BORDERLA NDS BORDERLA NDS BORDERLA NDS Outcomes Lowest risk, lowest cost Greater collaboration Faster approvals + launches Higher engagement FLIPPING OUR PARADIGM FOR WEB & MOBILE http://goo.gl/HknnJT CONTENT WORKBOOK THE LOWEST-FIDELITY TOOL FOR PLANNING AND DISCUSSING UX DESIGN Qualitative Data Quantitative Data Quantitative Data Key Takeaways LANGUAGE BOARDS THE CORE MESSAGING EACH USER SEGMENT NEEDS TO MAKE A CHOICE (the majority of usersnot all users) Language Board Language Board Language Board Language Board CONVERSATION MAPS THE CONVERSATION WE WANT TO HAVE WITH USERS ALONG EACH STEP OF THEIR JOURNEY Conversation Map Conversation Map Where should our hero go next? Conversation Map What brought our hero to this place? Where should our hero go next? Conversation Map CONTENT DEFINES STRUCTURE NOT THE OTHER WAY AROUND 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. 1. Content FirstDoes your design feel like a conversation? 2. Contextual Learning Do your heroes feel like theyre winning? COME TO MY WORKSHOP OCTOBER 27 stephanie hay * Boston @ UI19 * @steph_hay http://ui19.uie.com/workshops/content-first-ux- design-a-lean-approach 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 & Jerrys: 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 Waynes World: http://i.imgur.com/eM8Ux9L.gif Breaking Development + All of you awesome people