Episode 42 - November 16, 2020

What Can Games Teach Us About UI Design? With Felix Park (Part 1)

00:00 / 00:00

Shownotes

Overview:

Although web and game development are two different processes in their own right, it’s interesting to note that web development has influenced the gaming industry and vice versa. Video games look and behave more like well-structured websites, while websites and apps strive to look and behave like video games. Due to this trend, this episode focuses on what games can teach us bout UI or user interface design. Today’s guest is game developer, Felix Park, who explains what he does as a game designer, how game design parallels with user experience and user interface design, and how he strives to create an optimal experience by guiding the player to make certain decisions. He also talks about how he creates certain prompts, what affordances are and how they are applicable in game design, and how he establishes a design language throughout a game. Tune in today!

Key Points From This Episode:

  • Felix introduces himself and what he does as a game designer.
  • Felix explains what it means to be a game designer, using a door in a game as a metaphor,
  • Game development and how it parallels with user experience or user interface design.
  • How Felix strives towards guiding people through an optimal and less frustrating experience.
  • Felix explains what a AAA game is – they are the big-budget, summer blockbusters of games.
  • Hear more about what led Felix to game design.
  • Going into gaming, Felix had some programming knowledge from his HTML coding hobby.
  • How Felix leads a user to make certain decisions, from lighting and UI to manipulating time.
  • Felix defines affordances as what’s possible with an object as expressed through its design.
  • Felix outlines some examples of how game designers include prompts to guide players.
  • Restrictions and repetitions are introduced throughout a game to establish a design language and what the affordances are for the user.
  • Felix explains how he balances high intensity difficulty with ease of play through play testing.

Tweetables:

  • “We have to constantly strive to make sure that people are being guided towards an optimal, not so frustrating experience. Unless we do want to frustrate them, in which case that's an entirely different design challenge. The goal is to make sure that anybody can play our games with the minimum amount of direct interference or touch on that”. — @uhfelix [0:05:07]

  • “Games are this thing you just make up in [their] entirety. Down to the very weird, basic, physical elements, you can use all of them to influence people.” — @uhfelix [0:14:54]

  • “Affordance is this concept of how does the design communicate its use to the user? In games, it’s very important because in the virtual world anything is possible. You want to be able to really limit the space of possibility within the player's mind, or else they'll be stuck. They’ll be at a loss as to what to do to progress, or move forward, or to accomplish goals.” — @uhfelix [0:17:57]

  • “If you have a lot of focus on player experience, then that would lead you to integrate more player feedback into that process.” — @uhfelix [0:25:11]

Links Mentioned in Today’s Episode:

Transcript

EPISODE 42

[INTRO]

[00:00:09] T: Hey, everybody, and welcome to Enjoy the Vue. I am Tessa, and today on our panel we have Ari Clark.

[00:00:15] AC: Hello.

[00:00:17] T: Guest panelist, Ringo Kim.

[00:00:19] RK: Hi.

[00:00:20] T: And our special guest for this episode is Felix Park. Felix, would you like to introduce yourself?

[00:00:25] FP: Hi, I’m Felix. I’ve been a game designer/programmer in the games industry for eight years, working on any number of projects from small indie titles to big AAA games, and I’m really glad to be here.

[00:00:38] T: So what does it mean to be a game designer exactly?

[00:00:42] FP: So game design is basically – There's a really great sort of metaphor here proposed by a game designer named Liz England. I think she's over at Ubisoft Toronto these days. So, if you look at a door in a game, there's a number of different things that go into that door. So there's the art of the door, which is like what the artists make. If you need to animate the door, then the animators make the animation for the door. The actual function of the door opening and closing, literally like trying to trigger that animation, or trying to place that door, sort of be able to render it in the game itself, that's like a programming role.

But a game designer would sort of decide what the door does, what function the door has in the game. Do you need a key to open the door? They basically answer all the questions regarding the context of the door. So game design sort of encompasses the design of things inside games versus like implementation of them, although it does [inaudible 00:01:35] sometimes. But that’s basically a long-winded answer to like what a game designer does, because you tend to get that question a lot when you're talking to people who aren't super familiar with it.

But basically, game designers decide if there is a door in a game, like what does it do, how do you open it, what other context is in there, and sort of try and do that in order to make an enjoyable game experience for someone.

[00:01:56] T: Very cool. Can you talk a little bit more I guess about, if this falls under game design? Correct me if I’m wrong. Like the art of leading the user to the door, or somehow creating inferences for them to figure out how to use the door, because I feel like that's something that we have a lot in web design as well, is like how can we make this app as usable as possible?

