Cutting Apart The Diegetic Interface of 'Hardspace: Shipbreaker'

[Music] hello um welcome to another virtual talk this is cutting apart the diegetic interface of heart space shipbreaker i am busy a game and ux designer from vancouver canada and i'm currently working at blackbird interactive i've been with the studio for over two years now and in my time i have worked on a couple of different projects uh the first one being minecraft earth on that project i was a ux designer and currently i work on hard spaceship breaker as a game and ux designer today i'll be talking about hard space ship breakers recent ui redesign and how we made a decision on our desi on our design approach and how we landed on it i'll talk about our approaches application on a handful of screens the hud the death experience and the habitation module i'll also discuss the challenges faced and finally the learning outcomes in the

game and from this experience sorry for those who don't know hard spaceship breaker is an award-winning physics game where you play as a blue collar worker in space where you're cutting apart and salvaging ships all while being in zero g we're a fairly small team of about 30 people and have been in early access for over a year now and that's how long i have been on this project um like everyone on the team i too have to wear multiple hats and i've been a part of the game's design uh in a handful of different disciplines ux game and narrative design this game is one of the first of its kind and it has carved its own genre so let's look at the game my name is i'll be your eyes and ears when you're in the yard used to be a cutter myself until there were some

complications [Music] let's get to work [Applause] [Music] so [Music] [Music] [Applause] [Music] [Applause] [Music] so narratively this game is set in the future where earth is in a pretty bad shape and humans have terraformed and moved over to other planets

since you can't quite afford a ticket to safer planets you take on this job with lynx which is an evil corporation um you take on a job as the salvager or cutter and it comes with a hefty debt um so with each ship that you salvage you essentially pay off your debt now of course there's endless fines and fees that you have to pay to live and they just kind of keep piling up but i mean what else do you expect from an evil company that's all about capitalism and profits so let's get into the game when you begin the game the first thing a player experiences is this contract screen it's perhaps one of my favorite experiences in the game similar to forms that you may have filled in your life you're filling out another corporate bone dry piece of paperwork set in this cold damp looking room you sign your life away you never really read the terms and conditions you look at your food options they're all quite dismal

but this interaction immediately sets the tone for the rest of the game world which is it's dark it's corporate and it's so real that it kind of hurts so this experience became the template or the standard of the experience that we wanted to apply to the rest of the screens in the game which in the form when i joined the team wasn't the case so while preparing for the redesign the first thing we have we had to identify were the constraints the first one is short timelines since we are in early access our release cycles range anywhere between one to three months which is not a whole lot of time um to make large changes while you're also making changes to other facets of the game like tools ship and tech so we had limited dev time when we were looking at the ui redesign we also had limited design time i was

the only person kind of in charge of this revamp and i was also in charge of other things in the game just like everybody else on this team so we had to be strategic with how we approach this redesign and how much time and effort and resources we could put behind it now the game is set in a pretty interesting and expansive world as i just kind of mentioned before but with our releases we're introducing the story um and other characters into this world and we're doing this mostly through talking heads or very text heavy messages that players receive in the game and this is because of our limited resources we don't have a budget for cut scenes quicktime events 3d model characters that could potentially be animated so we realized that the ui would have to do a lot of the world building heavy lifting and that led to the challenge how do we add depth to the story through the game's ui

we wanted to not only redesign the interface to make it more usable it was very much you know made by devs in the past but we wanted to make the experience more immersive and embedded into the game world we wanted to build a mental space for the player for this company that they're working for and the world of this game is set in all through the game's ui so that's the kind of the point of this talk is to show how you can accomplish or what you can accomplish when user experience design game design and narrative collaborate from the very beginning to find inexpensive solutions to building a game world in our case this was purely an outcome of necessity because of our limited resources as i just mentioned uh but it helped us understand and finalize our approach which is a mostly diegetic approach to the game ui and i'll kind of expand on that throughout the talk but what we really wanted to do was use

every screen in the game or every opportunity in the game to build a sense of presence for the player and make it more immersive now i might interchange between those two terms game presence and immersion but this is what i'm really referring to for those who don't know diegetic is a term you used across media um and what it really means is an element that exists both for the audience or the player as well as the characters within the world it's one of the four types of ui in games and we heavily leaned upon this ui style so from the example before the contract screen is not just a 2d ui element but it's rather contextually and physically placed in the game world where both you as the player and the character in the game world interact with this interface we identified four pillars that we wanted to take or hit with our design approach first one being information architecture this game is very information dense and

