fowd nyc 2015 – beyond gamification: more important lessons we can learn from game design
TRANSCRIPT
@cattsmall
Beyond GamificationMore important lessons we can learn from game design
FOWD NYC 2015 – Catt Small (@cattsmall)
@cattsmall@cattsmall
• Product Designer, SoundCloud
• Game developer, Brooklyn Gamery
• Co-founder, Code Liberation
I’m Catt Small!
@cattsmall@cattsmall
• The state of user experience
• UX vs. game design process
• What UX can learn from games
• The future of games and UX
Today we’ll talk about:
@cattsmall@cattsmall
The state of UX
@cattsmall@cattsmall
Jurassic Park
UX is a
HYBRID
@cattsmall@cattsmall
Jurassic Park
The field is constantly
EVOLVING
@cattsmall@cattsmall
UX vs. game design
@cattsmall@cattsmall
UX Game Design
@cattsmall@cattsmall
Jurassic Park
Interaction with interfaces
@cattsmall@cattsmall
Removing frictionArranging information to help users accomplish tasks
Step 1 Step 2 Step 3 Step 4
@cattsmall@cattsmall
Removing frustrationCreating challenges that keep players engaged
Challenge 1Complicated
challengeChallenge 3 Challenge 4
@cattsmall@cattsmall
Useful Meaningful
@cattsmall@cattsmall
Jurassic Park
Familiar processes
@cattsmall@cattsmall
Emoji-only messenger
Ideation
Magical girl roguelike
Pachinko meets Brick Breaker with ponies
Cheese fighting game
AR transaction system
Social network for email threads
@cattsmall@cattsmall
Prototyping
@cattsmall@cattsmall
Testing
What is that?I thought they
would know what that is. Hmm!
@cattsmall@cattsmall
Documentation1. Logo Screen
Game Launch
2. Main Menu
4. Achievements
5. Encyclopedia
6. Options
7. Store(List of Items)
7.2. Item Information 7.3. Purchase Item7.1. Store Section
3. Level Select 3.2. Tank Select 3.3. Gameplay Level
3.4. Win/Lose Screen
3.5. Pause Screen
Level Select Next Level/Replay
3.2.1. Tank Upgrade (Store
Section)
View Tank
Play game
@cattsmall@cattsmall
In caseWhat UX can
learn from games
@cattsmall@cattsmall
Balance complexity with value
@cattsmall@cattsmall
Jurassic Park
Value for
TIME SPENT
@cattsmall@cattsmall
Very interestingMore meaning than complexity
@cattsmall@cattsmall
Very confusingNot enough meaning, too much complexity
@cattsmall@cattsmall
At least a 1:1 ratio
ComplexityValue
@cattsmall@cattsmall
Five Stages, © Asia Hoe, Catt Small & Chris Algoo
@cattsmall@cattsmall
Break it down
Feature goal
Part 1
Part 2
Part 3
@cattsmall@cattsmall
Share tracks on
SoundCloud
Upload track to system
Allow users to comment
on track
Create stream of
tracks
@cattsmall@cattsmall
Be consistent across platforms
@cattsmall@cattsmall
Both games © SEGA
Sonic 2, Game GearSonic 2, Genesis/Mega Drive
@cattsmall@cattsmall
Just right
Spelunky, © Mossmouth, LLC
@cattsmall@cattsmall
Prism Shell, © Brooklyn Gamery
@cattsmall@cattsmall
Since 2011,
MORE SMARTPHONES have sold than computers
@cattsmall@cattsmall
Don’t assume anythingAbout how people use your services
@cattsmall@cattsmall
:D :D
:D
@cattsmall@cattsmall
Focus on the “feel”
@cattsmall@cattsmall
GAME FEEL
@cattsmall@cattsmall
Both games © Vlambeer
Nuclear ThroneLUFTRAUSER
@cattsmall@cattsmall
Your product should give
FEEDBACK
@cattsmall@cattsmall
@cattsmall@cattsmall
phandroid.com/2015/11/03/twitter-star-fav-button-replaced-with-heart-likes
@cattsmall@cattsmall
Test more than just
PROTOTYPES
@cattsmall@cattsmall
@cattsmall@cattsmall
@cattsmall@cattsmall
Your product should feel
RESPONSIVE
@cattsmall@cattsmall
Connect with your users
@cattsmall@cattsmall
Easter eggs are
RELATABLE
@cattsmall@cattsmall
Game Players Game Makers
@cattsmall@cattsmall
Sonic Generations, © SEGA
@cattsmall@cattsmall
Sonic Generations, © SEGA
@cattsmall@cattsmall
Your product has
PERSONALITY
@cattsmall@cattsmall
@cattsmall@cattsmall
@cattsmall@cattsmall
@cattsmall@cattsmall
@cattsmall@cattsmall
news.en.softonic.com/google-hangouts-easter-eggs-lets-you-change-background-colors-release-ponies
@cattsmall@cattsmall
BOND
@cattsmall@cattsmall
Capitalize on emotions
@cattsmall@cattsmall
FUN
@cattsmall@cattsmall
MEMORABLE
@cattsmall@cattsmall
Dys4ia, © Anna Anthropy
@cattsmall@cattsmall
Contrast, © Compulsion Games
@cattsmall@cattsmall
Prism Shell, © Brooklyn Gamery
@cattsmall@cattsmall
@cattsmall@cattsmall
In caseThe future
@cattsmall@cattsmall
It will
BLEND!
@cattsmall@cattsmall
MEANINGFUL EXPERIENCES
@cattsmall@cattsmall
ACHIEVEMENTS LEVELING UP
@cattsmall@cattsmall
STRATEGY MOOD
EMOTIONS
@cattsmall@cattsmall
Recap!
@cattsmall@cattsmall
• How people interact with interfaces
• UX is about removing friction
• Game design is about challenging players
• Both involve ideation, prototyping, testing, & documentation
UX & game design
@cattsmall@cattsmall
• Ensure that complexity has value
• Create a cohesive cross-platform system
• Focus on the feedback and feel
• Connect with users through personality
• Capitalize on emotions
Beyond gamification…
@cattsmall@cattsmall
• Prune (iOS)
• Spelltower (Android, iOS, Mac)
• TwoDots (Android, iOS)
• Home Improvisation (Mac, Windows)
• Lumino City (Mac, Windows)
Games with great UX
@cattsmall@cattsmall
• Playful Designby John Ferrara
• The Art of Game Design by Jesse Schell
• Game Feelby Steve Swink
• A Game Design Vocabulary by Anna Anthropy & Naomi Clark
Books
@cattsmall@cattsmall
• Gamasutra gamasutra.com
• That Game’s UXthatgamesux.com
• The Independent Gaming Sourcetigsource.com
• Sirlin on Game Design sirlin.net
Websites
@cattsmall@cattsmall
Go forth and create!
@cattsmall
Thank you!Questions?
Tweet @cattsmall Email [email protected]
Work with me: soundcloud.com/jobs