[00:02:20] FP: Yeah. In terms of like usability, I guess it's all under – In app development, it would be under sort of the umbrella of like user experience/user interface design. There is a pretty large analog between that and like game development where game designers will try to figure out like how do we push players towards certain things, pull them away from certain things, try to streamline the experience, and make things attractive to use, try to integrate affordances into how you might use that, use things in games. or how you navigate spaces?

So, yeah, definitely a large analog with that.

[00:02:53] T: Are there certain tricks that you like to use or like have you ever maybe designed a feature, then, when you were testing it out, users were not interacting with the things the way that you had expected, and so you had to change up the design?

[00:03:06] AC: In other words, have you failed?

[00:03:10] FP: Yeah. It’s pretty much part and parcel of game design is to, as much as you can within your abilities, to be able to test your things. Play tests are super common as an iterative step in game design where you just bring it in front of players, whether that be anything as informal as you call a friend over and have them play your game for a bit, to staging very complex focus tests where you're tracking a lot of analytics when they're playing the game. Everything from the very informal stuff to the very formal stuff, like try to integrate at any step in the design process those things to make essentially a better experience for the player.

Especially if like, say, in AAA games, so very, very large scale games, like you want to make a game that essentially anybody can pick up and play, because you need to have the widest cross appeal to have the widest possible audience. Testing is a super important step in that because you don't want to create anything that even someone who's not super familiar with games generally might not know controls very well, or might have some difficulty with some of the more obscure parts of the games that require certain amount of literacy.

Say you have like knowing that if you enter a space and there's a certain camera angle that it's facing towards after, say, a cut scene. So a non-interactive segment plays out. The camera is aligned towards a particular direction. If you're pretty literate in games, you kind of realize, “Oh, I should like go in that direction.” But sometimes, people will, if they're not so familiar with the language of sort of how cameras work in, say, especially 3D games, how cameras work in 3D games, they might be inclined to just like go off in very unusual directions that design doesn't anticipate.

Even in that case, we have to constantly strive to make sure that people are being guided towards optimal, not so frustrating experience, unless you do want to frustrate them, in which case that's like an entirely different design challenge. But, yeah, like basically that is sort of the goal is to make sure that like anybody can play our games with hopefully the most minimum amount of direct interference or touch on that.

[00:03:10] T: Yeah. That like reminds me of natural scroll on MacBooks and how I always have to turn it off because I feel like it's very unnatural. Also, I was thinking about like the conversation we had where I was complaining to you about how like in all of the 3D games, when the cut scene ends and you go back to your character that they do that like shoulder relaxing thing. Anyway, I was wondering if, for our listeners before we move on, if you could briefly explain what a AAA game is.

[00:06:00] FP: Yeah. So AAA games are very informal designation but usually when we split up the kind of essentially product that you make in industry. So AAA game would fall into sort of the most expensive productions. So if you could make an analog to like, say, filmmaking, the AAA game would be like the sort of blockbuster that gets released in the summer, very high budget, large teams involved. With AAA game, you typically see a budget in the several millions with a team size of like 100 people or more, going up into the thousands for some of the biggest like yearly releases. Also, yeah, you'd expect like sort of the most deployment as well. So AAA games tend to be on like multiple different platforms to be able to be purchased, although technically the AAA games I work on are exclusive to Sony platforms, which is sort of its own sector of AAA games.

[00:06:59] T: Yeah. The app I work on is also exclusive to the Chrome platform, so that's the same thing, right?

[00:07:05] AC: Yeah. Me too.

[00:07:05] FP: Yeah. I mean, it's basically. Yeah.

[00:07:08] AC: So what led you to game design? As I know that that can be a hard space to break into and also stay in, so why?

[00:07:18] FP: Why do anything?

[00:07:21] T: Felix.

[00:07:23] FP: Yeah. So I got started sort of – I mean, it's pretty typical. As a kid, I played a lot of video games, along with reading books, or going outside, and – when you still could go outside. It basically started sort of from – It started solidifying my mind that this was an actual viable career after sort of picking up on articles in gaming enthusiast magazines I had subscriptions to, because I was a big reader back when I was a kid. As you do as a child, you get gaming magazine subscriptions.

[00:07:55] AC: As you do.

