Iterations

In this post I’m going to show steps that I went through when I was designing the Select Level screen. It discusses the value of iteration, how it affects design and how it helps to improve game experience.

List vs grid

As I’ve started working on level selection screens I had to decide which layout should I use. Initially, I wanted to make scrollable list, just like in Portaball or Trainyard. The problem with lists is, it doesn’t provide full disclosure at quick glance. Recognizing which levels are completed and which are not requires an action i.e. moving finger across the screen. A rule of thumb for data presentation is to make it accessible and clear instantly, thus I started opting for a grid layout. I quickly launched most popular games out there and all the big guys (Angry Birds, Cut the Rope) are using grid layout. Finally, Punch a Hole uses board as main game element. Utilizing similar concept for other screens felt natural.

First Iteration

Originally Punch a Hole didn’t include stars. Once you’ve finished level you were done so there were supposed to be 3 kinds of level state – completed, unlocked and locked. I color-coded those states with typical notation: bright color means good, dark color means bad, and color in the middle means undecided. To make it even more obvious I included a legend. Then I had this great idea – let the Set Selection present information about progress as well! Each Set rectangle would be a shrunk version of its respective levels colors. As you can see in the picture, the shape of “white”, “gray” and “black” elements matches both in small and large version.

First iteration (ignore repeating level numbers)

Second Iteration

As usual, I wasn’t entirely happy with the design. It didn’t look that great on the screen of iPhone. Additionally, the legend was bugging me. If an interface element requires description – it’s wrong. I ditched it and replaced squares with little circles – I wanted to make design cleaner and hoped it would somehow be more understandable. I’ve highlighted unlocked levels and removed “soon” set. Although many games contain “more levels soon” and I still intend to add more level sets in future, this additional element was useless.

Second iteration

Back to squares, now with some color

Five minutes after I’ve carefully positioned all the circles I knew I didn’t like it. I returned to squares. It looked good, but I still wasn’t sure if color-coding was obvious. It is considered good practice to put emphasis on elements that are more likely to be used. Unlocked levels were such elements and they were presented in dull gray. I decided it’s high time I made a breakthrough and I added yellow! I’ve also started experimenting with ticks to mark completed levels

Third and fourth iterations

Making it more tappable

The problem with previous concepts was they didn’t feel interactive. I wanted to change it and make levels in a tile-like shape. They were also separated to provide clear distinction – I didn’t want users to focus on their tap accuracy. Previous designs required players to pay at least some attention to notice faint lines of grid.

A couple of captions appeared – set numbers and “# puzzles solved – # puzzles to go”. The last one was actually mostly intended as space filler (there goes my no clutter rule), but it was performing some function so I accepted it mentally. Finally, I added a lock to symbolize locked levels.

Fifth iteration

Finalizing design

After I’ve implemented the fifth iteration into the game I gave it time to cool off. As days passed I was more and more sure that it sucked. Moreover, it was this time when I came up with idea of stars I was relieved to be able to dump that design and make some major rebuild. Here’s the final, in-game version:

Final iteration

As you can see I’ve taken “tapability” to the next level. I made each level and set a distinct button. I’ve made stars prominent part of the button and I’m replacing them with lock on locked level, additionally making button stuck pressed.

The most visible change is adding more colors. I love gray. Gray is easy, gray is safe. If I were better designer I would use different colors more often, but unfortunately I’m not a better designer. However, for Punch a Hole I’ve already decided to use colorful balls, wooden frame and green felt. It made me a bit more confident and thus the final design actually makes use of this theme. The wooden bar works as a separation between sets and levels.

Were all these stages worth wasting time?

Short answer: yes.

Long answer: experienced artist would make it much faster and much better, but taking my time allowed me to see what’s working and what is not. It helped me to establish interface theme for the whole game. It made me a bit more experienced.

And it was fun!