- 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