UI in Dance Dance Battle Battle

Two weeks ago Ivan showed you his beautiful Buttons, which--surprisingly--is not a sexual Metaphor. So today I will show you the process our UI went through, talk about the problems we had and the ones we still have.

To understand them you have to know a little bit about our game. It is a 1v1 battle in which you have to activate your attacks by moving around the battlefield. So for example by moving up 2 times you unlock a kick which you can now use. There is only a limited set of attacks which you can use so not every movement will count for a combo.

Now for our first layout:

Let us not focus on the ugly prototype UI and instead break it down. We have one attack button which gets activated once you complete a combo. In the top we have a combo panel which keeps track of your current combo. So if you have a combo that goes: “up down left right” you will see each of the arrows pop up in there after you perform the correct step until the combo is done.

What worked in the design: 

It is simple, so you always know what to do next: You can use one attack at a time. Attack used, ok then I better combo for the next. Ok I got my combo done let’s attack. Repeat. 

The combo Panel is fun. Seeing your moves pop up there definitely felt rewarding.

What didn’t work: 

You had no Idea what combos you could do forcing you to memorize everything. Which is definitely painful when you are talking about 16 attacks. Also it discourages exploration. Why should you even try another combo when you have to memorize them all over again. Using a completely different set would be a nightmare only the best medical students would step up to. 

The combo panel did little to help since it only showed you that your move was correct after the fact . So figuring our example “up down left right” would take a long time: Ok I go up that works, hmm then left. Ok no. Up Up. No that's not it. Up Down, ok nice then right? No? Start over again. Reading this is already annoying enough, writing it even more, and figuring it out in game is dreadful.

So now for our solution:

First let’s notice the amazing buttons and beautiful models.

Now we are cooking. We got rid of the one attack button and our combo panel and combined them into one. Notice that each individual attack now displays the next move that has to be done and not the last action. This means that after every step you take the next one that has to be done will pop up on the corresponding button. Nice! Now you can take any configuration you want and immediately start comboing. No more annoying fiddling around. There is also a cool effect that fills the button up more and more the more moves you do correctly. 

This obviously increases complexity in gameplay. Every button now tracks it’s own combo and more attacks can be executed at once. We will see how it works out gameplay wise, but for now I like it. There are also ideas how you could get that back to one attack, but that’s for another time.

However, this new design births another problem: since there is a lot more going on visually, the attention gets drawn away from the battlefield and onto the buttons. This is not where we want it! So our idea is simply.  Place them at the bottom.

This helps more than one might think. For me personally it follows a more natural pattern of looking up instead of sideways. Also you can activate them easier on muscle memory. Since this is for a mobile phone the buttons become easily reachable by the thumb. It feels more natural to hit them now and I end up only peeking down there once or twice, instead of staring at them intently. 

Now there are lots of other cool ideas floating around, but with UI there is only one way to know what works and what doesn’t: give it to some players or friends, and watch them struggle until you eventually end on something that people can use. So this is where we stop for now and start working on gameplay again. However, I am sure during designing, playing and testing it will undergo many more iterations.

I hope you enjoyed this, and I hope you will keep thinking and working on UI.

Because I fucking hate shitty UI and I bet you do too.

Simon

Bromberry Games