all mostly condensed into a single screen and it often became a point of contention for our players so we wanted to ensure we built a clear hierarchy we wanted to make large amounts of information digestible um the second being gameplay so we wanted to use these screens to direct players to complete or hit design goals in the game as the game has developed so have the goals within the game so we had to work as a unit all designers together to identify these new goals and how we can guide the players to those goals through the ui usability bit of a no-brainer as someone who is looking at interfaces day in day out um we obviously wanted to hit some of the the basics readability usability um navigation but this is really not a usability talk and i don't want to focus on that what i really want to talk about is integrating that last element of the story and the

narrative in what we really wanted to do was build game presence through the game's interface and that's the approach and that's the real point of this talk today now to take this approach two sections of design had to work together one impacting the other and vice versa oftentimes there are two separate factions in a studio and they don't get to be so closely integrated so i thought i would be very much like the spider-man pulling these two ends together i'm so cool i'm so smart and strong but in reality that's kind of what my experience was mostly like i definitely felt like that cat um and i especially felt like this cat when we were addressing the densest screen of our game and that game and that screen sorry is the hud so before i show you what we got to uh where we are today let's look at the very first hud of the game because this

hud set the seed for the rest of the experiences so what you're seeing here is the first prototype of the game it was an outcome of a game jam in this within the studio what you're seeing on this hud is something that's truly diegetic as your the player's head moves around uh the camera moves to mimic your head shaking or your head moving around and i'll kind of play this again for you to see of course it's a little janky it's a prototype but theoretically it's very cool it's very novel but it definitely has some obvious usability concerns you have ui components being cut off you have text kind of being burnt on the edges and this would be considered a truly diegetic approach right something that is the suit uh that is on the helmet uh of the suit of the cutter uh it's on that glass and it's kind of displayed onto this glass so as much as we walked away from this concept because of usability reasons and

the amount of information we'll have to show we this seed was set pretty early on it had to be a helmet and it had to be displayed on that glass this is the hud that the game launched with it is not the hub that you have in the game today what you're seeing is you and the bay this is where majority of the game play takes place you're holding a grapple or you'll be holding another tool and you begin cutting or you begin salvaging the hud is still a display on the helmet but it's less responsive to movement as we just saw in the example before the biggest difference of between these two screens and of course styling differences in a whole lot but the main thing i want you to focus on is the amount of information packed onto this screen in a single interface and um i want to walk you through the four pillars um that we had

and how we address them uh in this hud but first let's look at all the information on the screen um so in this situation you're inside of a ship and you're cutting um you're cutting and the biggest ui element you're seeing is this work order it tells the player what they need to salvage when they're in a particular shift and it takes majority of your screen space uh here you're seeing your tool information displayed in four vastly different locations even though it all pertains to the single tool that you have in your hand the temperature the durability the ability to navigate to other tools and on the top left you're seeing the tether count or it would be the demo charge count depending on the tool in your hand but to see information about a single object a player would have to look kind of all the way around the screen to gather that information not particularly ideal um here you see highlighted uh your

stats your oxygen meter and the timer in the of your shift um some of these elements need to be replenished multiple times within a shift they're quite vital and important for a player to look at when it comes to moment-to-moment gameplay and questionably some of the more important ui components are these two where you have your object information where a salvage item goes and the pressurization state of a room that's important if you begin cutting in a pressurized room you will blow up and die so don't do that not good and the last thing i want to kind of bring focus to here is the subtitles you'll see them overlaid on top of other ui elements making neither the ui elements nor the subtitles particularly legible what i haven't even done here is highlight the notifications the hazard warnings and other ui elements that appear on the screen from time to time

but the idea i'm trying to kind of convey across is that there's a lot of information on this one screen and it is scattered and there is no clear hierarchy so this is the new hud visually a whole lot less cluttered but let's break this down these are the two huds side by side for you to see the the major differences at the first glance um so let's go through the four pillars that i mentioned earlier and how they approach uh how they impact the redesign the first one being information hierarchy um or information architecture sorry um we laid out every single ui element that had to be displayed onto the screen and identified what is the most important information that will impact the player from moment to moment in the gameplay and find an optimal position to place that on the screen so you wanted to reduce any clutter that could uh be

where um the player is cutting or looking at the ship and we wanted to keep those core pieces of ui uh bits of information so your tool info object info talking heads and your stats closely close to that center so close the bottom center reducing the cognitive load for the player is the central cutting zone if you will and all kind of grouped together in the center and the bottom center of the screen um we use this screen this is just another example of the same new hud just to show other elements that appear on the screen from time to time we wanted to use the screen to train the players to build a muscle and visual memory so if something flashes on the left um you're going to get you're getting a notification so that's a part of your feedback loop if something flashes on your right is going to be your hazards and you'll see an example of that moving forward we've reclaimed real estate by moving

