UI/UX: Building Player Experiences
- 1. Building Player Experiences Adam Sullivan & Lissa Capeleto
- 3. GRAPHIC DESIGN LYNX BARCLAYS VODAFONE PS HOME SINGSTAR VITA FIFA THE SIMS SIMCITY C&C EVERYTHING! UNIVERSITY DARE PLAYSTATION EA SPACE APE Adam’s Journey
- 4. GRAPHIC DESIGN BOOK DESIGN ILLUSTRATION TAIKODOM HEAVY METAL MACHINES BRANDING GRAPHIC DESIGN ALMOST EVERYTHING! UNIVERSITY LANTEC HOPLON FREELANCE SPACE APE Lissa’s Journey
- 12. What is Video Game UX? UI Crash Course Game Design & UX Design Crafting a Compelling Experience Life as a UI/UX Designer
- 14. Yes… and No.
- 15. A very brief history
- 17. As our games got more complex so did the interfaces.
- 18. Social & Mobile rapidly expanded games to a less experienced demographic
- 19. UX and UI is now a differentiator.
- 21. Video games are about stories
- 22. UX is the tool to let players tell their stories
- 23. Unlike in Apps, it's not the product...
- 24. ... it's the stuff that holds the experience together...
- 25. ...whilst (for the most part) remaining invisible.
- 26. What is Video Game UX? UI Crash Course Game Design & UX Design Crafting a Compelling Experience Life as a UI/UX Designer
- 27. Essential Guidelines Freely adapted from Jakob Nielsen's Usability Heuristics
- 28. Clarity Familiarity Control Consistency Help Accessibility
- 29. Clarity
- 30. Have you ever asked yourself... ● Where am I? ● Where should I begin? ● How do I…? ● What’s most important? ● Why did they call it that?
- 32. Willpower Reservoir Rules #1 It’s Unique #2 It’s situational #3 You can top it up #4 One mistake can empty it
- 33. top it up Giving information about game states, providing immediate response to user input, predicting user behaviour, removing questions.
- 35. LA Noire Remastered, Rockstar
- 36. Familiarity
- 37. Recognition is comforting! ● Humans are wired to see patterns! ● We feel good if we think we know stuff ● Learning a new language is tough! ● It's harder to recall than to recognise.
- 39. Pro Evolution Soccer, Konami
- 40. Control
- 41. Empowerment is awesome ● Feeling means more than being ● Actions with predictable reactions ● Nothing stands in the way of your goals ● Particularly important when it's about $$
- 42. Fastlane, Space Ape Games
- 43. Consistency
- 44. Having a consistent visual hierarchy helps create a strong sense of familiarity
- 45. Things that need to be consistent ● Colour coding ● Positioning ● Copy ● Hierarchy
- 46. No Man's Sky, Hello Games
- 47. Help
- 48. Considerate Design ● Predicts user behaviour ● Hides destructive actions ● Prevents mistakes
- 49. This says "erase data" Minis March Again, Nintendo
- 50. How to help? ● Tutorials ● Tips and Tooltips ● Control screens ● Literally… A help menu!
- 51. Sim City Build It, Maxis
- 52. Accessibility
- 53. Microsoft's inclusive design principles ● Recognise exclusion ● Learn from diversity ● Solve for one, extend for many
- 55. Clarity Familiarity Control Consistency Help Accessibility
- 56. What is Video Game UX? UI Crash Course Game Design & UX Design Crafting a Compelling Experience Life as a UI/UX Designer
- 57. Game Design vs UX Design Game design is about supplying problems for players to solve. UX design is about choosing which problems the player should solve.
- 58. Need for Speed: Payback, EA
- 59. Game Design = UX Design Choosing which problems the player solves defines and enhances the player’s experience.
- 60. Dead Space, EA
- 61. Creating Player Behaviours Even within the same genre, small changes to the game’s UX can help support widely different goals.
- 63. Call of Duty: WW2, Activision
- 64. Supporting Emotional Design User experience can be used to support the emotional and narrative design of a game
- 65. Spec Ops: The Line, Take 2
- 66. Spec Ops: The Line, Take 2
- 67. Creating an Emotional Response User experience can be used to create those “Wow” signature moments in a game.
- 69. What is Video Game UX? UI Crash Course Game Design & UX Design Crafting a Compelling Experience Life as a UI/UX Designer
- 70. Flow and Hierarchy can be defined on paper
- 71. Low Fidelity prototyping is the next step
- 72. Visual Design holds everything together
- 73. Layout Colour Typography Treatment Animations
- 74. Layout Don't be afraid of white space Have a defined grid, but know when to break it Understand the value of screen real estate Reading direction matters, and it's cultural
- 76. Colour Be mindful of the semantics and cultural significance of colour Remember accessibility guidelines! Lean into the fiction and style, but don't go overboard
- 78. Typography Like with colour, look at art style and fiction for inspiration Fonts have character, pair them accordingly Limit the number of font families, weights and styles Avoid goofy fonts, or system fonts Always keep localisation in mind Paying for fonts is totally worth it
- 80. Treatment Keep your product's brand in mind Use it to elicit specific emotions Make sure it fits the fiction of the game
- 84. Animation Motion can help guide the player's gaze Animating in and out of a screen can establish hierarchy Micro-interactions create delight
- 88. Darts of Fury, Yakuto
- 89. What is Video Game UX? Video Game UX Essentials Game Design & UX Design Crafting a Compelling Experience Life as a UI/UX Designer
- 90. Designer | Artist | Production
- 92. Empathise
- 93. Empathy ● Understand what players want ● Understand what players don’t want ● Advocate on their behalf
- 94. Understand what players want ● Players relate to characters and stories, not buttons and widgets. ● Players want to be rewarded ● Show don’t tell ● Details matter!
- 95. Understand what player’s don't want ● Feel stupid ● Do things that feel like work ● Think too hard ● Have to read too much
- 97. Communicate Effectively ● Making a game on your own is tough ● Be clear on your vision for the User Experience ● Listen to your teammates
- 98. Take Feedback
- 99. Test Learn Build
- 100. Getting good at Feedback ● Seek out feedback from players. ● Have strong opinions, lightly held. ● Art and opinion are subjective, stats are not. ● Honest candid feedback is the best, even if it’s the most difficult.
- 101. Getting the Job
- 102. Do it because you love it!
- 103. What and How to Learn? Theory is good, practice even better. ● Play lots of games- study and understand what make the user experience great. ● Have a learning mentality ○ Articles, books, youtube videos, podcasts. ○ Game Design, Psychology, Economics, Film, Technology ● Spend time with the software: ○ Sketch, Photoshop, XD ○ Invision, Figma, Balsamiq ○ Principle, Flinto, Framer ○ Unity, Unreal
- 104. Getting a Job in Games Industry Jumping into the industry takes time, effort and passion. ● Curate a portfolio ○ Only show your best work ○ Show your problem solving skills ○ We love to see the sketches, doodles and prototypes, not just final artwork. ● Build apps/games/websites ● Connect (game jams, BAFTA gurus, dev. forums.) ● A degree is helpful, but ultimately it’s about skills, experience and attitude.
- 105. Don't forget to love your dev
- 106. And QA too!
- 108. Recommended Reading: ● Don’t Make Me Think, Steve Krug ● Design of Everyday Things, Don Norman ● The Gamer's Brain, Celia Hodent Our Blog ● The Space Ape Games Experience, Medium
- 110. Next Masterclass Communities with Deborah Mensah Bonsu University College London (UCL) March 20th 2018 Tickets available on Eventbrite
- 111. Appendix
- 112. Further Reading ● Don’t Make Me Think, Steve Krug ● Design of Everyday Things, Don Norman ● The Gamer's Brain, Celia Hodent ● 100 Things Every Designer Needs to Know about People, Susan Weinschenk ● Creativity Inc, Ed Catmull ● Radical Candor, Kim Scott
- 113. ● Practical Typography by Matthew Butterick ● I Like Interfaces ● "Game UI Discoveries: What Players Want" by Marcus Andrews ● Game and Type ● HUDs and GUIs ● 10 Usability Heuristics by Jakob Nielsen On the Web: