Mobile User Interface Design

Mobile User Interface Design

The User Interface, or UI, is a really important part of game design. Whether you are planning a game for a Console, a PC or a Mobile game. Obviously it varies depending on which platform you are developing for, but because the game I’m developing for this project is a mobile game, here are a few thoughts, hints and tips on Mobile user interface design to guide you in creating your own.

Immersion

It’s quite important that the UI does not break the players immersion into the game. It’s no good creating a dark gory horror game and then creating a UI for it which consisted of default grey panels and Arial font.

This kind of jarring of attention can lead to a poor user experience, which in turn leads to uninstallations and poor reviews, and nobody wants that.

During the game play itself, any UI on screen should not obscure the game area, so ideally should be around the edges (virtual joysticks and buttons) and across the top of the screen (non interactable UI elements, for example scores and health bars etc.)

When your designing the layout, consider where feels natural for your thumbs to press when your holding a device. The more frequently used controls should be larger and in easier locations to reach.

With the UI for Flappy vaders, I decided to keep the first page of the UI the player sees fairly simple and unobtrusive. The large logo fills the top of the screen, and the lower half contains only the two buttons.

The player needs only tap the play button from this point to immediately start the game.

The menu and subsequent pages are only accessible before a game, so the elements are more centrally placed on the screen.

During the gameplay itself, the UI will again be minimal and unobtrusive, currently there is only the score and coins collected displayed, but there is also going to be a pause button as well.

All UI elements match the graphical style of the rest of the game, and the sky and scrolling background are visible throughout.

Intuitive

One way of describing an intuitive user interface is that “It works the way users expect it to”. In other words, it must be clear and simple to use, so the user doesn’t have to think about using it.

Each platform has it’s own standard and expected way of doing things, so be sure to consider what is “normal” for your target platform when designing your games UI.

Icon design is another factor to consider. An icon’s meaning should be immediately obvious to the user. >Here< is a link to a post I made about the time I used AI to help me develop ideas and then concept art for icons.

Also the different UI sections should be logical in their design, so the user can easily go from one section to the next without having to think too much about it.

I have found creating icons which are both easy to recognise, and fit with Flappy vaders graphical standards to be one of the hardest parts of creating this game so far. I’m sure I’ll feel differently once I’ve started on the music and sound effects though, lol!

Clarity

There can be quite a range of screen sizes for mobile devices, so it’s important that your UI is clear to see on smaller screens.

Try to avoid using small text sizes, and consider how the font looks when displayed.

Try not to pack all your UI elements too close together. And again, make sure that the icons or text are just as clearly visible on a 5″ phone screen as on a 12″ tablet.

Other things to remember!

Here are some other quick tips to remember when making User Interfaces for mobile platforms..

  • Although Google Play is OK with having a Quit button, Apple will reject your app out right if they find one.
  • If you’re using banner adverts, be sure never to put buttons or controls close to or overlapping the advert.

And that’s all

That’s everything for this topic I think. If you have any questions regarding anything mentioned in this post, then feel free to ask on the >Forum<

GDD Update #2

Click the above button to view the revised GDD for Flappy vaders.

The bulk of these updates relate to an overhaul of the upgrades/powerups system. The previous plan was deemed overly complicated, so it’s been simplified a little.

The plan for using rewarded adverts is also included in this revision.

For those interested, the modified/addition sections are as follows.

3.6 Powerups/Upgrades

Power ups are split into two categories. Pickups, which are collected during the game, and Boosts, which are single use powerups which are purchased before the game.

3.6.1 Pickups

These power ups are activated by the player collecting an icon during game play.  The icons float across the screen using a sin wave pattern.  They require unlocking from the upgrade store before they will appear in game.

Shield:
The shield power up encloses the player in a protective bubble, preventing the player from crashing into other sprites.  The top and bottom limits are enforced to stop the player passing through them, but the ship will not be destroyed while the shield is active.  The duration of this powerup is affected by how many times it’s been upgraded.

Magnet:
The magnet draws coins towards the players ship to make collecting coins easier.  The higher the upgrade level, the larger the range of the magnet.

Smart Bombs:
The smart-bomb pickup will destroy all the enemy sprites (missiles, meteors etc.) but will not destroy buildings.  The range and effectiveness of the bomb is determined by how upgraded it is.

Score Multiplier:
Increases the base score rate.  Needs to be unlocked first with an initial purchase, and case be upgraded a further 4 times to increase the value.  Starts at 2x score, 4x score, 6x score, 8x score, and finally 10x score.

3.6.2 Boosts

Boosts are Single use abilities which are purchased before the game starts and are only active for the next game.  They also need to be unlocked in the store and can be upgraded a further 4 times to increase their power.

Head start:
Whooshes the player at massively increased speed through the first couple of zones.  Upgrade increases the distance travelled.

Self-destruct
The self-destruct causes the ship to detonate and progress a little extra distance.  The size of power of the explosion is determined by the number of times it’s been upgraded.

Missile Jammer:
Stops some of the missiles from attacking.  Needs an initial purchase to unlock, and then can be upgraded a further 4 times.  The number of missiles blocked increases with the upgrades.

