Bridging the Gap Between UX Principles and Game Design

Summary

Highlights

• Jim Brown discussed the crossover between UX and game design in a talk at the Game Developers Conference. 🕹️
• Brown sees three major shared goals in UX and game design: clarifying intent, providing empathy, and finding meaning. 🤝
• Encounter design in games can be guided by UX principles to improve player interaction and understanding. 🧠
• Environment design, leveraging negative space and visual cues, can lower cognitive load and guide players. 🌇
• System design should ensure all levels of players find meaning and engagement in their interactions. 🌈

Key Takeaways

• UX principles can enhance game design by clarifying intent and providing empathy and meaning to players. 🎮
• Designers should learn to speak 'design lingo' to effectively communicate UX concepts to game designers. 🗣️
• Game environments aren't just spaces; they play a crucial role in the overall gaming experience. 🌍
• System design should focus on player experience, offering meaningful interactions and rewards. 🎯
• Visual languages in games, like those in Fortnite and Gears of War, help guide and inform player behavior. 👾

Overview

Chapters

• 00:00 - 01:30: Introduction and Motivations The chapter "Introduction and Motivations" features Jim Brown, a designer at Epic, speaking in front of a full audience, expressing gratitude and relief for the attendance, despite initial nervousness. He shares his inspiration for the talk, which stems from his almost 20 years of experience in the field, although the transcript does not provide further details from his talk content.
• 01:30 - 09:00: Clarifying Intent: UX Principles in Encounter Design The chapter explores the similarities and differences between UX design and traditional design. It discusses the author's personal transition into a UX role and the misunderstandings encountered within the design team regarding UX principles. The focus is on clarifying these principles in the context of encounter design.
• 09:00 - 19:00: Showing Empathy: UX Principles in Environment Design The chapter titled 'Showing Empathy: UX Principles in Environment Design' discusses the relationship between UX/UI design for web and interface development and 3D game design. The speaker highlights the potential translation of 2D UX principles into 3D game environments, emphasizing the need to bridge the understanding between these two fields for a wider audience. Key focal points include aligning design intentions across both disciplines, indicating that both UX and game design aim to clarify and convey the designer's intent effectively.
• 19:00 - 28:00: Providing Meaning: UX Principles in System Design The chapter titled 'Providing Meaning: UX Principles in System Design' explores how designers can foster empathy towards players, ensuring that the game's design both empowers and provides value to them. It delves into the dual objectives of the designer: understanding the player's intent and creating meaningful experiences that justify the player's investment of time. The chapter introduces three key design areas that contribute to this goal.
• 28:00 - 29:00: Conclusion and Q&A The chapter discusses the integration of UX principles with specific areas of design to enhance clarity, empathy, and meaning for players. It aims to provide practical tips for implementation in team environments, with a primary focus on encounter design and encounter structure.

Bridging the Gap Between UX Principles and Game Design Transcription

