Content-first UX Design: What video games teach us about UX
Preview:
DESCRIPTION
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.
Citation preview
- 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