Hacker News new | past | comments | ask | show | jobs | submit login
Building games that can be understood at a glance (stfj.net)
220 points by panic on April 30, 2018 | hide | past | favorite | 61 comments



I basically spent this entire weekend playing "Into the Breach" so I feel qualified to comment on that game being identified as "visually well-designed".

Here's one great thing about ItB that was not discussed in the article (probably for brevity!). When you're deciding what moves to take, the game will show you the effect of the move you're about to do. This is really handy because often your moves have knockback, or splash, etc so it's challenging to figure out on your own what exactly your move is going to do.

The not so great thing about ItB, visually, is that after a certain point in the game the grid just becomes too cluttered. This is because every enemy in the lategame has effects, splash, special moves, etc. It becomes difficult to parse visually. If the article had dissected a screenshot from the late game, they probably would not have come to the same conclusions as they did.


The "telegraphing" of moves in ITB is really great. The devs worked on FTL previously (also a great game if you haven't played it!), and one of the really nice interface choices they made is to make the effect/requirements/stats/etc of every item/weapon/crewmember visible when you hover your mouse. You can tell that they care about giving the player all of the information they need to make a decision.

You might like this article on RockPaperShotgun that does a bit more of a deep dive on the interface design challenges during ITB: https://www.rockpapershotgun.com/2018/03/05/into-the-breach-...


Would this be resolved for you if there were an option (hotkey or mouseover, like checking order of actions in a turn) that dimmed all other things and highlighted either 1) all enemy planned actions, 2) all environmental modifications like fire/smoke/floods/etc., or 3) all unit locations, friendly in green and enemy in red?

Otherwise I think there's a bit of growing visual complexity inherent in the growing actual complexity of the grid, and reducing it in some other way might hide from you information crucial to your next tactical decision.

I think the game's supposed to be pretty moddable, so I imagine this kind of thing might even appear as a mod at some point, if you don't want to do it for yourself.


Do you have such a screenshot? I've played it a bunch and it never got unclear but maybe I just got used to what all the doodads mean. For what it's worth, I don't think the 'three reads' thing is particularly informative or useful way to highlight what that make the ItB design good.


I've designed and built a quite popular game called ∞ Loop (http://loopgame.co). One of the goals was to have no text in the game at all, and try to design it so that the "right thing to do" would be the first thing you'd try to do, to make it truly intuitive.

We've sold the game and now it includes a tutorial with written explanations of what to do. In my view, the tutorial is unnecessary, because it's far nicer to just show the level and have the player figure out what the game is about intuitively.


Oh shit, I absolutely love Infinity Loop! I played it a bunch and got a ton of mileage out of it. It hits what in my experience is a very difficult to achieve balance of relaxing and engaging, and even though it's simple it never really feels repetative (meditative, maybe?).

I played the pre-tutorial version and I found it highly intuitive and easy to get in to, I think you really nailed that aspect. Thanks for the great game!


Thank you for the kind words, really wonderful to hear!


> We've sold the game [...]

Ah, that explains why after an update a while back, I started getting notifications advertising other games. That shit earns an app an instance uninstall.


I’m very sorry about this. It’s not how I would do things — but it’s also not me doing things anymore.


But it is how you do things. You took $ in exchange for letting that happen. That's your right, but you shouldn't pretend that's not your responsibility, unless you are offering refunds to anyone who is now dissatisfied.


It's a free game, so I'm sure he wouldn't mind giving refunds ;)


Just installed it, played until level 14, then uninstalled because of the ads: they break the experience and destroy the relaxing effect.

Probably not your fault since you sold it, but just fyi that their are too many ads.


Yes, yes there are. Nothing I can do about that, sadly. They really do break the experience and ruin everything I was going for with the design...


This is such a great game! It actually became my go to and helped me break an addiction with League of Legends.

Do you mind letting us know how much you were able to sell the game for?


