Home
Design
Content-first UX Design: What video games teach us about UX
1 95
100%
Actual Size
Fit Width
Fit Height
Fit Page
Automatic
CONTENT-FIRST UX DESIGN IS REALLY GREAT WHAT VIDEO GAMES TEACH US ABOUT UX stephanie hay * 07.29.14 * @steph_hay
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
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
LOAD MORE