Droid-Blog

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.

1. Content

The content of your About screen determines its design and placement. Hence, you should think about it a lot. Should it show only credits or also your privacy policy and EULA? How about license texts? And what about Links to social networks? Some apps just show a three lines of names of names while others show a rather long list, licenses or even settings. In our case, we wanted it all: Credits, our privacy policy, licenses, social media, a way to contact us, access to signing in and out of google play games services (which is a requirement) and even the possibility to enter promo codes. Also, we wanted to list all the software we used to create our game.

2. Placement

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).

3. Design

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.

 3.1 Scrollable Credits

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.

3.2 Buttons & Dialogs

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!

3.3 Combination

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.

3.4 One more iteration

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:

Conclusion

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.