Search KoopaTV!


Wednesday, March 2, 2016

Interactive User Interfaces... Helping You LEARN!

By LUDWIG VON KOOPA - Is this a lesson I could apply to Capture the Confederate Flag?

You know, at every opportunity you can get — and there's a lot of opportunities out there thanks to how great and open the game development community is — you ought to read developers' experiences making their games. A lot of the time, especially for smaller developers, they're pretty happy to just tell you their stories. They do this not only 'cause, hey, stories are great, but also so fellow developers can learn and we can all make better games together. They're called postmortems.

Juicy Beast Studios, the maker of Toto Temple Deluxe (available on the Wii U for $10!), failed to really make a profit on releasing it for all three of the Xbox One, the PlayStation 4, and the Wii U. I didn't help that since I didn't buy the game either, but that's besides the point. Their developer didn't have any Miiverse presence, so honestly, I didn't even know Toto Temple Deluxe existed or anything about it. I... don't really actively check the Nintendo eShop in my spare time. Maybe I should. I hear it has awesome music.

“[W]e weren’t really able to get a featured spot on any the [SIC] storefronts, except for Nintendo who actually featured us on both the American and European front pages. Thanks Nintendo!”

The game is multiplayer-only (besides bots), up to four players. It's frenetic and exciting. You control your character to get the goat first and keep it away from the other players. Here's... not quite the trailer, but it's more informative, better, and way more-watched than the launch trailer:

(...Hm...TotoTV is a KoopaTV competitor.)

There's something really interesting about how the user interface was developed, though. Juicy Beast published an article on just that here, and I'd like to delve into that and use Capture the Confederate Flag as an example of the design philosophy at play... or, to be accurate, what I SHOULD'VE considered when making Capture the Confederate Flag. (I won't patch it now or anything, though.)

So I'll just assume you read Juicy Beast's article about “Designing a ‘Playable’ UI That Secretly Teaches You How to Play”. They go in awesome detail about their iterative process for designing the selection screens before the player actually begins playing the game. You play as the character using about the same controls as you would during normal gameplay. Basically, you're not just selecting your options on a menu at the start screen like you would currently do in Capture the Confederate Flag, along with Trayvon Tyson's Punch-Out!!, Mega Man 2, and nearly every Nintendo game.

This screen is to confirm how many players there are! You need to use the actual in-game controls!
The screenshot is from their Press Kit.

The closest to a Nintendo playable UI that immediately comes to my mind is Donkey Kong Jungle Beat and that's pretty much cheating because you're playing with the DK Bongo controller — so everything you do is kinda a playable action. Your menu selection screen is still selecting with a bongo-controlled cursor and not Donkey Kong, though.

For an illustrative but minor difference between a playable UI and a selective one, take Kirby Super Star Ultra. In sub-games The Arena and The True Arena, Kirby gets to pick a power-up by climbing down ladders/going up elevators and touching a Copy Pedestal/Copy Essence. So you're actually playing as Kirby using in-game controls to pick how you start, which could've easily been done in a menu. That's exactly what happens for the sub-game Helper-to-Hero, where the player picks from a character selection screen which helper they would like to play as. (The screen also shows your time records when you scroll over that character, and if you've completed the mode with that Helper yet.) After confirming, the player gets to start fighting and play as that Helper. Of course, up to that point, the user interface in Kirby Super Star Ultra wasn't playable anyway since the player uses a cursor to select what sub-game they would like to play.

There's plenty of examples outside of Nintendo, though. Juicy Beast's other examples are Braid and Antichamber. They submit that their UIs are done to preserve immersion, not necessarily teach anything.

So, Capture the Confederate Flag. Funny thing, is that I already wrote an article detailing the process for how the title screen for Capture the Confederate Flag was made, with the goal of it to get players to read the in-game instructions first. At the title screen, players control not the main protagonist, Robert E. Lillipup, but an orange box that fits snug around either the Manual box or the PLAY! (start the game) box. The instructions tell you what keys do what (it's literally just the arrow keys and the spacebar for the entire game — and the title screen's orange box is controlled with the very same arrow keys and spacebar.)

What if we took the lesson from Toto Temple Deluxe and redesigned how the title screen worked? So it's interactive and not just a generic selection? Here's what it might look like (NOTE: these are all doctored screenshots and do NOT represent what the game actually looks like!):

So what if we had Robert E. Lillipup right there and you played as him?

Compared to the real title screen, Robert's sprite is present. There is no orange box. There are two flag masts, one for PLAY! and one for Manual. The title screen no longer tells you to use Spacebar to select, and the Arrow keys to move now have the up and down arrows since you'll need them.

So the objective in Capture the Confederate Flag is to find the flag sprite (it's in Washington D.C. every time, and that's made pretty clear), touch it so you're carrying the thing, and then find a flag mast (there is one in each state's capital) and touch the flag mast while you're carrying the flag. Rinse and repeat for every state. Along the way, you're rescuing damsels, defeating terrorists, and evading a wrathful witch. You're also learning about the Southern USA.

