The Revisionist: Menu/User Interface Designs

Before a battle begins, the player on Offense will have to decide which troops to send into battle. Offense is divided up into a number of Waves (basically like squadrons composed of different Units). This weekend I had the opportunity to sit down and make some menus.


The Unit Select screen needed to clearly show a few things:

The total number of waves the player would be allowed to send into any given battle.
The limit for the amount of Units allowed in a given battle.
An area in each Wave for players to drag and drop Units.
An information display for Units.
Players should be able to scroll or swipe through different types of Units somehow.

One mockup done in Photoshop shown below.

This one is more vertically oriented and allows you to see and manage all of your Waves at once. The currently selected Wave (the 1st one in this particular screenshot) would appear larger and have a yellow outline. Empty slots would be turquoise, and can be filled by dragging Units from the Stock pile (as long as you have some left in reserve) with your finger and dropping them over an empty slot.

All Unit info is relegated to the left part of the screen. We may have numerical stats like the ATK/DEF/INT prototyped above. The arrows allow you to scroll to a different type of Unit you may want to send into battle.

I prefer this horizontal layout a bit more since it would make more sense with the orientation of the phone's screen. I don't think it will really be necessary to view all Waves at once; but rather manage them one at a time as shown here. The cyan tabs on the upper left indicate the Wave you're currently managing, and the matching arrows that point left and right would allow you to view different Waves at any time to manage those.

Unit info is on the bottom but otherwise functions the same. The up/down arrows on the bottom right allow you to scroll through different Unit types. Drag the Unit's sprite into a hexagon to place them in the Battle Ready area. A tab beside the Unit's title shows how many you have left to deploy.  I personally think the curves on the bottom corners make the overall layout more pleasing to the eye, not sure if it's drastically more functional than the first design though.

Alternate version below.

They're not pretty yet, but we're getting close to an overall layout that should work! We'll probably end up using bits from both iterations to get the best result. This idea of a pre-battle formation type of screen reminded me of how units were organized in Final Fantasy Tactics, so a lot of inspiration came from there. I referenced it a few times to see how they handled overall screen navigation, communication, and organization. If you have any thoughts on which layout you believe would be more comfortable to navigate through on an Android screen, or anything at all about the overall design/appearance, leave a comment here or shoot me an e-mail as always.