Once fully upgraded it will block all missiles from appearing that game.

Second Chance:

Once purchased gives the player a chance to continue the game once they have crashed.  It starts with a 1 in 5 chance of re-spawn and increases to 100% chance when fully upgraded.

3.7 Daily Bonus

To encourage player retention the game should include a daily bonus system.  The more days played consecutively, the larger the reward. 

Rewards can be either in game currency or powerups.

Powerup rewards cost in the store determines there value here.

The actual type/style of the daily bonus will be determined later.

I would like to use rewarded adverts to allow for an extra re-spin or double the prize or something similar?

4.7 Adverts

Flappy Vaders will use a full screen interstitial advert which will be displayed at the end of a game, between the game over/summary and the return to the main menu.

Rewarded adverts are also used to allow the player to earn a few free coins from the coin purchasing screen, as well as increasing the reward from the Daily Win thing.

4.8 Options Screen

The options screen contains whatever options are available to the player.  This includes things like music and sound effect volume etc.  It will also contain buttons to open the help and about texts, as well as a button to return to the main menu.

4.9 About Screen

Shows the game credits and shout outs in a auto scrolling text scroller, similar to TV credits.  This needs to include all the Dev with Dave links.

Advice on Mobile Adverts

An introduction

Having adverts on your mobile app or game is a great way to earn money from your project. The global revenue from mobile adverting has grown year on year, and shows little sign of slowing down.

However, it’s not as simple as just slapping some adverts willy-nilly in your app and hoping for the best. In fact having too many, or badly placed ads leads to a poor user experience, which in turn means lots of 1★ reviews, and poor user retention.

The first thing to decide is who’s adverts to show. There are many ad providers out there, each with their own benefits and downsides.

My personal favourite is Google Admob, it’s one of the largest Advert providers in the world, with 31% of all adverts seen being theirs. They have a large global reach, and are quick to implement new privacy settings, like GDPR and the New Apple iOS privacy rules.

Mobile Games

Having chosen your provider, and installed the SDK etc. It’s now time to decide what type of ads to show, and where to put them.

The best type of adverts to use for mobile games are Interstitial ads and Rewarded ads.

Rewarded ads work best when used in conjunction with free in game objects or currency.

For example, Rovio’s Angry Birds Friends uses rewarded ads to give the player the option for a double spin on the give away wheel.

Where as Elex’s The Walking Dead : Survivors offers players the chance to double the contents of reward boxes by watching a rewarded advert.

Rewarded ads are full screen adverts, which the player cannot skip through without losing the reward.

They are usually triggered by the player pressing on a button on screen.

You shouldn’t however try and trick users into watching rewarded ads by using them like normal interstitial ads.

For AdMob certainly, this is against the terms of service, and may result in your account being restricted or closed.

Interstitial adverts are full screen ads which may or not be videos. These are displayed by the game at specific points as specified by the developer.

It’s best to put these at natural break points in your game’s flow, like the end of the players turn, or after the Game Over message.

Putting them elsewhere, such as displaying an advert during gameplay, or having one appear every two minutes when the player is in the games main menu will feel jarring to the player, and break any immersion they may have in your game.

Applications

If your project is an app rather than a game, then I find it best to use a slightly different approach to using adverts.

Firstly, depending on what your app is, it’s quite likely that it doesn’t have the same flow as a game, nor natural break points. Because of this full screen interstitial ads aren’t so beneficial.

Instead I find placing a simple banner advert at the bottom of the screen is the best practice. Although ensure it’s not blocking any essential UI components or anything else the user needs to see or interactive with to use your app, again, this tends to lead to 1★ reviews and lots of uninstallations.

Depending on what your app does, it might be possible to implement a rewarded advert to unlock premium features for a limited amount of time, but I have found people are generally not interested in rewarded ads in applications.

Things to NEVER do

It is also quite important to make sure you never do any of the following with your adverts, or you risk being penalised or your account restricted.

NEVER EVER EVER click on your own adverts in your app. If you need to click on it to test the reward or for some other reason then make sure you switch to test adverts! Ad providers can 100% tell that you are doing this.

You’re also not allowed to ask users to click on your adverts.

And that’s about it

Hopefully you are now a little more knowledgeable about Mobile adverts and how best to use them in your projects.

I also find that it can be worthwhile to offer advert removal as an In App Purchase from inside the app or game, but that’s a blog for another day 🙂

If you have any questions, then feel free to ask them on the Dev with Dave forum (which is >here<)

Good luck 🙂

GDD Update

Click the button above to see the revised GDD for Flappy-vaders.

The modifications this time round are mostly oversights which got missed off the first time round. One which I hadn’t thought of, and one which I simply forgot to include (D’oh!)

For those interested, the modified/addition sections are as follows.

3.5 Player Death

The game ends when the player dies.

The player will die if the player character collides with any of the obstacles or enemy or gets shot down.

The player will also die if the ships y position gets too low on the screen.

3.7 Daily Bonus

To encourage player retention the game should include a daily bonus system.  The more days played consecutively, the larger the reward. 