Robert moved down to the flag sprite and is now carrying it! Sprite change!

Players had trouble understanding the concept of getting the flag, leaving Washington D.C., and then moving to a flag mast. Some players in beta-testing thought that once you grabbed the flag, you win. Some thought that once you grabbed the flag and placed it in one state capital, you win. I don't understand the thought processes of either of these players — why would I bother programming in eleven states if you only had to interact with one? So forcing players to understand this basic mechanism in order to even start the game would be cool, right?

(Unlike me, who would say in a postmortem that my players are all idiots and that my designs are perfect, Juicy Beast was actually humble in their postmortem and blamed lack of player understanding on the developers, or themselves.)

Once flag-carrying Robert touches the PLAY! flag mast, the game would start!

As depicted in the three screenshots above, I can see some flaws with this approach. For one, the player's finger never reaches the Spacebar. They could go through this and not know that Spacebar is how you attack things. (Assuming they never look at the Manual.) Before, you wouldn't know that either, but at least it was used to start the game so you get the impression it might be important and the “action” button.

Two, if I saw Robert and figured out he's my controllable character (it says “Arrow keys to move”, and he'd be the only thing moving if I used arrow keys), I'd think the flag sprite is as much part of the background as the logo — and ignore it. I'd go to the “here” flag masts and wonder why nothing was happening. I mean, the flag sprite is only based off the Confederate Flag. You might not put two-and-two together that you need to grab the flag (which doesn't even look like a flag and isn't even proportional to the empty space the “here” inhabits in the mast) and then bring it to the mast.

(That's why, by the way, in the actual game the masts only appear in the states after you grab the flag from Washington D.C. And in the final version of the game, the narrator tells you you're not done after one state.)

Unlike Toto Temple Deluxe, which apparently has relatively difficult controls to learn (I mean, they don't LOOK difficult. At all. It's literally two buttons and a control stick and you use them in combination.), the controls were never the barrier for newbies to understand Capture the Confederate Flag. That's arrow keys (or a directional pad) and one button, and you don't even need to press a direction and the spacebar at the same time or in a sequence. The relatively difficult part for people to learn is what exactly do you do.

The playable UI, or at least in the way I came up with it represented above, wouldn't help players with that part. For Toto Temple Deluxe, I think it works elegantly. Juicy Beast let their readers know that not every game needs or should have a playable user interface. Point taken, but I think it's fascinating all the same.

Props to 'em, and good luck on your future projects Juicy Beast Studios. Maybe for KoopaTV's next game, we will try to design with this kind of philosophy from the outset?

You may not believe it looking at KoopaTV's awful layout and design, but user interface and user experience are areas that Ludwig has interests in. He hasn't explored them anywhere near to his satisfaction, but he thinks they're fascinating subjects of study and he'd love the opportunity to dive deeper into it. Do you have any ideas for making Capture the Confederate Flag's user interface better, and are they worth patching the game? Alternatively, do you have any ideas for any other games with a non-interactive interface that you believe would benefit from one? Share your thoughts in the comments! ...And maybe buy Toto Temple Deluxe if you have local multiplayer friends.


  1. What do you think of tutorial levels? An example being the first localized Advance Wars title which has a tutorial mode which in earlier levels tell you where to move, point out things, etc. that you can easily skip if you are a veteran player so as to not annoy returning players with what they already know but help newbies if they need the tutorials.

    1. I think tutorial levels are great, but inferior to the potential that other methods have.

      If I recall correctly, "Field Training" is necessary to actually play the campaign and it's not skippable. And for the actual campaign, they still kinda tell you what to do for a bit.

      Now, I don't think Advance Wars would do much with a Playable UI kind of thing because the gameplay is literally point and click anyway. The controls aren't complex, but the mechanics are.

      You could have something totally arbitrary like you're an Infantry and each menu selection is represented by a Building (with a different colour) and there's a capture animation as you select a menu option. ...But that's pretty trite.

      Some tutorial levels are very immersive and well-done, like the Mega Man X Central Highway. Others basically take control away from the player as an NPC or the interface just tells you what to do.

      Donkey Kong Jungle Beat only has control icons pop up on the screen if you just sit there clueless and waiting and not rhythmically doing things for the first few levels/levels with unclear mechanics. I like that better than some other things, since you have to "prove" to the game that you're a newbie.

  2. Just play the last level of Field Training to go on to the main campaign and you don't have to play any of the earlier ones. Of course the game does not tell you that and it has to be discovered on your own so points off for that.


We embrace your comments.
Expect a reply between 1 minute to 24 hours from your comment. We advise you to receive an e-mail notification for when we do reply.
Also, see our Disclaimers.

Spamming is bad, so don't spam. Spam includes random advertisements and obviously being a robot. Our vendor may subject you to CAPTCHAs.

If you comment on an article that is older than 60 days, you will have to wait for a staffer to approve your comment. It will get approved and replied to, don't worry. Unless you're a spambot.