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!
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:
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.
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:
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.
Ok, one last example. Here is 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.
- ‘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:
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.
- ‘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.