Building games that can be understood at a glance

http://stfj.net/DesigningForSubwayLegibility/

by panic • 8 years ago

220 61 8 years ago

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.

indescions_2018• 8 years 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...

chezhead• 8 years ago

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.

Nzen• 8 years ago

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)

rezoner• 8 years ago

Alternative title: Building single screen casual games.

MaikuMori4• 8 years ago

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.

mysterydip• 8 years ago

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.

wodenokoto• 8 years ago

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.

megaman22• 8 years ago

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.

fenwick67• 8 years ago

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.

watwut• 8 years ago

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.

LoSboccacc2• 8 years ago

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.

pvg3• 8 years ago

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.

baud147258• 8 years ago

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.

flixic5• 8 years ago

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.

amputect• 8 years ago

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!

flixic5• 8 years ago

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

ghostbrainalpha• 8 years ago

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?

flixic5• 8 years ago

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.

ryanx435• 8 years ago

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.

flixic5• 8 years ago

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...

Sohcahtoa82• 8 years ago

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.

flixic5• 8 years ago

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

talkingtab• 8 years ago

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.

a_imho2• 8 years ago

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

MattRix4• 8 years ago

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

a_imho2• 8 years ago

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

alexandercrohde2• 8 years ago

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.

georgeecollins• 8 years ago

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.

alexandercrohde2• 8 years ago

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.

moogleii• 8 years ago

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.

detaro• 8 years ago

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.

Arnavion• 8 years ago

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.)

TangoTrotFox3• 8 years ago

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.

nkrisc2• 8 years ago

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

TangoTrotFox3• 8 years ago

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

MattRix4• 8 years ago

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.

TangoTrotFox3• 8 years ago

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.

edmundhuber• 8 years ago

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.

pvg3• 8 years ago

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.

kirkules• 8 years ago

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.

siralonso• 8 years ago

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-...

btbuildem• 8 years ago

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

LoSboccacc2• 8 years ago

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.

V-2• 8 years ago

What's with the chess pieces setup?

MattRix4• 8 years ago

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.

megy• 8 years 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• 8 years ago

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".

swaggyBoatswain• 8 years ago

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.

Building games that can be understood at a glance

Related Stories