Hey everyone, it's time for another devlog, and with this, the reveal of the
new UI!
Here it is:
I've gotten rid of a lot of the UI clutter and made some space for background. I wanted to give our player something to defend and so I created a little town on the left hand side of the screen. By the same token, I wanted to show that the wasps destroy things and so the grass gets browner towards the right. I need to revamp the ground and the element sprites to have a more detailed style like the town, but I'll do this at a future stage.
I want to spend some time talking about design decisions for the new UI and my reasons for changing it at all. A little while ago, I watched an incredibly good GDC talk by Zach Gage on "Subway Legibility" (
https://www.gdcvault.com/play/1024925/Building-Games-That-Can-Be) which I can highly recommend. Basically, the idea behind subway legibility is that someone watching someone else play your game over their shoulder can understand, more or less, what is going on, at a glance. One of the ways this subway legibility can manifest itself is in a design principle called "the three reads".
Now, I've never been an interface developer, I've mostly worked on backends, but this got me thinking about the interface of my game in terms of the three reads. The basic idea is that it should take three reads for someone to get all of the information from a visual. The first read should give them the broad strokes and the most important information, drawing them in. The second should give the most pertinent details, and the third, the rest of the detail that someone might need to go looking for. Based on these principles, I evaluated my interface, and it was pretty terrible.
The biggest things on the screen are the elements, and they form the first read, so at least I got that right. But also in the first read are those huuuge arrows on the left of the screen and it's not at all obvious what they're there for. The second read is supposed to contain the most important details, but the second read here contains pretty much just the score, and the information block in the bottom left, neither of which are super important when a wave is happening. The third read contains everything else, and some of the most important information. You need to know what your life and gold scores are when there are enemies on screen so you can tell if you need to spend money.
Based on this, and on the fact that I need a more dynamic UI for the purchasable selection I wanted to build, I recreated it. Here is the new UI in the three reads.
First read:
In the first read we just have the most important stuff, the towers and the enemies, excellent.
Second read:
In the second read we have the most important details. I decided what was most important here based on what a player might need to know about
when a wave is happening. So life, yes, gold, yes, and purchasables, yes. Also, I've visually linked the purchasables to the gold as you need to spend gold to buy them.
Third read:
Now we add in all of the rest of the details, that is, all the other things a player might want to know about that aren't that important during a wave. The score, wave count, swap count, options and fast forward button.
The eagle eyed among you may have noticed that I have lost a bit of information here, that the tower information that was in the bottom left is now nowhere on the screen. Not to worry, that will be included in a contextual hover over, what Zach Gage refers to as the "fourth read".
Next up, I'll be working on actually implementing the purchasables I keep talking about
Community
