Mobile Game Shop Screen Design

With my latest game soon to be released it seems a good time to start the post-mortem on what went right and what went wrong. In this post I'm going to talk about some of my UI design and show the stages it went through from bad to polished and nice.

I found the design, layout and art style for the UI to be sometimes one of the most frustrating whilst also one of the most joyful parts of the development process. On mobile platforms the UI is so important. The appeal and look of it as well as the flow and control are vital to keeping users engaged. Frustrating the user in the initial menus is likely to stop them interacting with your app fairly quickly and can quite easily lead to a straight deletion from their device.

Below are some of stages the shop/profile screen went through in development. You can see the huge progress in layout, appearance, neatness, symmetry, consistency and my art UI skill development in general.

The first version of the profile screen with an old very simple green and black UI style, similar to in Annihilation Arena. The screen is pretty poor and unintuitive at this stage. The items you select are set on the left in the slider. The categories for these items are on the far right (attack, defence, special). The description and image of the item on the tank were to be displayed in the middle. Unordered and messy, it needed to be improved dramatically.

This design shows retina graphics with shine added to the buttons. I was having issues with sliders at this point so had opted for arrow buttons to move the set of displayed shop items up and down (this was a bad idea and eventually I switched to a slider).
The items are now in a larger block, there is no category selection and the buy/equip buttons are underneath the description of the current item and image of the ship with the new item.

The equip button is now removed and a tick is used to indicate which item button was last clicked to equip it. The buy button is in a box with the item information contained in to make it a bit clearer. The buttons texture and style are coming closer to the final design. The ship is visible to display the current items. The main problem at this stage is it's difficult to tell what the items are by the icons alone. The image items need to be more than clear, they need to make players want to click on them and find out more.

A major overhaul happened here. I wanted attractive and obvious item images so I blew them up with prettier pictures to look at. Of course now the images are way too big! Only three could fit on the screen at once. I was forced to switch back to the slider again to account for the larger item images. To buy items now you just clicked on their image and then a popup would prompt you. There is no room to display the ship.

More major changes. The players tank is now the main focus, showing off the currently selected item in full 3D. The items have been reduced in size but kept large enough to look nice and clear still. They are kept on a slider which obviously suits the iPhone very well. A less obvious change is the back and next buttons frame shape changing to point in a direction.

The final design is a fully integrated shop/profile screen (previous designs had these areas seperated). Item category is selected at the bottom between weapons/armour and specials. The camera moves around and views the ship from different angles dependant on the item category. Different information is displayed depending on the current category. In this shot we are viewing armour upgrade items and so we can see the currently equipped armours durability and other stats. Items that aren't yet purchased have their prices displayed inside their container and glow golden.