Very happy this filled your LoL slot. I hope it helped you relax (:

And sorry, I'm not sharing details about the sale, but I'm quite sure the new owner was able to turn quite a profit. He built an entire company around Loop, making around 10 new games.


Eh, I just don't agree with this at all, and also find the presentation awful which is an irony.

If you're going to give an example of slay the spire doing something wrong, show an alternative. The slay the spire shot has 13 artifacts active, and 5 status effects, and the criticism is that twitch stream viewers don't know what they do? That makes no sense.

A) Twitch stream viewers wouldn't know what anything does from hearthstone either.

B) There's no way you're putting all that text on the screen. It wouldn't fit.

C) Nor should you. I suspect most gamers who play slay the spire have put over 20 hours into it, and damaging the advanced player's experience for the noobs is a dangerous tradeoff.


TBH, there are a couple of things I think StS could improve regarding its GUI.

Moving the energy stat next to the End Turn button would probably make it harder to forget to spend it - you'd think only youtubers do that because they're distracted by commentating (looking at you, NL), but it happens to all of us.

I've also found it weird that the draw deck is on the left but the hand adds new cards from the right, so the card draw animation has cards flying in from the left to the right and then moving back left again.

(I don't participate in the StS reddit but I'm sure these things have been brought up there.)


He kind of indirectly did with Hearthstone. Things that are important are brought forward and highlighted, or animated, then fade back to the second or third "row" of importance.

I didn't read the whole article, save searching for "slay the spire" and reading the accompanying sections, but I agree with his criticism of it, assuming those little status icons below the characters really are as important as he says.

And why is your health in two locations and two colors? Maybe there's a good reason, but if I take the author's word for it, it is redundant and raises more questions than answers at first glance. I'm primarily a developer, so I've only dabbled in formal UX study, but it does seem like the game is just giving up easy design wins. Design is subjective, but I suspect many UX folks would agree with him.


The health is always in the top bar, and additionally beneath the character on battle screens, where the player figure is visible, matching the enemies health display.

Having the own health only in the top bar on battle screens seems wrong: the enemies have it fully displayed, and in battle health development is obviously especially important to see, so the bar-representation makes sense.

Removing it from the top bar just on battle screens doesn't seem to make that much sense either (do you pop it back in when a full-screen menu appears during battle, which covers the player character? redesign those screens to be more cluttered, just so the bar on the character is visible?)

One can argue about the importance of the status icons. For some of them I'd prefer it if they (or rather, their effects) were more noticeable, others are not that important most of the time. On the other hand, them being were they are the important facts are displayed fairly compact and leaving lots of room for the really nice graphics - I'd disagree that the overall screen is cluttered.


I don't think the point is that Slay the Spire is doing something wrong, the point is that Slay the Spire is designed as a PC game so it doesn't have the subway read-abillity imperative that mobile games have. Most people find out about Slay the Spire through Twitch, but that is not how most mobile games are discovered.


Well if all he's saying is that Slay the Spire would be difficult to understand on mobile, well then I agree. However that didn't sound like what he was saying.

He describes it as "criticism," but doesn't convince me there's a way to make the interface better. In fact, I'd go the opposite direction and suggest that hearthstone is too simple a game in the name of simplicity.


I see this in cartography a lot. Traditionally we had to author static maps so they needed to have all the data you might need "rendered" at the same time. Look at a road map from your glove box for this. But with digital maps (and games, and apps, etc) you can be far more judicious about what to show initially, always, incrementally, and through custom settings.

Into The Breach is beautifully successful at this. At any point you see nothing but the current state of the board. Everything that can be memorized is hidden. But for accessibility you can always quickly get at token meanings, stats, etc.


One of the most helpful UI/UX articles I have read from the perspective of helping me design my products. I've read other articles that say the same thing, but this clicked for me.


"Bounce and Bounce". A viral game hit on WeChat. Fulfils this criteria. There is something deeply rewarding about the one touch game mechanic and ensuing chain reaction. Not to mention an ideal candidate for iOS / Android clones ;)

