Building Games That Can Be Understood at a Glance

[Music] I'm vac age this is building games that can be understood at a glance if you're not familiar with my work I've made a bunch of games that you may or may not have played like flip flop solitaire type shift really bad chess saij solitaire Darcis ridiculous fishing spell tower lose-lose and a couple others anyway I've been making games for quite a while on the phone almost since the beginning of the iPhone actually and one thing that really struck me very early on was how different the experience of finding new games for the phone was versus other platforms mostly how I was finding new games was by looking over people's shoulders so over my friend shoulder at a bar over strangers shoulder on the subway or at what the person next to me on an airplane was playing sometimes I get really into the game and I start playing it in my head and I would start like critiquing the actions of the person quietly to myself and whenever I started

doing this one thing I noticed is I'd want to download the game myself and sometimes the name of the game was on the screen so I could just write it down and other times I'd have to ask and people were always really excited to tell me what the game was like and why they loved it so I ended up asking a lot and as I started making more and more mobile games I really wanted to build games that could do this for other people that could sell themselves to strangers who are looking over other people's shoulders that's kind of a mouthful as like a strategy so I'm just gonna call it my friend Kevin proposed make calling it subway legible games because we both live in New York so that's what I'm gonna call it okay so obviously one caveat for this talk is nothing that anyone tells you is going to be the one thing that makes you successful or not successful but I do think that finding success with your games relies upon having a lot of little tricks that really fit your own practice and capabilities and leveraging those

tricks as best you can and for me designing for subway legibility has been a really powerful tool and the reason why it's a powerful tool is that it effectively it solves three problems for me at this time and since I make most of my games totally by myself anytime I can solve three things with one solution that's a really big win so what are those three things well designing for Subway eligibility does three things for you one it makes implementing your tutorials a whole lot less a whole lot less work your game is easier to comprehend naturally because you're presenting information and game state in a way that is designed to be naturally accessible to people who are playing the game this means when you sit down to make your tutorial which probably if you've done it you would agree is the absolute worst part of making a videogame half the work is already done for you and having a better tutorial means more people will enjoy your game across any kind of skill

level and so that's great - it improves organic discovery when your game is good at teaching other people to play it'll draw more viewers and every player and every streamer of your game can focus on conveying how awesome your game is instead of explaining to everyone over and over again how the game works three easier marketing your screenshots and your gifts will need little to no context and that makes pitching for coverage or going on viral on Twitter way easier people say a picture is worth a thousand words but that's only true if people can understand what your picture is about okay so you're probably thinking alright Zach it's so easy to make indie games or to make subway legible games when you make these tiny little mobile games what about my big fancy PC game is that even possible yes this is a screenshot of into the breach which mostly everybody regards as a brilliant tactical strategy game and I regard as an incredible example of information organization and UI design the screenshot is one that went around Twitter before the game came out and I think if we look at it we can figure out why pretty easily if anyone looking at

this can immediately tell that it involves huge mechs and giant city size bugs the word MACT is literally written on the screen it's turn-based you have a bunch of units these bugs are doing something bad things are exciting and literally on fire the kind of tile you're standing on has a tactical effect may be like Advance Wars and it signs and it involves time pods which is actually written on the screen also these guys are geniuses that sounds pretty exciting to me and I can already imagine what the game is like so how'd they make all that so clear so some of the things I cover in this talk might seem unbelievably obvious but I find that the best design rules are always simple and obvious and that's because they need to be simple enough for you to break them sometimes and they need to be obvious enough that you're gonna remember to actually do them back when I was in college studying design I was introduced to the principle of the three Reed's at least that's what my design teacher called it so that's what I'm gonna call it when I explain to you

now it's the key to all of this and so if you come away from this talk and you only remember one thing that I explained make it this thing the easiest way to understand the three Reed's is by thinking about a concert poster imagine you're making a poster for some event that you're gonna throw let's think about how posters are experienced generally we see them on the street and that means that the audience that a poster can greet is primarily limited by how far away you can actually read the poster a poster that can only be read from 10 feet away is going to reach a lot less people than a poster that can be read by 30 feet away I promise I will get to how this affects games that means we want to have the text on our poster be big but we don't want all of it to be big because if it was all big that'd be really confusing and we'd barely be able to put anything on the poster so what should be big probably the things that would convince a walk closer to the poster so essentially we're trying to design a poster that's going to pitch itself to people passing by so first things first who's performing in our example David Bowie rest in peace there's our target market if you like