the tool information into one succinct location and introducing a radial menu condensing the swapping between tools into one spot that's hidden off the screen um several usability concerns have already kind of been addressed through this but the one i want to bring your focus to because this is not a usability talk as i mentioned earlier but the one component i wanted to bring your focus to as a primary example is the talking head as we in as we build this game out we're adding new uh characters in the game so for players who may have turned their audio off and that does hurt our audio team it hurts their heart but for players who may have turned their audio off or players who may have visual or hearing impairments we have ensured no ui elements overlap each other we've also added the player or the character's portrait and we've reduced

or removed any post effects from the talking head to ensure that that is particularly legible at any given point in the game um now i do want to say an accessibility pass has not been done for this game yet but is planned and in the works to hit the design goal pillar or the gameplay goal pillar i mentioned the work order the big ui component on the screen not only did it take a lot of real estate it told or it held the player's hand and told the player what they had to do on every ship even though that wasn't truly the case it added to a quota system but it made the player it narrowed the player's focus so while working with other designers in the team we moved away from a work order to a salvage bar which told the player how much of this ship they had salvaged and how much they had destroyed incentivizing not just salvaging the

entire ship but incentivizing a sense of exploration which is something that was kind of missing from previously from the screen so we used the ui to add that sense of exploration but that did mean or it came at a cost of retuning and reworking the progression and the economy which was spearheaded by another designer on the team jason barth this is a particularly big feat and could honestly warrant an entire talk of its own but i'm not gonna focus on that um luckily we have we are in early access so we have access to players um through our discord twitch twitter that get to give us feedback um and we get to see the impact of some of these decisions as we're making them so the goal for this interface was to make it as realistic as possible and embedded into the game world we were heavily in spider inspired by fighter

pilot jets and we wanted to to use those as an example to build a sense of expertise that when a fighter pilot looks at this they know what they're looking at but a layman wouldn't so how do we condense information tell the player that they're an expert but also explain it to them in case they ever get lost um so we tried to build that emotion of uh of an expert of the fact that this is displayed onto your helmet um through the effects in the game um so give you an example here narratively lynx doesn't give you the nice fancy tech that's reserved for the upper class but rather what you get is the retrofitted hand-me-down tech called trevor ware in trevor where tech in the game named after one of our great devs on the team so here's an example of your hud kind of reacting to the external uh forces when you are cutting the ship

really embracing the fact that this screen is on your helmet it is not a modern technology and if you take damage so does your helmet so does your suit um we've also added stylized elements like brackets and acronyms to bring the case uh to bring the player closer to the fighter pilot feel now there are elements on this hud that are not truly diegetic and this is i'm going to address that now we've crossed balance of the glass from time to time but this um and this ui elements that probably wouldn't exist and for sure would not exist on a fighter pilot hud but this was a conscious decision that we made to ensure that we made room for every element in the game um and we try to bring the player back into that sense of uh presence using the post effects and audio uh as you saw in this uh slide before to set that or to sell that realism

those things become particularly apparent when a player comes closer to death and honestly speaking of death there are many ways to die in this game death is a big part of this game actually and that became the second focus it's another golden opportunity that we found to apply the same approach the four pillar approach um to the death experience that's we're going to talk about next what a segway almost like i planned it so narratively when you die there and honestly there's many ways to die in this game lynx takes your genetic sequence and they clone you and um as it turns out to this corporation cloning is much cheaper than surgery recovery antibiotics i don't know so we needed the players to really feel and understand that they're disposable they are expendable in the eyes of this

evil company they're working for and this is the version of the death screen that the game launched with what you're seeing here is a screen fading to black text with leading and kerning problems for the ui minded folk i am aware [Music] this text appearing on the screen telling you how you died a demerit that's been added in a funny quip but it didn't really do it justice and it didn't really sell that emotion of oh i'm pretty expendable to this company so this is the new death experience you've died of of asphyxiation and what you see now is being completely cloned what you're hearing is your guts completely being moved and your genetic sequence being stored and rebuilt um to really sell the sense of you're not even you anymore and we use the metaphor of a real life health and safety work report akin to