https://technode.com/2018/04/25/mini-game-balls-viral-wechat...


I was about to post about wechat miniprograms because in my opinion they seem to be the best platform for these kind of games. Games like "bounce and bounce" and 挑一跳 always appear in wechat groups and you see people playing them on public transport.


> - Involves huge Mechs and giant city-sized bugs (the word mech is literally written on the screenshot)

>- Is turn-based

>- You have a number of units.

>- These bugs are doing something bad to the cities and tanks.

>- Things are exciting and literally on fire

>- The kind of tile you are standing on has a tactical effect (advance wars-style)

>- It's science fiction and involves TIME PODS (also literally written on the screen, these guys are geniuses)

I get none of this from the screenshot, it looks like a huge mess


Into The Breach is readable because it looks like Advance Wars[1] / Fire Emblem[2] / X-COM[3]. I'm not convinced there's much more to its understandability than familiarity with the genre[4]. But, making the familiar look familiar was definitely a good move. The people who loved those classic games are the people most likely to buy another. Having the inspiration be visually obvious is a good marketing strategy.

[1]: https://www.mobygames.com/game/gameboy-advance/advance-wars/... [2]: https://www.mobygames.com/game/gameboy-advance/fire-emblem/s... [3]: https://www.mobygames.com/game/dos/x-com-terror-from-the-dee... [4]: I saw this screenshot a few days ago and thought it looked cool. I basically only understood: "has spider tanks", "plays like Advance Wars", and "has decent production values".


As a counter point here, there are an immense number of articles on "good" game design. But the problem is that you'll have a million exceptions in games that do phenomenally well breaking all these notions, and a million games that flop abiding all of them. Really I think the point is that games are more of an art than a science. The regular inability of companies to replicate their own past successes should itself be more than sufficient evidence of this.


The article is about the area of UI design, which is part of a game's design but not the entire thing. It's entirely possible for a game to do well despite having a bad UI, but it would be foolish to assume that it did well because of the bad UI.

If you're arguing that no UI can be better or worse than any other because it's all "art", that is absurd.


There's something peculiar about games. Broken down to their most fundamental games are just an unnecessary series of obstacles. Presentation of information is another component of games that can change things in ways that I think cannot really be assessed in a vacuum.

So for instance consider crafting in Diablo 2 vs Diablo 3. In Diablo 2 crafting was ostensibly horrible. There was no clear way displayed of how to do it, or what the result might be, and actually putting things in your cube was tedious at best. Diablo 3 refined this. And suddenly all relevant information was immediately displayed, items would be automatically taken from your inventory and the entire system was substantially cleaned up.

In a vacuum it's obvious which would be preferable. But somehow in game, the clean crafting system felt boring and tedious whereas the 'dated' crafting system, which really did feel like an anachronism, somehow managed to avoid this in ways that are really difficult to pin down. Those unnecessary obstacles often defy description yet are really what create the 'feel' of a game.

Gameplay and presentation are both intrinsically tied together and I think trying to formulate a cookie cutter definition of good versus bad is something that's unlikely to be productive.


This isn't about game design (rules, mechanics, balance, etc.), it's about design of GUIs for games.


The interface is very much part of the design of a game!


A very important part, to be sure, but I interpreted your comment to be about game design in general, while this presentation specifically focuses on discussing and critiquing the UI only.


The lead programmer for itb stated the UI/UX and tutorials were the most difficult part to make

I played every game the author mentioned minus some of the small mobile /webapp games mentioned later.

I found this article interesting though, I had never considered how similar designing a poster ad in photoshop or building a catalog in indesign is similar to building UX/UI in video games or even UX/UI in webdevelopment. Things like simple intuitive animations, color schemas, font choices, element positions, ratio sizing, etc. They are really all the same thing. At the end of the day a good UX/UI design is really just a well thought out teaching style.

A bad teacher/tutorial is like a bad UX designer, vice versa for good teachers/tutorials.