David Bowie you're gonna walk closer to the poster if you don't like David Bowie I don't really care about you so that's the first read the first thing that people see when they look at the poster and it's meant to draw in the people that you want to talk to the second read is for people who have approached the poster and are now looking for more information we don't really have to worry so much now about the size of the text we can make the text smaller because people are close to the poster so this is what would be in the second read when is this happening where is this happening what kind of show is he going to be performing so hopefully now the viewer is interested they the venue they're free on Tuesday we can make it to the third read which is where we tell you how much it costs remind you the address specify the time and throw in all the little extra details that we need that nobody actually cares about like who's presenting the show no offense if you're a show presenter so there you go that's the whole thing that's pretty simple right talk over so this kind of design structure works not just for rock posters but it also works

for videogames let's go back to that screenshot what draws our eye first in this screenshot the giant grid it feels a little bit like advance worse it has a clearly of what is looks like a player controlled unit something's on fire there's a bunch of bugs what do we see next whoa look at all these things to think about it's turn-based I have three people my health seems to be the power grid I guess I have to survive four turns I have a Mac and it looks like depending on where I place my units there are special tile effects so wow it is gonna be like Advance Wars maybe and then on to the third read oh my units have health too and there are bonus objectives and look at all this crunchy tactical data and also time pods the screenshot takes you from hey this is like Advance Wars all the way through to wow this is so much more exciting than Advance Wars just by how the information is laid out so obviously this kind of clarity can help with your promotion but how does it also help us make better

tutorials and improve word-of-mouth so something you might be familiar with from making tutorials is that generally when you teach something new you want to introduce the rules in a specific order so that players can build a mental model of how the game works starting from the broad-strokes and then moving inwards towards more specific rules ha it actually sounds a lot like how the three reads works the first read pulls you in and that's the core of your game the second read fills in key details or big unintuitive rules and the third read gives contextually important information like the time of the Bowie Show only matters if I'm free on Tuesday and that gives you contextual II important rules like what tile a giant bug is targeting only matters if you're thinking about how to deal with that bug so a good tutorial teaches you things in the right order and good design shows things in the right order let's look at my game spell tower as an example so in spell tower you're trying to keep stacks of letters from reaching the top of the board and you do this by spelling words that removes the blocks and then more

stuff gets added from the bottom let's look at the three reads here first thing we want players to see is to just the letters they need to look at the letters and think about what words they can spell when you're comfortable finding letters you need to think about what columns are close to getting to the top and which letters are special and extra helpful for reducing the height of your stacks like the blue letters will reduce a whole row and then finally on the third read is the information that only context really matters things like what your high score is which tiles can be used and which ones need to be in at least four lengths words the layout reinforces how to approach the game both for the player but it also reinforces it for every single person who ever looks at the game over their shoulder okay that's it for how to do the three reads properly and before we move on to advanced concepts I do want to quick take a quick look at what this can look like when it goes wrong this is slave aspire this is a game I enjoyed quite a lot and in fact it's a game that a lot of people enjoy and it's done really well for itself so I don't feel terrible subjecting it to a

little bit of constructive criticism if you made this game and you're in the audience thank you for making this I really liked it slay the spire actually does a really great job teaching the player how to play it it's got one of the best tutorials I've seen in a really long time every single thing on the screen tells you what you what it does when you mouse over it and the way that all these concepts are given to you is that this perfect leisurely pace so that when you arrive at a screen like this you understand every single thing that's going on the problem is when someone starts watching over your shoulder or more often with a PC game like this when they start watching on Twitch they might not know what's going on so if you've never played slay the spire you probably wouldn't guess that the most important information on the screen is actually these little icons these icons more than the health more than the armor more than the cards in your hand explained the current state of a battle not only are they tiny but even if onlookers notice them they have no idea what they mean these should be in the second read but they're in the third on top of that the screen has a lot of

empty space on it but it still manages to look very busy nearly everything on the screen has a tiny icon with a little number on it what are these things and how can you have something but have zero of it and why is my health in two places in two different colors and what are these decks and do they really need numbers on them couldn't the cards just be shown by the size of the deck and you might not know it from the presentation but the one on the right is actually the discard pile these aren't two separate decks they're all the pieces of one a problem isn't that all of this information is displayed it's that it's displayed at relatively the same scale and that the stuff that you really really need is actually the smallest here's what the reads of slate aspire look like first read two characters a hand of cards and in turn button and the mana this is looking pretty good so far second read is practically everything else and third read is some small numbers and the all-important status icons under the health bars so see how you can kind of barely tell the difference between the second and the third reads here that's a pretty big

