carrotcake Blog 🍃

official devlog for carrotcake written by Louis Durrant

Thursday Report: Lets Get an Overview.

Posted on Sep 26, 2019

Continuing on our theme, “the best UI is the one you never notice”, my original philosophy for The Garden Path was for the game to feel absent of any UI. Inventory, dialogue, and so on, would be represented as floating points that exist in the space of the game’s world.

This has, over time, moved away from being a core philosophy to being an anchor. It’s what I’m aiming for, and I think by grounding myself with such an anchor in mind, even though applying it might be impossible, I can at least make decisions to shift closer to that policy.

As I’ve introduced and fleshed out more features, it’s become increasingly difficult to maintain that original philosophy. I’ve so far conceded in four areas.

The ‘You’ve Unlocked A Star’ notification is a necessary evil to overcome an even greater evil. My original concept, in accordance to this original philosophy, was that each time a player unlocked a star, control would immediately be taken away, and the player would have to watch a short cutscene of the star being unlocked.

What the notification allows is for players to decide when to watch this brief cutscene at their own pace. The nature of stars means they could be unlocked at any moment, and it’s important not to remove the player from what ‘flow’ they are in by rudely interrupting them.

The first few stars also act a kind of tutorial, suggesting to the player what goals they might assume, and how the stars function. With newer player seeing more stars, it’s important not to give the first impression that this is a game that likes to stop you in your tracks, and constantly away control.

The second UI is the item collection notifier, as we discussed last week. With the removal of item litter, this notification becomes unavoidable. But, even with item litter, I was straddling a dangerous UX line by not including this.

The obvious alternative is having the item itself appear to fly toward the character, into their inventory. Details like this are easily missed however, or items may be mistaken for other items. With no text, and only a moment to identify a very small, fast moving icon, it becomes a real challenge for the player. A nice large icon ensures that knows exactly what they’ve collected, and aren’t scrambling to their inventory, trying to figure out if their seed count has gone up from 36 to 37.

The third is the clock. While the other two are only on the screen temporarily, the clock is a permanent addition to the screen. But, ultimately, if one thing should break the rule, it should be the clock. As the game is bound to real time, it’s important the player has easy access to knowing the time. It’s also nice to give the players an idea of how long they’ve been playing, and what time it is in the real world.

The final is what I’ve been calling the ‘overview’ menu. It’s nothing special, but it’s essentially the game’s menu. You know the one, where you can look at your equipment, see what you’ve unlocked, change the game’s settings, and so on.

To briefly go over my previous design decisions again, the very first concept for this was a sort of card that would appear on the screen. It was a little clunky, and looked pretty ugly, but I felt it made sense at the time – since a ‘card’ feels more like an object than a more abstract menu.

I scrapped the general idea, and moved over to a full screen fade. This looked much prettier, at the sacrifice of being essentially a completely abstract menu. At that stage, I felt it was worth the trade off, if this was going to be the only abstracted menu in the game.

But it didn’t quite sit right with me still. It felt like I was trying to do something too sophisticated, when really I wanted something crunchier and more grounded. It pulls you out of the game world and reminds you that you’re playing a game on a machine.

Instead, I thought perhaps the menu could appear like a page in a book, that opens over the screen. And while originally I designed the menu to be simply black and white to fit the theme of a printed page (no icons, just words), it was missing the richness and fun of a fully visualized menu – so I struck a compromise.

Most importantly, I recently implemented what I believe to be the most important feature of this menu: you can still play the game while it is open. While previously I still had my doubts in the design, by reworking parts of the game and making this possible, it cements in my mind that it’s here to stay.

This also brings with it and interesting solution to a problem I had been trying to work out for some time. If the player wants to learn more about an item that they have equipped or is in their inventory, where do they see this information?

While most games that use a mouse and keyboard solve this by having an information box appear and follow the user’s mouse (see Stardew Valley, World of Warcraft), games that focus on a controller usually have a shared, static space where information about the highlighted item is displayed (see Hollow Knight, Breath of the Wild).

I knew I was bound to the latter, but as the player inventory and overview menu are two very different menus, two separate shared spaces seemed inelegant.

Instead, I feel confident that by having the overview menu accessible at anytime with a single press, having just one shared space housed in the overview menu with seem like a natural place for players to go to if they want to learn more information.

For instance, if a player is trading with a traveler, and they are unsure what it is the traveler is selling, opening the overview menu will allow them to instantly read more information in this shared space, and also give them access to their current equipment, should they wish to compare.

It’s a slightly unusual way of doing it, one that I’m unsure I’ve seen elsewhere, but it’s what I’ll be sticking with for now until I begin player testing.

In theory, this all means that there is only as much information on the screen as the player wishes, or as is necessary. With a few sound effects and animations, bringing up any further information should feel like flicking to page in a favourite book.

That’s much nicer than a glossy piece of UI.