Good read (via Mercury Reader, anyway) -- the concepts apply beyond games, to UI design in general.


Alternative title: Building single screen casual games.


Neither Into The Breach nor Hearthstone are 'casual games'. Getting them to be work almost entirely on a single screen is a UI design achievement.


I don't know about heartstone. But for itb, there's not a lot of information to show at the same time and few system that interact with each other. I think the game design was constrained by the goal of having the simplest possible UI. So, even if ITB is not a 'casual game', it's not very complex and each game is short.


In its core mechanics, it's not that much simpler than, say, a recent Fire Emblem. You can google your way to interviews with the authors where they talk about the amount of time and fiddling it took them to get the UI to where it is. The design evolution of FTL's UI over the years is another good case study. This doesn't just happen by making the game 'simple'.


This. The continuous push to make everything easy (as in gameplay and also learning) is annoying. Not all games have to be simple. I believe games have huge potential for teaching problem solving and systematic thinking, but by dumbing them down were partially eliminating this.

The ultimate example are mobile games. They optimized for profit by dumbing them down and adding addictive, simple gameplay loops. They also incredibly boring in longer term, but it doesn't matter because they've probably extracted enough money from you at that point.

This goes beyond gaming and applies to our industry in general. I strongly believe that having more complex, but powerful software is better for the society at large. Encouraging people to not give up when they encounter simple problems and promoting systematic thinking is important. But it's not as profitable and you lose users.


No, this has nothing to do with simplifying games. Complex games can be intuitive and build up complexity as the player learns.

Take something like Civilisation. You don't need hours of tutorial to play the game. As the game progresses, it becomes more and more complex, but you start with 2 units, no enemies and no technology. After you build a city, technology is introduced. As you start exploring, enemies are introduced.

If civilisation threw new players into a typical midge scenario, players would need to read manuals and use tutorials and spend quite some time getting an overview of the current state.

Even complex games can start with the player playing a game.


cf Paradox's Crusader Kings etc., where you can start off with a tiny county with an army your larger neighbour can effortlessly stackwipe to avoid the issues of managing subordinates if you want, but if you don't read the manual to find out what all the options mean, you'll struggle to get beyond the tutorial never mind understand why people find it addictive (or buy any DLC...)

And weirdly the mystery UX forcing you to pore through the manual and how to guides might actually be a good thing since even if you start out big enough to conquer and learn how to raise an army you're going to find it very frustrating when you lose it all and more happy because you didn't research the implications of gavelkind inheritance


The second paragraph here seems like it can be summarized as, "reading about things the game doesn't tell you about is good because you'll learn about other things that the game doesn't tell you about."

What if the UI was good enough that it exposed some of those gavelkind inheritance implications?


It does supply you with warnings for stuff that might go wrong. It's just that there's a lot of things that might go wrong, may of which need longwinded explanations, and you're probably never going to love micromanaging all that stuff (never mind enough to buy shiny add ons giving you more symbols and options!) if you don't like reading manuals. And the whole point of differentiation from the Civilization series is to start off with an enormous choice of unbalanced real life historical scenarios which may need immediate attention rather than a blank slate to gradually build up. I mean, the UX is terrible in many other respects: but the first this looks like it's designed for people that enjoy complexity glance probably reveals more about the games than anything actually intuitive could!

Fair to say it's targeting a different market from mobile games where you see a screenshot of something that looks like Tetris crossed with Scrabble or Solitaire with poker hands and instantly understand the rules and what a good strategy might look like.


It was slightly off topic rant indeed.


I for one welcome games that don't require me to sacrifice hours and hours to be enjoyed. I have job and familly and while I like games, they have only limited time and effort box available. Any more then that and they get deleted, as a strategy.

You don't have to like them. Not every customer wants to dedicate whole life to games.

I am thankful to mobile games creators that they did not rejected my demographics and interest group and started to make games that I can enjoy.