sign that something is really overloaded I do want to remind you I love this game this is just constructive criticism and also I want to remind you that this game does a great job mitigating a lot of this with really solid animations which is actually what I want to talk about next so hopefully by now you have a sense of what the first second and third read of something should look like and now I want to cover a little bit of advanced stuff that you can't do with a poster so unlike traditional print design video games can move and they're interactive and that provides you with a couple additional options as a designer one of these options is using movement and animation to temporarily raise or lower the read of a game component and Blizzard does this really well in their game hearthstone so pay attention when I run this video to the size changes and how your eye follows them

hearthstone is a constant wave of things being brought to your attention in the first read and then fading back into the second or third reads it's really masterful but it's also a lot to consider if I was going to break this down the way that I broke down the into the breach screenshot it would probably take this entire talk so instead I want to look at a much smaller example which is how I'm trying to solve a rules comprehension problem in my game type shift this is what a puzzle looks like in type shift a like in spell tower your first read is the letters your second is the tiles and the background and your third is the menus and the minor decorative elements a long-standing issue I've had here is that some players jump to the conclusion that your goal in the type shift puzzle is to find every single word in the puzzle which makes sense because that's how most word finding puzzles work but actually in type shift your goal is to use every letter at least one time so I tried to make this clear in the tutorial by literally telling people showing you

that you're making a word turns your tiles blueish green and that your goal is to turn them all green but that wasn't good enough for many many players and the problem is that when the colored tiles that the colored tiles in this game are on the second read and when they change color it's just as players are finding a word so you're a little distracted and you don't notice and so players interpret the color change as a decorative event so this is what it looks like when you find a word I'm about to launch an attempted fix that uses animation to bring tile backdrops temporarily into the first read and I'm doing that animation right after they find a word so hopefully when they're not distracted by something else and focusing on something new so that looks like this it's a very small adjustment animating the color change across the letters instead of having it pop in but it reinforces the importance of the color as more than a decoration it becomes an informational animation and

informational that's not a real word I never would have come to this change if I hadn't been considering the problem within the context of the three reads and so we'll see when I launch it how it works out another thing you can do in the game that you can't in a poster is provide hidden toggled information which I call the forth read in really bad chess I needed to have a bunch of menus on the screen to allow you to use on dues check scores or quit the game and those ended up looking like this unfortunately those menus are horribly distracting the problem is in chess the pieces are really small and they're really detailed and so when you have big graphical elements on the screen it's very easy for them to overwhelm these tiny little pieces on the board so to solve this I made it so that whenever you tap away from the menus whenever you're focusing on the game all of those menus slide out of the first read and into this sort of toggle fourth read and now if you look at it the board and the mode are squarely in the first read they're the things that

your eye goes right to and everything else looks pretty balanced and if you tap up on the menu area the menus come in and now they're in the first read but that's totally fine because they're what you're looking at and what you're looking for and it's always alright to have that in the first read and everything feels very natural okay the last thing that I want to look at well I got through this pretty quick is um my game sage solitaire which is probably the most complicated layout I've done in a mobile game when I was designing sage I had to include a lot of specific extra information on the screen that could be a little distracting because there are a lot of specific rules on sage my initial layout for it looked like this which is I think a total mess the first read is the cards and that's great but read two is basically everything up top the name of the hand the decorative stack of cards the bonus suit the trash is everything blends together the problem is that most of these things shouldn't even be in the

second read the stack of cards is just a decoration element basically the bonus suit is important but you only need it sometimes and the trashes are also important but also not important all the time worse there's actually something up there that you do need to know constantly and that is the name of the hand that you're trying to score and how much it's worth if you didn't know how to play this game looking at the screenshot would not teach you how to do it it wouldn't tell you what was important it wouldn't really tell you and so my solution was to break the screen down into a big play area that has the first and second reeds in it and then a small side area that has all the third read information so let's break it down the first thing you see is the cards the second is the name of the hand and the cash end button and then last you see the trash is to suit the score a hint button and your used card pile nicely out of the way there's also a little bit of a of a kind of trick in this layout

and that is normally it would be sort of an issue if the things that were taking up the entirety of your second read were contextually visible so right now the cash in button and the name of the hand where do those go when when you don't have a hand selected does that ruin the layout doesn't make it confusing that there would be no second read well so actually I don't get rid of both of them and I use one very deliberately as the only thing in the second read and that is I leave the the hand button and I just changed the text to tap for hand list that's the only thing in the second read in this entire screen and the reason I did that was very intentional and it was that even though sage solitaire is a solitaire game it's a very different than Altair game it's usually in solitaire trying to make piles and move cards around in piles but which is all about making grams and that's very irregular for a poker game or for a solitaire game and it does a couple things one you'd never expect it if you were looking over someone's shoulder and - if you are a solitaire