Rewards can be either in game currency or powerups.

Powerup rewards cost in the store determines there value here.

The actual type/style of the daily bonus will be determined later.

Creating a game idea

The how/why of Flappy-vaders

The last thing I need to cover with regards to planning, is the how/why behind the idea of “Flappy-vaders”. Starting next week, the topic of conversation will be shifting to Programming.

In this post I’ll talk a little about the thought process behind the idea of Flappy-vaders.

Genre

The two biggest constraints for Flappy-vaders were time, and that I’d be writing it using a ridiculously low spec PC. Due to these factors I had already decided to create a simple casual style mobile game.

Again, for the sake of development time, I decided to take some already successful concepts from other games and combine them in a (fairly) unique way.

I decided to take the game mechanic from “Flappybird”, as it’s fairly simple, as well as being quite well known and fun/addictive to play.

I also decided to expand on this idea by adding elements from other games, such as the “zones” which you see in games like Jet Pack Joyride etc.

Now don’t get me wrong, I’m not simply copying Flappybird. This is going to be an original game in it’s own right, and I am 100% not encouraging people to create the utterly rubbish “asset flip” style games which are nothing more than a simple online tutorial which has been followed and the graphics replaced.

Visual Style

One of the things which makes games stand out at the store and in videos online is the visual style. I’d already decided to create a 2D game due to the hardware. I can’t imagine how the Linx tablet would run Blender, lol!

My initial inspiration for the graphical theme of Flappy-vaders was the menu screen for Fallout Shelter by Bethesda.

I loved the old style scan lines and the darkened edges of the screen, reminiscent of old CRT TVs. I imagined I could produce an effect similar to that of an 80’s era TV with a border and a scanlines overlay.

My next thought was about the type of games I’d have been playing on such a TV. Now in the 80s I had a ZX Spectrum, which had only 8 colours (well, 16 if you count brightness). I thought that palette would be a bit limiting, so I looked at other similar age devices before settling on the Sega Master System.

The Sega Master System has 256 available colours which should be more suitable for this project.

Monetisation

The last thing to do was decide on how the game will be monetised. Since it will be a casual mobile game, it will be free to download but include adverts. The player will be able to remove the ads by paying a small one off fee.

Another popular way of monetising mobile games is through the purchase of in game currency. This can be used to buy power-ups and upgrade the ship. Since I was planning on having power-ups and upgrades in the game, this seemed like a logical strategy to follow.

Conclusion

Overall it took me about a fortnight of thinking, researching and jotting down ideas. And then maybe as long again to refine them and be ready to create the GDD.

Unleash the Trello!

For those of you who don’t know, Trello is a collaboration tool that organizes your projects into boards. In one glance, Trello tells you what’s being worked on, who’s working on what, and where something is in a process.

It’s available from https://www.trello.com and is free to use (although paid options are available)

I’ll be using Trello to manage the Flappyvaders project in conjunction with the GDD I shared last week. There is a link to the Flappyvaders Trello Board further down this page.

I usually set my Trello up as shown above, and here’s a quick explanation as to how it works.

The first column is for reference, or any notes relating to the project.

Next is the “Known bugs/issues” column, this is explained a bit further down.

The “Things to do” column contains cards which are ready to be taken ownership of and moved to the “In progress” column.

Each card in the “In Progress” column should have an owner. To take ownership of the card, you add your name as member, which adds your initials to the corner so you and other team members can see who is actioning that card. Once all tasks on a card are complete it is moved into the “Under review” column.

The “Under review” column contains cards which have been completed and are ready to be reviewed/evaluated by the project manager. During review any bugs or suggestions can be added to the card before its returned to the “Things to do” column.

If there is no further changes necessary then the card can be moved to the “Completed” column.

If an issue is discovered relating to a completed card, then the card can be moved to the “Known bugs/issues” column, as well as creating a sub card relating to the issue directly. If the issue does not relate to a completed card, then just add a card to the “Known bugs/issues” column to explain the issue.

Click the button below to view the Flappyvaders Trello Board in action for yourself.

If you have any questions about planning a project, creating a design document, managing a project with Trello, or anything else, then please feel free to ask it on our forum.

Flappyvaders Game Design Document

It’s taken a few days longer than expected, but I am finally sharing the GDD for Flappy Vaders! Simply click on the link below to read it.

This is the plan I will be following over the next few months as I build Flappy Vaders.

I’m midway through creating the Trello board for this project currently. I’ll share a link later so you guys can get a feel for how I’m using Trello for project management.

If you have any questions about planning a project, then please ask them on the “Dev with Dave” Forums.

God from the machinery.

Here is another classic GDD for you to look at. This one is was written in 1997 by Ion Storm Ltd, for a game with the working title of “Shooter: Majestic Revelations” which again, wasn’t the title that the game shipped with once it was finished.

This copy of the GDD is annotated by the developers, and gives you a good insight into how the game plan was changed during the course of it’s development.

Click the link below to have a read through and see if you can work out what the games final release title was?

I’ll give you a clue – It was one of the first 1st Person shooters which I played online, and from what I remember they kept the name of the protagonist the same in the final release.