I admit to be an impulse buyer, even with games. If you package a crappy product nicely, you’ll get customers but you won’t retain them for long. This is true with anything, not only games nor cars. Graphics and layout of a game are most important, even the smallest detail of placing a button in a specific location your thumb can easily reach would make a difference. But, this article will discuss an outline of a game, not the layout (sometimes refereed to as wireframe). It is easy to get sidetracked unless you distinguish withween outline and wireframe. Naturally, at the start of a project we think how it would look like or how cool it can be, which of course is important. Indeed a crucial part of the development process. Also, how a game is marketed (in the App Store) affects our buying decision. First, the icon attracts us, then the screen shots, and only then do we give attention to the App Store actual text description (statistically this is the case in 90% of the time). However, we are not at the stage yet of designing the game nor how it is presented in the App Store. Sure, you can start with a layout and then figure out the features to implement, only to find out you overdid it. In one of my blog previous posts I mentioned that I will be emulating a game (see below). If you emulate a popular game, there is no reason to re-invent the wheel – just follow the features and layout of that game, with few exceptions (graphics of course, and added features to give your gamers a better value over the game you are emulating). I will start this article with how to approach the topic of outlining if I were to design a game from scratch, not emulating which I’ll address later in the article and of course point to you what I am doing when emulating a game. Ok, enough with the introduction!

Writing Down

So, take a piece of paper, a pencil and sit down! Think of what you want the user to see in term of functionality when the game first launches. Don’t bother yourself with placement of buttons or anything else at the moment as this relates to layout, just concentrate on the features in the first screen the user sees after game is launched. One example would be a ‘Play’ button (duh!), access to ‘Game Center’, and more.  To get a list of features done efficiently, launch a favorite game and see what it offers. Take a look inside the game Angry Birds:

Angry Birds

Let’s analyze Angry Birds‘ main menu outline. These are the features as shown in the screen shot above (listed from top to bottom, left to right):

  • ‘Play’ button – to start the game.
  • ‘Available on the App Store’ button –  linking to Paid version of the game in the App Store. Common method of promoting a paid version of a game.
  • Settings button (shaped as mechanical wheel) – provides access to adjust sound and info on the game.
  • Leaderboards button – opens Game Center Leaderboards.
  • Achievements button – opens Game Center Achievements.
  • Additonal button (shaped as a triangle) – provides access to game’s Facebook page, Twitter & YouTube video. PRO TIP: Implementing a YouTube video inside a game is a nice trick to increase the volume of views in YouTube, which ranks the video higher in search engines.
Pretty simple and the layout is not ‘busy’ which is important. In all, the main menu basically presents us with only 6 features (!). Simple rule to follow – less is more. Clean menu screen is attractive and the user can navigate quickly through menu screens. Rovio (Angry Birds developers) could have placed a Twitter and Facebook icons in plain sight, but instead decided to ‘hide’ them behind the ‘More’ button. Seems as this works better in this case. Rovio, now a large successful company, has tested and continues to test features including placement on the screen. Keep modifying the layout can attract a higher volume of clicks. There are several ways to track whether a position of one feature get clicked or not using services implemented into the game during the coding phase. Such service is called Flurry. More on that later.

Implementing ton of features in main menu screen and/or other screens, will increase development cost – the more you integrate in the game, the more money you’d spend and, most likely, time. Some of the extra items you want might be really a minimal increase in cost, so no worries there, and sometimes a developer won’t mind doing this for free for the sake of establishing a long term relationship. I would recommend NOT to incorporate in the game all of your must-have’s. Start with minimal features. If game picks up and shows good feedback, it would then justify updating with added features. By the way – did you know that Angry Birds is a copy of another game Crush the Castle? Rovio just executed the game better, with better graphics/sounds, and succeeded to achieve world wide success (and ton of revenue of course).

Now, in my opinion and based on some experience I acquired since I began development, keeping the main menu screen as simple as possible is key. Here is another good example of the game Line Runner:

Line Runner

Following the formula of keeping it simple, there are only 5 features as shown above:

  • ‘Options’ button.
  • ‘Tutorial’ button.
  • ‘Hiscores’ button.
  • ‘Play’ button.
  • ‘More Games’ button. This opens a screen to cross promote the developer other games. A very common implementation that increases your user base which in turn increases revenue. Some advertise other developers’ games and earn revenue from that. More on this later. Rovio is cross promoting their games in the middle of the game, either after a ‘Pause’ button was pressed or when progressing to higher levels.
Interesting that in Line Rider the ‘Play’ button is placed at the lowest portion of the screen. I will normally place it at the top portion of the screen, as the user usually ‘scans’ the screen from top to bottom and most likely taps on the ‘Play’ button faster. In Line Runner, the layout works better as the thick black line separates the ‘Play’ button from the other ones. Sorry for talking about layout again, but I think it was important to mention this. PRO TIP: If you place the ‘Play’ button in a prominent spot, the player will most likely start to play quicker after the game first launched. Statistically you retain gamers better if they start playing the game in less than 20 seconds after they first tap the game icon in the Home screen.

Ok, one last example. Here is Plants vs. Zombies:

plants vs zombies

So what do we have this time?

  • ‘Adventure’ and ‘More Ways to Play’ – these are basically the ‘Play’ button.
  • ‘Leaderboards’ – opens Game Center Leaderboards.
  • ‘Achievements’ – opens Game Center Achievements.
  • ‘Help & Options’ – similar to Settings/Options/Info in previous games.
  • ‘More Games’ – same as ‘More’ in previous games.
See a pattern across the 3 examples given above? These popular games do not welcome the player with ton of features, they keep it simple to the most useful features. We can basically summerize a list of features as follows:
  • ‘Play’ – to start a game.
  • ‘Game Center’ – opens Game Center, Leaderboards and/or Achievements.
  • ‘Help/Tutorial’ – help the user understand the rules of the game.
  • ‘More’ – showcasing other games, cross promote your own games, or other developers, earning some revenue. One of the popular cross promotion networks is Chartboost. This is another item on the ‘later on this’ list…

Now it is your turn to come up with an outline for a game. Need an idea for a game? Check my previous post. If you are a gamer, select 2-3 games you’ve played on your mobile device, and write down a list of what features each game has implemented throughout all of its menu screens. We are not here to re-invent the wheel just yet. Emulate what’s working for the popular games as there is definitely a formula used. After you completed your notes, compare the features from one game with another. Then, prepare a new list of features for your game. Following the games you analyzed you can determine which features shall appear at each menu screen. Again, remember that we are not yet talking about the actual layout, but listing the items that will appear in each screen.

In one of my earlier blog posts I mentioned I will be emulating a game called Roll Ball Jump. This is how its main menu looks like:

Roll Ball Jump

As you can see, the main menu offers:

  • ‘Play’ button.
  • ‘How-to’ button – tutorial.
  • ‘Options’ button – access to adjusting music, sound, etc…
  • ‘Score’ button – access game center.
  • ‘Contact Us’ button – access to email support, youtube video, website, etc…
  • ‘More’ button – access to additional games, earning revenue.
Based on emulation formula and mixing with other games I analyzed recently, this is what my current game will indicate in its main menu:
  • ‘Play’ button.
  • ‘Store’ button – adding the ability to purchase coins. This is the added feature that in theory will have an advantage over the game I’m emulating.
  • ‘Score’ button – access game center.
  • ‘Info’ button – access to a secondary screen. In it there will be the Tutorial as well as Options.
  • ‘Free Games’ button – just another word for ‘More’ button. I’m going to test and see if ‘Free Games’ attracts better to press on the button vs. a button titled ‘More’.

Hope you find this informaiton useful.