[00:07:56] FP: Yeah, as you do. So I went to like Electronic Gaming Monthly. I had one to Nintendo Power. So occasionally, you see these like sort of interest pieces regarding game developers and sort of what are game developers because the sort of knowledge base around sort of game development was very, very obscure. It’s pretty insular development community even now. Back then, it was like pretty much impenetrable to any consumer, but it's gotten a lot better recently with a lot more exposure.

It’s still fairly common to see people who don't really know that people make video games, not just computers that you just click on a button in like some mythical computer program, and then it suddenly just poops out a game. I’m pretty sure you guys are on the same issue in app development as well.

[00:08:42] AC: All the time.

[00:08:43] FP: Yeah, exactly. As a kid, I got an insight into that and that really intrigued me that people made these things. It was either that or become like the great next American novelist. In college –

[00:08:56] T: I like how that was your fallback plan.

[00:08:58] FP: Yeah. Well, those are the only two things I really liked, like wanted to really pop into was doing creative writing or playing video games. That was like my two main activities. So in college, I actually went to my undergraduate because they had like a really sick – It was a really good school, with a great creative writing program, but also they had a graduate school that specialized in entertainment technology. It was Carnegie Mellon’s Entertainment Technology Center, and I actually heard about that through an article I read in middle school in an Electronic Gaming Monthly. So it was all kind of confluential on all my life decisions, this like random article.

[00:09:46] RR: Do you have that framed like above your desk?

[00:09:49] FP: I should actually. I have all my magazines back at home, so I should actually like poke through and see like if I could find the soul inspiration. But after graduating from school in 2010, like the economy was still very bad, and there weren't a lot of gigs for people with a writing degree going around. So I decided to sort of either apply to grad school and get into that grad school I've been hoping to get into, or I guess go teach English in Korea for a few years, and sort of like put my life on pause. But luckily, I got into grad school and, from there, here I am. Yeah.

It’s basically the design focus also was sort of the result of me being always interested in design as a discipline, whether that was industrial design or graphic design. Sort of like seeing like the ways that creating objects of some utility that people can use or experience has always kind of held an interest for me that – I guess a sort of like general design thinking exercise sort of mindset. It’s always sort of appealed to me, so design was sort of a natural way for me to get in there. Also, I have no other particular talents in art, programming, or – [inaudible 00:11:04] because I’m a programmer now. But for a long time, my programming aptitude was like not great. So in terms of contribution, that was like pretty much my go-to. Not only because of my preferences but also because of like my absences in terms of like skill sets.

[00:11:25] T: Well, that’s pretty interesting because I feel like, when you started your job in the game industry, it's not like you hadn't been exposed to coding before, right?

[00:11:34] FP: Yes. So I started making like very small almost HyperCard-esque experiences in HTML for my friends back in middle school.

[00:11:43] T: And for our listeners, I’m surprised that I've heard of HyperCard. Can you explain what a HyperCard is?

[00:11:49] FP: HyperCard was this software that Apple made way back in the day for like old Macintosh. Think Mac OS like going on. I use it on Mac OS 9. You could create sort of like almost these interlinked slide shows. I don't want to like say too much about it because I'm not super familiar with it. But basically, you can sort of create text that you could then like click on a link and then go to another thing.

I think HyperCard was originally like either like some sort of like almost like presentation software. I actually do not know it all. I’ve technically never even used HyperCard. I just know about it because it's a very popular reference in the game development community. But now, I'm revealed as some sort of like a sham.

[00:12:38] T: Charlatan.

[00:12:39] FP: Yeah. But what I would do is I was essentially making a choose-your-own-adventure book, but it was a web page. I would just write a little story blurb, include a length of what choices you could have. Then you could click on the link and then go to another page that had another sort of interesting thing going on. So I started making those as my first sort of interactive games way back in middle school, sort of turn of the century. Wow, it's really referred to like –

[00:13:08] AC: I believe you mean millennium.

[00:13:10] FP: The turn of the millennium. That’s even crazier. Anyway, but from there, I did computer science in high school because I was interested in the subject. I was always kind of keen on computers, as anybody probably in their 20s or 30s listening to this podcast was back in the day, and then 20s, 30s, 40s, or 50s. Sorry, I don’t want to be exclusionary. So, yeah, going into it into college, I took like – I actually got a minor in computer science but I failed on doing a double major because I couldn't do linear algebra. Going into the industry, I had some programming knowledge but nowhere near the amount that I think one would require to actually do a full-time gig in the games industry.

But as the years progressed, I sort of accumulated knowledge on the job, as you could say, along with like doing stuff as a hobby, like just programming in my free time. Yeah, the hustle culture I guess we call it.

