15 ms·
Building games that can be understood at a glance
- TangoTrotFox 8y agoAs 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.
- nkrisc 8y agoThis isn't about game design (rules, mechanics, balance, etc.), it's about design of GUIs for games.
- TangoTrotFox 8y agoThe interface is very much part of the design of a game!
- nkrisc 8y agoA 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.
- MattRix 8y agoThe 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.
- TangoTrotFox 8y agoThere'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.
- Waterluvian 8y agoI 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.
- indescions_2018 8y ago"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/ https://technode.com/2018/04/25/mini-game-balls-viral-wechat...
- chezhead 8y agoI 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.
- Nzen 8y agotl;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/ https://www.canva.com/learn/typeface-fonts/ (warning, js heavy scrolling)
- rezoner 8y agoAlternative title: Building single screen casual games.
- pvg 8y agoNeither Into The Breach nor Hearthstone are 'casual games'. Getting them to be work almost entirely on a single screen is a UI design achievement.
- baud147258 8y agoI 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.
- pvg 8y agoIn 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'.
- MaikuMori 8y agoThis. 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.
- flixic 8y agoI've designed and built a quite popular game called ∞ Loop (http://loopgame.co 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.
- amputect 8y agoOh 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!
- flixic 8y agoThank you for the kind words, really wonderful to hear!
- ghostbrainalpha 8y agoThis 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?
- flixic 8y agoVery 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.
- ryanx435 8y agoJust 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.
- talkingtab 8y agoOne 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.
- deleted 8y ago[deleted]
- a_imho 8y agoCertainly not an article I can understand at a glance though, tiny fonts in one narrow column on my desktop (FF).
- alexandercrohde 8y agoEh, 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.
- georgeecollins 8y agoI 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.
- alexandercrohde 8y agoWell 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.
- moogleii 8y agoHe 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.
- edmundhuber 8y agoI 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.
- pvg 8y agoDo 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.
- kirkules 8y agoWould 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.
- siralonso 8y agoThe "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-interface-design/ https://www.rockpapershotgun.com/2018/03/05/into-the-breach-...
- btbuildem 8y agoGood read (via Mercury Reader, anyway) -- the concepts apply beyond games, to UI design in general.
- LoSboccacc 8y agowith 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.
- V-2 8y agoWhat's with the chess pieces setup?
- MattRix 8y agoIt'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.
- megy 8y ago> - 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
- slavik81 8y agoInto 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/screenshots/gameShotId,24670/ https://www.mobygames.com/game/gameboy-advance/advance-wars/... [2]: https://www.mobygames.com/game/gameboy-advance/fire-emblem/screenshots/gameShotId,82838/ https://www.mobygames.com/game/gameboy-advance/fire-emblem/s... [3]: https://www.mobygames.com/game/dos/x-com-terror-from-the-deep/screenshots/gameShotId,12832/ 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".
- Kagerjay 8y agoThe 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.