
Building games that can be understood at a glance - panic
http://stfj.net/DesigningForSubwayLegibility/
======
edmundhuber
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.

~~~
siralonso
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-...](https://www.rockpapershotgun.com/2018/03/05/into-the-breach-
interface-design/)

------
flixic
I'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
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!

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

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

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

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

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

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

------
megy
> \- 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
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/...](https://www.mobygames.com/game/gameboy-advance/advance-
wars/screenshots/gameShotId,24670/) [2]:
[https://www.mobygames.com/game/gameboy-advance/fire-
emblem/s...](https://www.mobygames.com/game/gameboy-advance/fire-
emblem/screenshots/gameShotId,82838/) [3]:
[https://www.mobygames.com/game/dos/x-com-terror-from-the-
dee...](https://www.mobygames.com/game/dos/x-com-terror-from-the-
deep/screenshots/gameShotId,12832/) [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".

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

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

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

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

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

------
rezoner
Alternative title: Building single screen casual games.

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

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

~~~
notahacker
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

~~~
jamesgeck0
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?

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

------
V-2
What's with the chess pieces setup?

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

------
Nzen
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/](https://www.canva.com/learn/typeface-fonts/) (warning, js heavy
scrolling)

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

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

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

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