[00:14:07] T: My favorite.

[00:14:09] FP: Yeah. I’m sure you guys are real pro hustle culture, like just work all the time, and don't take breaks. Yeah. Not so much my mode nowadays definitely.

[00:14:09] AC: Never has been for me.

[00:14:20] FP: Excellent.

[00:14:21] AC: I’m lazy.

[00:14:23] FP: No. That’s not laziness. That’s like taking care of yourself honestly.

[00:14:27] AC: I have to.

[00:14:29] FP: Yeah.

[00:14:29] AC: Does that end well?

[00:14:31] RK: So, Felix, going back to game design, right, I think you were talking about like educating the users, educating the person that is playing the games? How do you lead a user to make certain decisions? What tools do you use? Can you talk a little bit about that?

[00:14:49] FP: Yeah. You could use basically anything at your disposal. It’s really great because games are this thing you just make up in its entirety. You can, down to the very weird, basic, physical –what we perceive as physical – elements, you can use all of them to influence people, whether that's lighting. So using a very simple example of navigation, if you want to lead someone to, say like a, platform, you can light the platform differently. You can actually just add a light in there to emphasize this thing in the space and then darken everything else. You can use UI to do it. So you can have a floating element that has like big circle like on it being like, “Go here,” or like an arrow. If you want to be particularly inelegant, that's a very popular go-to.

You could slow time down, manipulate the view of the player, emphasize this thing, and then go back. But it could also be very something very delicate as well. The example I mentioned before like just simply pointing the camera somewhere. That is like a very, very like easy touch to go to in terms of like leading someone to a certain location. You can make sound cues, where music would just slowly get louder the more you like go towards a certain direction.

There’s a number of tools you can do basically everything under the sun, but that's actually like a very trodden ground in terms of game design thinking is guiding the player navigation-wise. But here it gets really tricky is when you want them to do something like completely unexpected, in which case like ideally your design would follow very naturally. The sort of affordances available to the player in order to accomplish some goal you have in mind for them would make sense as like a thing in the real world that you do.

So affordance is a term that is used pretty commonly through many fields of design. It originates from a book called The Design of Everything or –

[00:16:50] T: Is it the one with like the red kettle?

[00:16:52] FP: It is the one with the red kettle, yes. The Design of Everyday Things. So affordances are lifted from a book called The Design of Everyday Things by this usability engineer named Donald Norman. I think this was written back in like the ‘80s I believe. Affordances are basically sort of the – I’m going to really mangle this explanation up. But at least from what I understand, affordances are sort of like the concept of what is possible with a thing as expressed through its design. So if you see, say, a scroll bar, scroll bars don't have any wiggle room from side to side, if you're looking at a vertical scroll bar. So hopefully, that design communicates to the user that they can only go up and down, same thing with a horizontal scroll bar.

If you have a car's shifter in front of you, hopefully that can communicate to you the design of the shifter and sort of like where the stick of the shifter can go. Hopefully, that communicates to the user that the affordance of this is limited in certain ways. So affordance is this concept of how does the design communicate its use to the user? In games, it’s very important because in the virtual world anything is possible. You want to be able to really limit the space of possibility within the player's mind, or else they'll be stuck. They’ll be at a loss as to what to do to progress, or move forward, or to accomplish goals.

If everything is possible, then you can attempt everything and sort of experience failure repeatedly until you find the exact right answer that the developer had in mind for you except, of course, in like more open-ended games. In which case, there are many, many examples of the genre where the purpose is to make it so that it's more of a sandbox for the player that a lot of affordances are available at all times, and sort of the fun of the game is to be able to explore that and to come up with novel solutions. But for most games and sort of the games I make, the affordances are fairly limited just so that like you have a sort of optimum linear experience. So I guess, yeah, the difference would be like linearity versus nonlinearity of the experience, as well as also consideration when deciding your affordances.

So let's say that you wanted them to be able to cross a river in the game. Ideally, maybe in the space, if you have like – Let’s say it's an action adventure game where you have free movement of character and free movement of the camera. It’s just like Mario, or Uncharted, or God of War, or any number of very popular games in that space. You can – If you say have a – It’s very hard to sort of think about this kind of stuff sometimes because your mind wants to lead to the easy solutions. But let's go for a naturalistic solution here. If you encountered a stream in real life, what would you do? Maybe you’d find a wooden pallet. No, because that would float down the stream. Let’s say you have a –

