07 May Momonga Monday: The New Retina Interface

In our recent Interface Design Tutorial, I mentioned that the interface was getting a complete makeover. With the retina interface for the new iPad, we had to do the whole thing over again (always use vectors!) and while we were at it, the interaction designs were not so good to start with. So we went back to the drawing board and redesigned the whole thing. The visuals are now done, and while the coders are working hard to implement it, let’s have a first look at how it will turn out!

The Game HUD

The game HUD shows the player the info about the game session. In our case, that’s the number of lives left, the numer of stars picked up, and the time left for a bonus. There’s also an update bar for challenges, so you are notified when you complete an objective. Last but not least, there is a pause button that allows you to restart the session or go back to the main menu.

Here is the old design:

Not too bad, but it could be a bit better. For example, the color orange is used for buttons, but in this case it is also used for panels that cannot be clicked. We also mixed circular items and rounded corner items – not very consistent. Here is the new design:

Level Selection Screen

The level selection interface was crowded. There was too much information, and we had 14 buttons on one screen (the screenshot below doesn’t show all levels). For an iPhone interface, my rule of thumb is to have 3 buttons on the screen at most (of course with an exception here and there). With that rule, the old Level Selection screen had almost 5 times too many buttons! I was a bad interaction designer. And it didn’t work out. So I try again.

The old design:

This shows your score, challenges with description, high scores, and it allows you to select a level. All levels are laid out on the screen and there is a “back” button (called “menu”) and a “play” button.

The first thing we wanted to do was to split all this up. We now have three different screens:

1. Chapter Selection – instead of 9 levels, we have 3 chapters, each with 3 levels. Here you only see the high-level layout of the storyline, with more room for the backdrop drawing of the world.
2. Level Selection – here we get deeper into level selection. You need to see your score and any open challenges for the level you are about to play.
3. High Score screen – no need to show all that information when you just want to play a level. This should be a separate screen.

This is what the Chapter Selection looks like:

When you select a chapter, you go to the Level Selection screen:

The superhero names are placeholders, we use them as identifiers (see this post for more info).

The bottom panel with “Life Saver” is a Challenge. It’s a bit like a quest, and can be anything from “Finish the level in 30 seconds” to “Find the hidden gem” or “Kill 600 boars and report to the chef cook”. You unlock these challenges by finishing the level, and they give you a permanent score boost if you complete them.

Victory Sequence

When you finish a level, it’s rewards time. You need to know how you did. The old interface looked like this:

That was not so bad, but again it was way too crowded. There are too many buttons, too much information. But the worst part is that people instantly pressed the “Next” button, after which the next level would start. Very efficient for speedruns, but it missed a sense of progress.

Players also failed to understand how their score was built up, and every single player we tested it on missed the point of “Challenges”. And because Challenges are essential for replayability, we needed to pimp this victory screen. But how do you feed the player all this information?

The answer is to give little bits of candy, one bite at a time.

First up is the challenge: If you complete it, that’s a big thing! You did great, and you are awesome. You get medals. A score boost. Maybe even a badge! There’s progress, there’s victory. It’s important, so it comes up first.

If you didn’t complete the challenge – no worries, we simply skip this screen.

Then we start the regular score sequence, which has three parts:

• A counter for a specific “building block” of your score, for example how many stars you collected
• Your total score (this counts up as we continue)
• Your stars (also counting up as your total score increases)

The whole thing will be animated, Momo will be on the screen, and it should have a general sense of pleasantness about it. It looks like this:

First we start with the base score giver: the stars. We then continue with the time bonus:

Then there is a bonus for any lives you have left:

And last, but not least, there is a bonus for all the challenges you have completed for that level:

All this adds up to your total score, and you get a maximum of 3 stars for the level. The interface will be animated and players can skip by touching the panels. There is a convenient “Restart” button to try again, and you can check out your high scores while you’re at it.

We removed the “Next” button that skips directly to the next level. We want players to take a step back and see where they are in the scheme of things. So the new “OK” button takes you to the Chapter Selection screen, showing your progress. It will slow you down a bit, and it’s a couple more taps on the screen, but I believe it will be a better experience nonetheless.

In-Game Dialogue

There will be a story in the game, and the characters will be talking to each other. This dialogue needs an interface. Here is the design for that:

Sweet and simple – no fluff, nothing special. We have a cutscene, a character icon, and some text. The only thing I want to note here is that we give the text room to breathe, and we will only show one line of text at a time. This forces us to keep the whole story supercompact and easily digestible.

That wraps it up for this Monday! What do you think? Is it an improvement? Any suggestions to make it better? Let us know in the comments!

Cheers,
Derk