Transcript
- 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
