Last week, we launched our first big game, Tumble Panda.
Instead of spending lots of money on marketing, we are using a percentage of our earnings to support the environment.
When creating a game, the About screen is probably the part of the game that is given the least effort. It does not give much benefit to the gamer and usually consists out of information such as credits, licenses and privacy information. However, it is still part of your game and should therefore be a nice part of your software with a pleasant user experience and a design fitting the rest of your product. With our Game Tumble Panda, wie again went with an iterative approach and tried three different types of About screens, which I want to show you and discuss the good and the bad sides of. But before, let’s take a look at what you need to think about before building your own about screen.
Depending on how much stuff you want to put in your about, you might want to chose its placement. Angry Birds for example uses a little info-button in the settings drop-up-menu in their starting screen, an approach that many seem to like. For us, we decided to make the about accessible via a button on the main menu, which is not hidden but smaller than all the other buttons (see this article to see the size of our “About”-menu-button).
Once you know about your content and the navigation path to enter your about, it is time to select a design. For Tumble Panda, we tried three different types of designs, of which the first two are the most common ones.
This one is pretty obvious and suitable most of the time. In the beginning of the Star Wars movies, and in the end of most other movies. In popular games such as Angry Birds, it is used in combination with buttons that scroll up and down and when you finish reading the credits, you can even find a bonus in the form of a golden egg. This works pretty well for most basic stuff and if you want to do it quick and unspectacular, it is probably the way to go. Since we didn’t want to spend too much time on the about this also was our first approach which looked like this in an early version:
However, we found this didn’t quite fulfill what we wanted. It didn’t really suit the rest of the game and it would make using functionality like entering a promo code a hassle since one would have to wait for the right button to appear on the screen in first. And since promo codes are usually given to people you want to review your game, making this process as easy as possible is what one should be striving for. So we decided to try something different.
Our next attempt was to create a buttons-and-dialogs version, which can also be seen in many games. Especially if you don’t want to have a complete screen for your about, a little popup dialog can do the job. For us, we need a bit more than one entry point. We came up with three main buttons which would each open a dialog which would then provide more details. In addition to this we had two social media buttons and, of course, an access to sign in and out of google play games. Our approach looked like this:
Six buttons (phew, that’s a lot!)! The “Credits”-button would lead to a dialog containing credits, licenses and so forth as a scrollable view. “Support” would bring you to a dialog which included buttons such as “Contact” and “Privacy”, and “Promo” was just responsible for showing a dialog for entering a promo code. Way too complicated!
Now that we had tried this two solutions, we decided we had to do both, an approach which I haven’t seen yet:
The screen was now divided in three parts. On the left are scrollable credits, in the center all important buttons. On the right are social media buttons and a mandatory google play games button, plus some empty space. “Contact” would fire an intent with some pre-defined text to our contact e-mail address. “Privacy” and “License” would open a web page and “Promo” would show a dialog.
We decided to stick to this concept since we had the impression that this would easily let the user realize what every column is about. The center buttons make it clear they are clickable and the credits are recognizable as such, since they are scrolling all the time. The signs for Facebook, Google+ and google play games are easily recognizable since they are all well known brands.
After we decided for the concept we wanted to take, we did one more iteration on the design side. The separators in the scrollable credits where replaced by margins and handdrawn highlighters for the different sections. We also changed the background scenery from the cherry blossom towards two Panda-kun and Panda-chan enjoying the full moon together.
In case you were wondering, the dialogs, which are plain Android dialog fragments, were designed to fit the game and look like this:
The take away from this article is: Every part of your game matters. Of course something as infrequently visited as the about should not need as much time as your main or level select menu. However, building an about screen in a totally loveless and/or unfitting way (e.g. using plain Android dialogs like Temple Run does when asking the users for rating) really disrupts the user’s experience of a game. Probably the scrollable credits or dialog version will suit your game. If not, it’s time to experiment.
I would be really glad to hear your feedback and thoughts. Please feel invited to share them in the comments.
When creating a game, the in-game store or shop is one of the most critical parts of it. It is the part that has the tendency to be the least fun for the user but is the most crucial for the developer. Without a shop, most in-app purchases won’t happen in your game. This is why, even though it may not be fun, a developer should pay close attention when building up his shop. For our upcoming game, Tumble Panda, we put some effort and time into our shop and went through some iterations. With this game as an example, I want to show you how you can build a nice store.
First, you might want to identify critical criteria for your game’s store. As for us, we worked out the following points. Now, as I’m a lover of simplicity and like having one screen doing one thing, I like to also have a more minimalistic design, for example with rather big instead of many buttons. Of course, this criteria may vary from individual preferences and from game to game: Our biggest point was that it should be easy and seamless to use. This is a very soft formulation, so soft, that it is probably a criteria for every app ever specified. This is why, from this starting point, we worked out six other, more specific points:
Furthermore, in order to keep it easy for us, and since we would need to experiment a bit to create a balanced variety of goods, we wanted to have the content easy to configure.
Once the soft and hard criteria for your game are done, you should start implementing according to them. You will probably go through some iterations in which you will experiment, test and refine your shop more and more. Usually there area many ideas in the beginning, so it is probably the easiest to simply start implementing analog by sketching your shop and its transitions first. Here is how this looked in our case:
From the number of screens, your store will probably look somewhat similar. A screen to purchase items and a screen for purchasing your in-game currency with “real” money are the vital parts of it. Then it is time to test and try out.
First, we thought about a simplistic design that would show all the items we offer represented by icons. Once the user clicked on one of these items, he would be taken to the next step of the shopping procedure in which he would see the item’s details, like description and price, a bigger image of the item and confirm and cancel buttons.
When testing this approach, we found that the initial display of small icons for all the items and details to them on click was simple, but only on the first view. Because for the user to find out about the different items, he would need to click on each, read through the description and then click on the next item. We had a trade-off between a simplistic design and a simplistic user interaction path.
This was the reason why we decided to go with a design that displays more information, which can be positive but also negative. We decided to put our items in two categories which can be accessed by tabs. For the item’s representation, we chose lists:
This changes are the reason why it is important for you to chose a method in which you can quickly test rough concepts and ideas, like just sketching them first, then implementing a basic version and putting the final finish only in the end. This way, major changes will be less pricy when they appear on this stage. Imagine you implement your complete store and then realize you sticked to the wrong concept and need to implement the whole UI interaction again.
You need to as well talk to your users and have your different ideas tested. Then implement changes, based on your user’s feedback. In our case, the testing team consists of a mixture of employees, friends and relatives which span from the age of 7 to 52. This test-team should be not too big and fast in making responses so that you can really have a process of showing your work, receiving immediate feedback, improving upon this feedback, and showing your work again.
Once you decided on the basic way your store’s design and interaction works, it’s time to go over the smaller parts. It should be a set of iterations with continuous improvements, followed by tests, followed by the next iteration.
Here is an overview over the various iterations we took on our store. As you can see, we sometimes only did small graphical changes, trying to improve more and more. Then, in the end, we gave it the final touch and it is now in the state in which it will go into the beta testing phase.
When you look closely to the changes we made, you may notice that not only the graphics changed, but also the content of the store. In the process of development we found out, that some of the items we thought would be good to have in our store weren’t but others were.
The items in a store should be useful and affordable enough to make some of them easy to purchase, but not cheap enough to buy through the game without making real money purchases. The prices of your store and your virtual currency determine the value you give to the user’s time. If you for example give up to 50 gold coins for a level for which the user needs 2 minutes to play and offer 1000 gold for $0.99, that would give the users time a value of $0.02475 per minute. Obviously this value shouldn’t be too high nor insultingly low.
Furthermore, the items in your store should provide some use to the user. In our case, we created two categories for Tumble Panda, items that are consumable and which can be used once and need to be re-purchased, and items that improve the protagonist’s power gradually and stay forever.
To balance your content well, I recommend to do some more iterations with your Alpha-testers, track their behavior, for example with Flurry (we use this one) or Google Analytics, and ask them for more feedback.
In the end I hope we met all the criteria we specified. Some things may still need adjustment, but the beta phase will show.
Besides a clear set of criteria to measure against, consecutive iterations with a set of testers involved are crucial to creating the store that not only you but also your users love. Personally, I also like to break the content down to the essential elements with every screen being responsible for exactly one thing, while keeping buttons and touch areas big, since the store is designed for a mobile device. The store of Temple Run for example really appeals to me, since it has all the stuff in one place, while items are still clearly grouped using separators and the user does not need many clicks to purchase an item.
I’m interested in unconventional and great ways of implementing stores and monetization systems. If you know any, please feel invited to share in the comments.
P.S.: We are looking for beta testers for Tumble panda. If you want to join, please let me know.
Let’s say it’s a hot summer day and you need to use one of the two USB-connectors of your Macbook Pro for a fan, while the other one is occupied by your keyboard. Time to turn on adb access using TCP and your local wifi-connection. Here’s how:
1. Connect your device using a USB cable.
2. Assign the port your device should use using the ‘adb tcpip [port]’ command.
3. Discover your phones’ IP-adress.
4. Connect to your phone using the setup port.
And you are done. When looking at your device list now, you will find your device using the USB-connection and your device using your Wifi-connection. Now you can unplug and use your USB-port for other important stuff.
If you want to end your connection again, use the ‘adb usb’ command.
This was tested on a rooted Nexus 5 and a non-rooted first generation Nexus 7.