• 00:00 - 00:30 [Music] so a couple weeks ago when they announced this i saw that i had the last slot of the day and i got really nervous that no one would show up so thank you for replacing that with nervous now performance anxiety uh full crowd okay so uh for those of you who don't know me my name is jim brown i'm a designer at epic um i was inspired to do this talk originally when after almost 20 years in
• 00:30 - 01:00 design i decided to move into a ux role i personally saw a huge amount of crossover between the ux process and the design process and i very quickly figured out that not everyone shared that same view there was a very genuine misunderstanding amongst especially on the design team amongst the team about how traditional ux principles especially
• 01:00 - 01:30 2d things from ui interface design web design things like that might apply or translate over into 3d game design so my talk today hits on some of those topics in the hope that we can bridge that gap with a wider audience i actually see three major points where ux and game design share goals both strive to clarify intent to ensure that the designer's intent is
• 01:30 - 02:00 understood by the players but also so that the player player's intent is understood by the designers both try to show empathy for the player to empower them rather than frustrate them and both hope to provide meaning to identify why someone would spend time with the game and and figure out what they can actually take away from that experience so i actually have two goals today the first is to go over three areas of design and show how those
• 02:00 - 02:30 ux principles can blend with some specific areas of design to help create clarity empathy and meaning for the player and then the second is to give you some pro tips so to speak uh to take back and and kind of practice when you try and implement these on your own with your teams back home so first up uh first topic on there is encounter design more specifically how an encounter structure
• 02:30 - 03:00 can provide clarity for the player encounter design uh for those not necessarily familiar deals with any time the player encounters yay a game component has to interact with it this could be talking to npcs solving a puzzle most often this is a combat scenario most importantly encounters our points of interaction with the game which is obviously where ux can come into play
• 03:00 - 03:30 so quick pop quiz many of you may have seen this already but when you look at this image do you see random stripes of color thank you celia or the cast of characters from a street fighter game and when you see this did you see the letter b or the number 13. there are no wrong answers here because obviously we don't see the world as it is we interpret it and that interpretation is affected by both context and any
• 03:30 - 04:00 existing knowledge that we bring along so in order to understand what our players might do in an encounter in order to understand what their intent is we need to understand how their brains work how do they make choices how do they get information how do they perceive the world around them and not surprisingly those are all ux questions so luckily there are some guidelines like the gestalt laws which hopefully i don't need to go into
• 04:00 - 04:30 with too much detail with this crowd but just to cover my bases again just in case gestalt is a very fancy way of saying that we see objects in their entirety before we break them up into their individual parts which is an example is the gestalt law of similarity which describes why you probably see rows of dots here that are organized by similar color rather than just seeing a random collection of dots and the law of proximity which is
• 04:30 - 05:00 probably explains why you are more likely to see columns of dots here rather than just 36 individual circles i know that talking about gestalt in with a group of ux people is very very played out and i promise we're mostly done but i bring it up because these two principles in particular have a direct application to encounter design this is a screenshot from sirius sam who shared with me several years ago by
• 05:00 - 05:30 a fellow designer and i kind of fell in love with this concept in this scene or in this encounter the player is most likely to perceive two groups of enemies one on the left and one on the right because of their proximity to one another there is a chance that they may also see two groups based on their similarity the headless bombers and the brown and our guys but it's very unlikely that they would see each enemy individually and as evidence of that
• 05:30 - 06:00 did anyone see the biggest threat in this scene or did you miss it entirely because it has no similarity and no proximity so these same gestalt principles really helped guide the encounter design in fortnite in the early game you meet these small enemies called husks which are kind of just teach you the general rules of combat and then as the game progresses you run into these big purple enemies which are called the mist
• 06:00 - 06:30 monsters and they require very focused team coordination now the order in which these enemies are introduced helps the player learn there's nothing really special there most games do that but the enemy's visual similarity is also what helps make them understandable the humanoid looking husks are all individual threats and the purple mist monsters require team attention so that when you see a new enemy for the first time you automatically have an
• 06:30 - 07:00 idea of which category it falls into without or before you even know what its individual capabilities might be and that recognition is especially important in fortnite because we spawn our enemies in these huge squads sometimes there's even several dozen on screen at a single time and so knowing that players are most likely to see that entire squad is one unit having one giant purple thing that stands out from all the rest helps the player overcome that default
• 07:00 - 07:30 state of perception and and to effectively prioritize targets so here's a screenshot from the game it's zoomed in so it's a little blurry i'm sorry but if you look at the mini map up on the top right each of those red dots is an incoming enemy and yes there are a lot of them and this is me playing here if i had to parse through each of these enemies individually this would impose a huge cognitive burden and quite honestly i'd probably
• 07:30 - 08:00 be dead by the time i got through half of them so while the enemies here are presented in large numbers this is the intended design the enemies are organized into specific ways to account for human perception on the flip side players are then given weapons traps and special abilities that allow them to sweep through entire groups of these enemies all in one all in one
• 08:00 - 08:30 pass as if a group really was a single enemy so in this screenshot you can see how i've taken that into account and purposely funneled them between the rocks to create this single tight group and this signals my intent as a player thanks to the visual organization of players in this of enemies in this encounter the designer intent and the player's intent are now aligned guiding the player on a path to
• 08:30 - 09:00 success and with that success the player can learn repeatable behaviors to find the same success or more success in the next encounter which ideally becomes an ingrained pattern which you may also recognize as a flow state so these are ux principles being applied as design techniques crystal cognitive load flow usually only thought of in terms
• 09:00 - 09:30 of a 2d interface are being used here to help the player understand what their capabilities are what the game rules are and embody the intent of the design team through gameplay so this brings me to my first ux pro tip on how to bridge the gap between ux and design this is a grown ass man having a pant sweating encounter with a cuddle bear my first tip is actually a warning don't
• 09:30 - 10:00 be the bear if you come at a designer talking about gestalt and cognitive load they're going to look at you the same way that this guy is looking at the cuddle bear so go out of your way to learn design lingo start the conversation in terms that the designer can relate to or that you both understand talk about squad groups instead of gestalt laws talk about combat pressure instead of cognitive
• 10:00 - 10:30 load save the technical jargon for overbearing speech gdc speeches like this one all right second category i want to talk about is environment design which has a lot to do with showing empathy for the player we want our environments to be interesting and helpful rather than just confusing and because game environments are so visual all of those ux factors that deal with
• 10:30 - 11:00 human perception also apply here with environment design so the same gestalt laws apply as well as a few others like the law of closure which is why you see a circle in a square here law of symmetry which helps provide balance to a scene continuity uh which gives alignment and common fate which kind of guides the eye down down down a straight path and just again very briefly i promise
• 11:00 - 11:30 we're almost done with gestalt entirely uh here is a screenshot from one of epic's paragon maps and there are some broken arches where we have the law of closure going on we have symmetry down the middle to balance the scene players can follow the ramps up to the stairs up to the the arches where the law of continuity is happening and the law of common fate as the architecture shapes really guide the eye down the center path where all the important action is taking place
• 11:30 - 12:00 all of these concepts work together to make the content easily digestible showing empathy by lowering cognitive burden and helping players maintain focus done with gestalt so negative space is another tool that helps players by removing miscellaneous detail grabbing their attention and giving them something to focus on we use negative space very intentionally
• 12:00 - 12:30 while designing game environments by adjusting geometry lighting color contrast various other effects this is a screenshot from unreal tournaments um there are various pieces of contrast and negative space and things going on here the main point being the eye is drawn straight down to the bottom of those towers where all the important action takes place and if you contrast that with the moment in fortnight where you jump out of the battle bus and you start skydiving and you see the world below you and it's
• 12:30 - 13:00 all chaos there's details and things going on and it's really hard to figure out what's going to happen until you start to drift down and start gliding and the negative space and contrasting colors here help guide you toward an objective you can see very clearly the dark building tops which stand out from all the other spaces to signal hey maybe this is a place where you should think about landing good environmental design shows empathy
• 13:00 - 13:30 by guiding or or helping the player along there are various other 2d techniques from painting and photography and various others that can really really help with environmental design and gaming they may also really fall apart when things get translated into 3d because players are independent beings we as designers have very little control
• 13:30 - 14:00 over where they're going to be looking what they're going to be doing or where how they're going to be moving in any particular instance unless we take control away from them which is the absolute last thing we want to do so in a case like this if you're trying to do say the rule of thirds and you have your geometry set up so that the horizon and the arc the skyline are lined up perfectly that's great until the player is staring at a rock between their feet in which case nothing works so while the actual
• 14:00 - 14:30 practice of this type of thing doesn't always apply the principle behind it still does and so what i try to do is capture the essence and the meaning behind that to incorporate it into a consistent visual language that can work across the entirety of the game a great example of this was described by the lead designer at naughty dog in an article she wrote about leveraging the affordances of primitive shapes she said that round
• 14:30 - 15:00 shapes evoke safety and well-being rectangular shapes are solid stationary and powerful and those diagonal and pointy shapes evoke a sense of danger or imbalance so when it came time for them to design their environments for uncharted they were able to use these natural affordances as a means of communicating intent to the player where is it safe to go where is the eye most likely to focus
• 15:00 - 15:30 and if i go back to that same fortnight's fortnight screenshot i showed you earlier you can see how some of those same affordances come into play in guiding the player toward a landing spot the pointy clusters of trees are probably bad landing places the rounded treetops are okay they're probably benign you can get some cover if you can get underneath them but the strongest safest places to land
• 15:30 - 16:00 are rectangular and solid this type of visual language helps the player have a better experience by again leveraging those natural tendencies of human perception way back in the day we used a very similar language with gears of war so that when you saw a wall or a car or some sandbags or this rock or this roadblock they all had a consistent overall shape again bulky and solid to communicate
• 16:00 - 16:30 safety because these were all cover objects and very importantly all of our cover was exactly the same height in gears if something looks like cover it has to actually be cover because if someone's in cover and they're still taking damage and getting shot then we as designers have let them down we can't let the game lie to them otherwise the core mechanic this cover
• 16:30 - 17:00 mechanic and gears completely falls apart pardon me we tried really consistent to we tried really hard to be consistent with this language not just through gears of war but through the entire gears franchise the end of every single wall and every single game is the same minimum thickness so players see this nice solid rectangle and instantly recognize
• 17:00 - 17:30 it as a cover object the space between objects is a standard minimum distance to provide the necessary negative space that allows players to know they can perform their cover slide or their rolling moves all these things which are really vital to navigating through the environment and if you draw a plane across the entire battlefield you can see how again cover everywhere is all exactly the same height whether it's in this courtyard or the rocks along the shoreline
• 17:30 - 18:00 or junk in an abandoned farm or the supplies encounters in this abandoned market there's a standard visual language that we never ever varied from everything is purposefully consistent so that anyone no matter what their skill level is instantly knows what objects are cover which aren't what's dangerous and what's safe again there are a million other visual tricks that artists and designers love to use
• 18:00 - 18:30 in these spaces but the point that i'm trying to get across is that if you understand how someone sees which is ux you can do a better job of presenting what they see which is design and applying ux principles to your environmental design specifically shows empathy for the player by reducing the overall cognitive burden and guiding them toward that better game experience so my ux pro tip for environmental
• 18:30 - 19:00 design is to always respect the environment now i don't mean this in the sense that you should be recycling even though you should i mean that the game environment is more than just a space in which the game takes place the environment is actually core to the game experience it affects how people see the game how they interact with it and how they feel about it it's more
• 19:00 - 19:30 than just a place all right last section is system design systems tend to be a lot more abstract they're difficult to visualize in 3d space but they are arguably the most important or most significant piece of this puzzle because they they do such a great job of giving the player both context and meaning designers can sometimes get caught up in
• 19:30 - 20:00 the 2d nature of systems we love to get lost in our spreadsheets and data tables but what i propose is that we should think of them not in 2d not even necessarily in 3d but in 4d meaning how does the system affect a player over time here is a legendary pistol from fortnite in 2d all the stats are there it's super
• 20:00 - 20:30 exciting if you love numbers and the drop rate is like 0.001 percent in 3d it looks like the funky space pistol which is cool but think about it in 4d imagine how the player is going to feel when they actually get this pistol in the game imagine all the experiences that they're going to have to reach the point where they have it leveled up to max power and think about everything that they've had to learn and master along the way
• 20:30 - 21:00 systems in fortnite are designed specifically to help the player find meaning this is a not so exciting screenshot from a quest system that we're working on but you can see how the quest circles break down these kind of complicated long quest change into digestible pieces and patterns the completion marks help provide feedback to the player showing what quest rewards are coming up
• 21:00 - 21:30 helps players set goals and this tracking provides a way for players to measure their progress in the overall game the goal of this type of system is to give player visibility into kind of the underpinnings of the game which shows that design intent to offer them achievable short-term goals with extrinsic rewards which shows empathy and respect for their time and hopefully
• 21:30 - 22:00 encourages the formation of longer term achievement and intrinsic reward which is where that meaning comes from this is all three of those ux pillars i've been talking about today rolled into one boring system screen but systems don't necessarily need to be quite so player facing in order for them to provide that same level of meaning as an example of that this is another screenshot from gears
• 22:00 - 22:30 and gears has no health bar instead as you start to take damage we draw this cog in the center of the screen and if you get to safety that cog will fade back down over time if you don't it goes opaque and then you die pretty straightforward but there's a ton of fancy ux stuff that's going on under the hood that players probably don't even realize the central location of that cog and its bright color make it really hard to miss and the
• 22:30 - 23:00 arrows along the edge show the direction that the threat is coming from when we do start to fade it in we purposely fade in the edges of the cog first and then go in toward the center which reinforces both the shape and location of the reticle and for reasons i don't have time to explain that reticle isn't always there in gears so sometimes this is your only indication of where to shoot and in fact as you're when you're just about to die
• 23:00 - 23:30 we try and give you one last ping this audio ping that comes on that lets you know that you're in a critical state and at that point the cog is also fully filled in it's fully opaque and it's kind of a not so subtle reminder that like hey i'm not letting you see this thing because you shouldn't be engaging with it you should be retreating into cover and the full array of all these warnings working together is specifically intended to help players of all skill levels you know a very experienced player can
• 23:30 - 24:00 push this to the limits an inexperienced player may just be like oh hey okay i finally get it i'm retreating and the other thing is is that that last bit of health that critical portion where you're just about to die is actually more resistant to damage than any of your other health so very often you'll come away with this feeling that you just barely survived an encounter and it's because we lied to you we told you you were about to die when you really weren't
• 24:00 - 24:30 but rather than feeling like they screwed up and almost died players now have this exciting story where they can talk about pulling something off at the last second which in turn can make that experience more memorable another example from gears is our active reload mechanic when you reload a weapon in gears it goes through all of the reload stuff as you'd expect but it also starts a little mini game on the hud a marker scrubs from left to right and
• 24:30 - 25:00 you have the opportunity to hit reload a second time if you hit it the second time while it's in that sweet spot you get a weapon boost it's more damage higher rate of fire or whatever it's different for a weapon but it's always a benefit to you if you hit reload the second time while it's outside of that sweet box sweet spot you jam the weapon and it takes longer to reload and you get no bonus now this active reload system dramatically impacted player behavior in ways that we didn't really expect when
• 25:00 - 25:30 we first implemented it which led to a overhaul of our entire system's design because advanced players figured out that if they real did the active reload early they would get more damage in the rest of their clip and that would that meant that they were doing more damage to all the enemies in the game and because they were more successful they were doing this more often so we actually had to go back and redesign all of our enemies to account for this higher level of damage
• 25:30 - 26:00 output but most of our new players didn't use the active reload system they were too afraid of jamming or didn't know that the the system even existed so they were more likely to just empty out their clip to the very end then wait for the reload and then re-engage which meant they weren't getting the active bonus so they were being doubly punished by not doing extra damage and facing more powerful enemies so to account for this what we decided
• 26:00 - 26:30 to do was actually boost the damage of the last few bullets in every clip we call them magic bullets now advanced players usually missed the magic bullets because they did that that mechanic where they reloaded early to get the active boost while newer players were more likely to hit them because their behavior that we saw was that they were draining the clip to the very end and hitting those bullets before going into a full reload so better ux on this system ensured that
• 26:30 - 27:00 everyone found more meaning in with it regardless of their skill level or overall play style systems exist to help the player they teach they guide and they reward they should lay out the entirety of a game like a road map that shows the players their potential and hopefully prevent it present it in a way that promotes growth over time all right my pro tip for systems design
• 27:00 - 27:30 is kind of a no-brainer but it is worth reinforcing for sure this is a llama unicorn riding a rainbow i wanted to include this image because it's a freaking llama unicorn riding a rainbow also if you know fortnite then this might have some more meaning packed into it you might get the inside joke there if you don't know fortnite then it's just quirky
• 27:30 - 28:00 and probably strangely out of place and that is actually my point game systems are like unicorns they're very exciting to the rare person who gets to meet and understand them but very opaque to the vast player population so whether it's controls monetization progression abilities whatever the system is remember that systems are about the player not the data they should serve the
• 28:00 - 28:30 player directly and clearly systems require user-centered design just like everything else and this is your specialty so try and make it your responsibility as we look back on those original pillars that i talked about at the beginning of the talk i hope i've been able to show you how each can play into the various aspects of game design it is worth mentioning that these
• 28:30 - 29:00 are not mutually exclusive sets good environmental design doesn't just show empathy it can also clarify intent it can also provide meaning and these are not the only aspects of ux that crossover into design they're just the three explicit ones that i had time to talk about today which means i am out of time but if you do have questions i will stick around to the end i would love to hear your thoughts thank you very much for your time