person you might not even know the poker hands and so leaving this big piece of information as the only thing in the second read guides everybody who's looking at it so I - that piece of information and it tells them eh this is a game about making hands and B if you are literally playing it and you don't know the hands here's a giant button that you can press that's going to help you I think it's very easy to look at this layout and be tempted to make the hand list a small button that sits off to the side but if I'd done that it wouldn't have helped people looking over the shoulder and it wouldn't have helped normal solitaire players feel more confident and able to play this game so there you go that wasn't so bad let's recap you have three standard reads the first one pulls you in and explains the core of your game the second one fills in key details or big unintuitive rules and the third gives you contextually important information or contextually important rules you also have a fourth read that comes from toggled information and the ability to move things up and down in the read structure through movement and animation and if you do all that stuff correctly

you get subway legibility it becomes much less work to make a great tutorial people see your game out in the world or on Twitch and they get it and they want to get it and explaining what your game is with a screenshot or an animated gif becomes extremely simple so I hope that was helpful thanks we have time for questions if you'd like to ask that a question please come to one of the mics in the aisles and while we're waiting for folks to come up I have a question for you yeah so what do you think the the concept of the three Reed's means for designing trailers oh boy I definitely think in general you want to approach a trailer fairly similarly you want to have the thing right at the start that's gonna draw people in and as your trailer progresses you can get more and more detailed about what's going on I actually think maybe almost more

important than that is just keeps your trailers short your trailer shouldn't be more than a minute and most people will turn off a trailer after like 10 seconds so if you don't hit them right in the face with something that's really compelling that's probably not good for you but one thing that is nice about doing a trailer even though it's incredibly annoying unless you love making trailers is that it really helps you refine what your pitch is going to be because your pitch to most press and most of Twitter is actually same the same as the beginning of a trailer your first you know 30 seconds of a trailer should show what your games about why it's special and how it works you think that's why in Hollywood trailers these days they do that mini trailer thing at the start where there's like a whole bunch of action have you seen that wow yeah really quick snippets of what's gonna be in the rest of the trailer because that's like showing you up front yeah that makes sense though also in Hollywood trailers they have a voiceover so they get to tell you exactly why you care it's true anyone

have any questions speechless so my question is about let's say in I specifically I work in arcade games mostly but I've this probably true in the app store to where like everyone's trying to get your attention everything's trying to be as loud as possible to be you know grabbing the players attention and do you have any tricks for being subway legible in the context of also competing with the with the flashbang of all the other games in the market that are around is there anything that you found of grabs attention without being overwhelming sure I think the first thing that you need to think about at least I can speak to the context of the AppStore is that most people actually don't understand how the App Store works and they don't approach the marketing in the App Store in the way that it's going

to make the most of it for them and if you do that that kind of puts you on another level already that is very helpful so the thing that you need to understand at least about the App Store is you need to sit down and look at like what are the pieces of information that people are going to get right away and how do I use that information just good enough to be able to get them to the next piece of information so in the app store you get an icon you get the name of your game and you get a small subtitle and you need to make the entire case for someone to click your game based on those things but more importantly you don't have to make anything else you're not trying to sell your whole game on that you're just trying to sell them to tap on the icon and so when you're designing an icon you can think about like what do I need and what do I not need in this what can be told by the icon that can't be told by the name what do I not need to include so for example a lot of times when you're making a word game you have to convey that it's a word game and so how do you do that do you put a lot of text in the icon you can do that if you're if the name of your game doesn't necessarily clearly show so type shift

you wouldn't necessarily know that that's a word game it could be an app so the icon better show something that looks like a word game but if your game is called crosswords 5 then you can put a happy smiling face on your icon and everybody's already going to know it's a word game so that's the first step and then when people tap on it then what's the next thing that people are going to see well here you're effectively at your second read you under you have someone as like a captive audience and now you just have to sell them on your game and what you generally have is a short video snippet that better be really exciting right away because people are on their phones and it'll go away and then you have a series of images that people can slide through that I typically use to explain why the game works and what's special about it and then that's really it nobody ever actually reads the text if people read the text they're already sold on your game so you just have to not screw it at that point you don't really have to keep sewing yeah I also want to say just as a total side note I really never

thought I would be up here giving a talk about promotion this is so weird for me I like want to make fun weird art games but people like but I guess you gotta learn how to do this stuff to make that work all right thanks Zach everybody please make sure you fill out your surveys to give Zach feedback on his talk but before you go please give him one final round of applause [Applause]