the contract screen that you saw before to tell the player how they died what they can do to improve this gameplay and we've kept the funny quip and the um finger stamp because your identity is kind of tied to that this not only paved the way for a more interesting death experience that added no more than 10 seconds to the gameplay and got the player back into the game as soon as they finished but it influenced the onboarding experience which is something that kind of came in last minute um because the death experience already existed where what you see now and this is a little bit of a spoiler alert so if you want to experience this look away you get brutally killed in the first few minutes of the game where the company takes a genetic sequence it stores you and then rebuilds you from the ground up [Music] the sounds are pretty cool

[Music] along with this at the end of the sequence um is a list of all the fees that are now added on to your charge when you begin working for this company so that's how we impacted the death experience but that's not all the last thing i want to show you is the habitation module or the hab in our latest update we've redesigned this we've called it the employee terminal but what this is is it's your home this is where players can take a break from cutting when they can upgrade their equipment see messages look at data drives see their progress and we often use the screen to move the story forward um where you have characters talk to each other so traditionally and this is what the game launched with uh is it 2d utilitarian interface with what looks

like an image in the background of what the have could potentially be interfering with the text and with the interfaces as you navigate through them all so this is the latest update it involves an entirely new hab it represents a monitor or terminal that you're interacting with using the same trevorwear tech we've addressed the visual styles the fonts for readability the user flows have been updated for a handful of these submenus but most importantly we wanted to embrace that concept of real world metaphors to enhance this immersion an example of this is the data miner screen so thematically this is a piece of rogue software that you've been given um uh and we wanted the player to feel like they're doing something they probably shouldn't have it's a combination of stylized ui post effects and audio to sell this but we're not stopping here in our latest update we've got the 2d ui but

we have plans of taking this even further like the fan art we often receive about uh the three-dimensional hab what we're working towards is a three-dimensional hab where players can go and interact with monitors again most akin to that contract screen but for now that's classified so to recap there's a lot to recap uh with every screen you've seen here and for the screens we intend on working on in the future we have taken this approach we've tried to hit these four pillars to build not just usable interfaces but rather add a sense of story into the game world and a sense of presence in an inexpensive manner this wasn't easy and that there were challenges the first one is i'm emotionally attached to everything so like can you please change it but also maybe don't um the game's been in development for

over five years and players have had it in their hands for over a year now which means there's a lot of emotional attachment and a lot of biases already formed so to introduce design changes meant having to work within a predefined box but having to ground every decision that we made in ux theory or in design theory to be able to really sell it because people are invested and have to be okay with a little bit of pushback um because we're in early access and because of our limited budget we don't really do a lot of user testing um early access is good you get a lot of direct contact with players but what you're not getting is a formalized method of collecting information and feedback um i would highly recommend for you or for anybody to push user testing onto their project as soon as possible we have now begun formalizing user testing sessions on a weekly basis uh with with the team

um and it's still a biased method but it's a step in the right direction but it it has been a pretty big challenge that i've had to face um the last one is data turnaround time we do collect telemetry but by the time we have a release the telemetry data becomes kind of substantial we're knee-deep into prepping the next release and the one after that has already been mapped out what this means and this late into early access what this means is we have to negotiate with our producers what goes in and what doesn't and where something's going to get compromised so jessica klein our executive producer gave a talk this morning where she talks about this one in one out concept where you you if you're going to address a new task you're going to add a new task you're going to have to take that time away from somewhere else and this meant a balancing act and to have to really think both granularly and holistically when making this decision

some of the learnings and opportunities from this experience ux and games worked closely together they sat at the exact same table and i kind of rarely but no i did feel like spider-man having both in the same room at the same time meant influencing the game holistically and not in silo i have worked in on games where i've had to be in one department of the other but having the ability to leverage all components the game the story and user experience design what you're really doing is building emotion for players and that's incredibly valuable especially with the constraints that i mentioned earlier this became an inexpensive and innovative way i guess um to introduce story and to build a presence into the game

through the game's ui we leverage not just ui but also effects and audio and i understood that value very strongly through this experience um it was just plain fun i don't know what to tell you i've worked in both departments separately but this was an incredibly fulfilling experience as a creative um and now i find myself thinking always holistically i can't make a design decision purely without considering the ux implications or vice versa and i think that makes that has helped me become a better designer but it's also helped impact the game in a positive manner and this also make it build an opportunity um for this game to build that world to potentially even build a franchise if they ever chose to it's really building a canvas for this game and the future the ui becomes um a part of the world that players now

expect when they see this game so this has been our approach to the games ui hopefully you can find this useful for your project in building experiential design especially for smaller teams thank you so much for your time and don't forget death is a fresh start feel free to contact me i'll be here for a q a session thank you so much [Music] you