[00:19:59] T: I mean, how big is the stream? I feel like you could just step over.

[00:20:02] FP: Exactly, right? Okay, let's say it's like a six-foot stream. You can’t jump like that but you do have a ladder nearby. So you can grab the ladder, set it down, and then walk across the ladder. Well, how does the player know that the ladder is even interactable, right? You have to like place a big old prompt on it maybe or you have the camera point to it after the character says, “Huh, I need to cross this gap,” and then a not so subtle camera turn to the ladder.

That’s like a thing that can correspond to the real world, but then you have stuff where – Let’s say you're playing like a very cartoony, unrealistic game and you have like hover boots. So how do you know where to use the hover boots? So, let's say the hover boots don't last forever. Let’s say they have like an activation time of say like maybe 10 meters. So, how do you point out to the player that certain gaps are jumpable versus certain gaps are not jumpable? If you have a gap that's like, say, 13 meters, you want to make it very, very clear to the player that that is not achievable or else they'll attempt it, fail, and then they'll have to start over again. And they'll have to do this like 50 ,000 times, and that can lead to something else.

So, you need to establish design language of some sort to be able to tell the player like, “No, this is not jumpable,” or, “No, you can't use the hover boots here,” or, “Yes, you can use hover boots here.” Whether that is having every gap that's 10 meters or less, very clearly signposted versus anything else. That almost allows you to sort of go like – If I were, say, a level designer, which is what we call people who usually build out these spaces and games. If I were a level designer, I’d say, “Okay, we need a moratorium here. We have to prohibit any gap that is 10 meters or it is more than 10 meters to 20 meters.” 20 meters is – We’ve play tested this. We found out that like people will constantly try to attempt gaps anywhere in that range. But at 20 meters, people are like fully in the zone of like, “I cannot jump this.” So, that's actually pretty safe. Otherwise, like anything between those distances, like we're hereby now disallowing.

So, that will then extend to the entire game itself to establish a design language around the spaces and what affordances are available to the player. Through that, you can start to come up with, I guess, a sort of system of what you're available to use to guide the player around, especially with the repetition of certain guideposts, right? So, let's say I use that camera move like once in the game. Then if the player gets that, then they'll kind of know and internalize that maybe not consciously but maybe sub-consciously be like, “Oh, the developer wants me to go over here or the designer wants me to go over here and like pick this thing up or go over here if the camera points there.”

As you start doing these repetitions of how you guide the player around, hopefully they internalize that and will then have an easier time going through the game and experiencing it. Guiding the player sort of encompasses all of the above, which is a lot of just stuff, I guess.

[00:23:04] RK: Yeah. That’s definitely like very difficult to balance, right? How do you define like a good system? What is the balance between like too much hand holding versus like no hand holding at all and the user won't be able to efficiently find the right solution? There must be a balance with it. How do you balance it? What’s a good example of that?

[00:23:24] FP: Yeah. That’s a great question actually. It’s a very subtle thing because it depends on sort of how you want to present the game. Think about, say, a lot of times the way I thought about in jobs is pacing, right? So to have a maximally taxing experience at all times leads to a fairly different play experience than like having a game that's like very easy all the time. For a really like optimum – psychologically you'd call it sort of a hook, of like being able to play a game and sort of like have a good time with it and play it for longer periods of time, you want to pace it out. So you essentially have high intensity moments of, say, difficulty interspersed with low intensity moments.

In that case, the context of at what time you're doing this stuff would lead you to sort of make that decision of the difficulty balance. That would be like local maximums and local minimums of difficulty. But for like, say, the difficulty of an entire game or, say, like very classically like a difficulty setting in a game, where I'm playing like I'm playing on normal difficulty, easy difficulty, hard difficulty. To be honest, the best thing I’ve seen in order to be able to balance that and make those decisions is play testing. You look at, say, the subjective experience of a play tester who is like, “I usually play games on hard difficulty. Let me play your game and see like how many times I die or how many times I'm frustrated by things. If I think it’s like – If I’m having too easy of a time” – You try to get their gauge of like if that game has met their expectations or not. Also, you try to use your own intuition, which depending on how a game designer you are, you might have varying results.

But, for the most part, in terms of deciding things, it's basically up to your own personal preference if you're just free wheeling. If you have a lot of focus on player experience, then that would lead you to integrate more player feedback into that process.

[00:25:19] RR: And that's all for this week's episode. Join us next time when we discuss user testing and striving for work-life balance. And until then, Enjoy the Vue.

[END]