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:

Momonga Game HUD

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:

gui_hud_4

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:

iphone_screen

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:

gui_vector_chapter_select_10

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

gui_vector_level_select_challenge

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:

gui_concepts_victory_19_win_challenge3

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.

gui_victory_sequence_5_16_21

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:

gui_victory_sequence_5_171

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

gui_victory_sequence_5_181

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

gui_victory_sequence_5_191

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

gui_victory_sequence_5_20_record51

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:

gui_dialogue_31

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

gui_game_over-e1398338395432

13 Comments
  • Ricardo de Zoete
    Posted at 12:33h, 07 May Reply

    Hey guys, awesome job there! Really love the improvements so far! Would love to test them out myself one day, if possible. Seems you did a great job usability- and designwise. Keep it up!

    • Derk
      Posted at 13:36h, 07 May Reply

      Thanks Ricardo!

      You’re on our tester list so you will definitely get the chance to test it. Give us a bit of time to implement the visuals and you will be playing it before you know it. 🙂

      Cheers,
      Derk

  • Bart Enkelaar
    Posted at 13:00h, 07 May Reply

    Really cool guys, quite awesome. I love the chapter selection screen artwork, really shows that there is a world involved. Also, yay story!

    And you guys probably investigated this, but isn’t the loss of screen space an issue with the new HUD?

    Anyway, love the new score screens, looking good.

    • Derk
      Posted at 13:35h, 07 May Reply

      Cheers Bart!

      The HUD has not yet been tested in real life. We are taking a bit of a gamble with screenspace, and if it indeed proves a problem we will look for a better solution. The plan is to only show the challenge update when there is a status change, so it is only visible when there is something new to tell you. Might be confusing / crowded, we don’t know yet 🙂

      Stay tuned 😉
      -Derk

  • Lukas
    Posted at 20:28h, 07 May Reply

    The interface is so much better than before, information is more distributed in bitesize chunks.
    Must be a pain to redo though, will take quite some effort to implement. Poor programmers 🙂

    • Derk
      Posted at 20:58h, 08 May Reply

      Thanks Lukas – and yeah it’s a lot of work to redo the thing. And not just for the programmers, also for the artists. And thanks for the tip by the way – we now use nGUI instead of EZGUI, that makes life a bit easier.

  • wiedo
    Posted at 11:33h, 08 May Reply

    After your presentation last week i really got excited in playing this game.. cant wait, it looks great! (Love the cute animals, that’s always a plus!)

    • Derk
      Posted at 20:59h, 08 May Reply

      Cheers Wiedo! And if you drop by the office we can add you to the tester list 🙂

      • wiedo
        Posted at 14:53h, 09 May Reply

        I most definitely will!

  • Momonga Monday: 4 Work-In-Progress Updates | Paladin Studios
    Posted at 12:57h, 21 May Reply

    […] and Tedo are working hard on the implementation of the new interface. You have seen the interface designs for the iPhone and iPad versions of the game, and now we are making them functional. (And by the […]

  • Momonga Monday: A Challenge And A Lost City | Paladin Studios
    Posted at 12:26h, 04 June Reply

    […] have seen the GUI visuals before so I have nothing much to add to that – but when it’s all finished I will post a short […]

  • The 8-Step Guide To Interface Design for iPhone Games
    Posted at 14:18h, 17 April Reply

    […] If you want to see the results of the screens, check out this follow-up post on the new retina interfaces for […]

  • 8 Hard Lessons We Learned From Our Dev Blog
    Posted at 18:08h, 31 October Reply

    […] The New Retina Interface (May 7) – 224 views […]

Post A Comment