It was suggested in a recent crit that I add a page where players can buy things for the game, similar to how you can buy extra lives in candy crush.
The main thing that would cause someone to buy something for this game would be to stop them running out of money. Buying extra money takes the need to wait out of the game, which benefits a player if they're eager to complete a level. The ability to add another panda into their game helps stop the pandas being cut-off, as well as making the photography and open-world modes more interesting because of there being more to see.
It was difficult to lay these out on a screen in a way that was consistant with other screens from the app because of the amount of text space that was required. Having the button between the text kept the buttons at the same height as the buttons on other screens and split the text up well. Having the menu buttons below them in the same place as they were on the level select screen looked messy because of the lack of vertical alignment, and having them underneath the buttons made a large gap appear in the middle of the screen, which looked a bit ugly.
I decided to tackle this by removing the continue/play button, as it wasn't particularly necessary. This allowed me to put the menu button in the centre to fill the gap. Adding the male and female panda icons was a failure, because when they're used at the same size they don't fit in the button, and I'd already established that at a size any smaller I'd have to remove the panda from inside the circles, which showed a lack of consistency. On top of this, the blue and pink didn't contrast very well with either the grey or the brown backgrounds, which is contradictory to the way in which they're used on the map pages.
Because neither background colour worked, I tried using the game screenshot, which made reading the text difficult no matter what colours I used, as the text was too small to put a stroke around to any real useful extent. Due to these issues, I adapted it to the layout of the menu screen and the Information/Donation Screen for consistency. This caused me to remove one of the options from the screen, but this isn't really an issue because the option still remains for the user to buy extra money.
I then continued the consistency by changing the Info/Donation screen to have the screenshot background. Adding this consistency adds to the overall look of the game.
Tutorial Screens
It was also suggested that it might not be immediately obvious how the map screen functions, and some form of instruction might be necessary. The tutorial will work as a separate level that is replayable through the level select screen.
The simplest way off adding tutorials would be to add annotation-style instructions. I looked at various forms of text boxes that could appear on the screen and opted to use a slightly rounded rectangle shape because it contrasts with the angled lines of the hexagonal grid behind it without being too rounded to the point where it cut off potential space for the text. The brown variation was used over the grey/black one because of how it fits in with the colour scheme better, which will help the annotations look more comfortably integrated.
Some sort of arrow or indication was needed to show where to click for the relevant instructions. In order to keep the tone of the game playful I avoided sharp points and straight edges in the arrows and chose to use an imperfect circle. The light brown with the dark brown border was the one I chose to use as it was consistent with the text area.
When I put the tutorial instructions onto the map page it struggled to gain attention and clarity from the rest of the screen because of how much colour was on the screen.
Greying out the rest of the screen solves this, but sapping all the colour out of the screen removes the fun from the screen and completely changes the tone of voice from the rest of the app.
I found that compromising between the two by using less saturated tones for the app found a balance between the positivity of the brighter colours and making the instructions look separate from the app itself.
No comments:
Post a Comment