Thank you. There are tons of complex games out there. I really like them in principle. I may even play them for a while if the learning curve is reasonable. But the days I’ll put hours into games are pretty much past and were mostly never there in the first place.

Truth be told I’m the same way with a lot of complex TV shoes. I do watch some like GoT but I’m pretty selective about it.


This article isn't about dumbing games down, it's about making UI adjustments to make it easy to start playing.

If you play some Ludum Dare games, you'll see how important a good UI is to pick up a new game. You'll see lots of unexplained controls, unexplained mechanics, and indecipherable labels. And these little details will make or break games.


what's easy? what's simple?

getting over it is extremely minimalistic, immediately accessible and exceedingly difficult

stellaris has a lot of layers, with the ux segmenting the game minigames for the user, but the core game loop is quite straightforward and the complexity mostly cosmetic.

triple town has both a simple interface and simple game rules, but complexity grows exponentially with the combination level, 2048 is more of the same.

there's no direct relation between interface complexity and game complexity; there's no even direct relation between rules complexity and game complexity.


There will always be games with some depth out there - somebody is always going to be hacking away at Dwarf Fortress, or Gary Grigsby-type games. But, if you're building games on an input device as limited as a mobile phone, your options are sorely limited.

It is frustrating when something that was on the grognard end of things gets juniorized; I've seen a lot of complaints in that vein about the last Paradox Hearts of Iron iteration.


Well a lot of older series haven been simplified in recent iterations. I haven't played hearts of Iron though.

It's hard to please older gamers by crating something that feels new, but not too different or simplified and at the same point appeal to the new masses of gamers.

As others fairly pointed out my original comment was off topic. Creating good UIs is a worthy cause as long simplicity and mass appeal is not valued over substance.

As for mobile games, I will disagree. There is a huge inertia and lack of creativity. Everyone is trying to copy everyone else. Just look at the screenshots of a typical game in play store. Same style everywhere, they've even started to not show game content because it's just not there. Yet somehow I can run emulator and ejoy quality games with no input problems. Clearly it's not a limitation of the device.


There are a lot of ways that a game like Dwarf Fortress could have a better UI without compromising the depth of gameplay.


The problem is not only have the people made their money, but the population has moved on to the next shiny dumbed-down thing. So while I agree with you, I don't know how to change it when everyone involved seems to have an incentive to keep things as-is.


The system is feeding it self. The simpler it is the more people are reached and the less ordinary person is willing to learn and overcome problems. Slowly everything that is slightly complex becomes too much of a hassle or gets negativity.

There is a middle ground somewhere.

I suppose the gaming topic made be rant, because it seems like a lot games being made now lack substance. But there are so many more games being made and so many more players compared to 10 years ago that I'm probably biased. I still think simplicity vs function is a tough problem with short term and long term pros and cons.


What's with the chess pieces setup?


It's his game Really Bad Chess. The game is similar to a normal chess game, except that instead of the AI getting harder as you advance through the game, the AI gets better pieces (and you get worse pieces).

It's a fresh take on chess and is well worth trying. You end up ranking to a level where every game is challenging.


tl;dr Consider designing games that follow the "three reads" design strategy.[0] Which is to say, match presentation emphasis with import. ex, internet browsers contemporarily hide our menu bar because it is relevant less often than the great big dom rendering I asked for.

[0] https://www.canva.com/learn/typeface-fonts/ (warning, js heavy scrolling)


with gems around like mini metro, strategery and mushroom 11 the choice of using this game seems like advertisement. the moment you need bars text and info panel you can't really claim a game is understatable 'at glance'. heck even the article say the game has three interpretative layers!

compare and contrast: getting over it, freeways, tsuro.


Certainly not an article I can understand at a glance though, tiny fonts in one narrow column on my desktop (FF).


If only there were some way to zoom in with a browser...


Right, still a borderline unreadable article about design makes me second guess the value in it.




Join us for AI Startup School this June 16-17 in San Francisco!

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: