Design Critique: Final Fantasy VI (iOS app)

Image result for ffvi ios battle gifFinal Fantasy VI is a Japanese role playing game that was originally released on the Super Nintendo in 1994. In 2014, it was ported to iOS and now features a completely redesigned control scheme and UI. The design changes make the classic game compatible with the touch-based interface of modern phones. As video game design is complex and involves many different interlocking systems, this design critique will focus entirely on the combat user interface, which works according to a turn-based menu system dubbed ATB or Active Time Battle. Examples of design principles and concepts applied in this critique come directly from Don Norman’s The Design of Everyday Things.

a brief primer on the ATB system

The Active Time Battle system pits the user’s stable of characters against a set number of enemy characters. Both sides take turns attacking and dealing damage to one another until one side is defeated. A party is defeated when their character’s health or “hit points” are fully depleted. The order of turns is determined according to a stamina meter, which is filled over time. When charged, the readied character may select an action and execute it. Only one character can move at a time. Only one move can be selected at a time. A conceptual model of this combat system might look something like this…

The potential actions that the ATB system affords are myriad. Players can select a number of different moves to execute, run away from battle, or use items from their in-game inventory. The signifiers that indicate to the player how participate in the ATB system vary between the SNES and iOS versions.

The original design (SNES, 1994)

In the original design of the battle system, the players made move selections in battle by using the Super Nintendo controller.


Directional buttons allow the user to move a cursor up and down contextual menus and options are selected by pressing the “A” button. The players receive  feedback in the form of the SNES controller’s tactile button presses, the blip sound as the pixellated cursor (pictured below) moves across selections, as well as the bombastic visual effects that accompany action selections. This triangulation of feedback means that the player always sees the direct result of their actions and can quickly make decisions without unnecessary options or information cluttering the interface. This feedback signifies to the player what actions are happening, what actions are possible, and what is coming up next.

Image result for ffvi ios battle gif

The gif above represents a player attacking the enemy. Please note the charging stamina bar and blinking arrow over the selected character, Sabin. The text that describes the player’s characters is in the right box and the current options to select are in the left box.

Interestingly, the layout of the names/hp/and stamina matches the positioning of the characters in the battlefield. Celes is on top and Setzer is on bottom both visually and on the menu. This is similar to Norman’s Third-best mapping technique, wherein the controls/information is arranged in the same spatial configuration as the objects to be controlled. The character name highlighted in yellow is a signifier for the current character that the player is making selections for on the left menu.

The success of the original interface

The player sees only the actions that are afforded to them at any given time. All of the information displayed on the screen is necessary to know and the user has the means to make selections with no obstacles standing in their way. By limiting the player to only options they can take, the physical constraints ensure that the user doesn’t see menus or actions that they cannot make use of. Visual cues like the highlighting, a sound-making cursor, and menu options help to bridge the gulf of execution by highlighting the potential actions.

The new design (iOS, 2014)

In the new system, ATB has all of the same functions, but the controls are all touch based. The screen has switched from a 4:3 aspect ratio to a 16:9 widescreen, which fits the screen of the phone. The user interface has been tweaked to allow the user to make actions by touching the screen.

Image result for ffvi ios battle gif

Rather than using visual stamina gauges, the iOS version replaces the entire right-side menu with with separate control menus for each character. Each character menu displays the progress of stamina by literally moving from the bottom of the screen up to a quarter of the screen. When the character menu reaches the quarter of the screen, stamina is filled and the controls change color to indicate that the player can select them. Even after stamina is fully charged, one will note that all of the options available to each character do not fully display. To the right each character menu is a tiny red scroll bar. The players use their thumbs to scroll up and down the options in order to make an action selection.

The darkened buttons represent controls that cannot be selected. The bright controls represent options the player can take now. This visual signifier is a way of ensuring the players know which characters are next in line for action and what they can and can’t do now. Keep in mind that only one character can move at a time.

The trials of the new interface

While the new interface is functional and allows for the same execution of actions as its SNES predecessor, it features unique changes that lead to error-making and confusion. The image below shows exactly how a thumb might interact with the new interface.
Note that the menu buttons are very small compared to the size of the thumb. This is roughly the size of my thumb in proportion to the interface. Further, the need to scroll with such small screen real estate is problematic. Scrolling requires a sweeping movement of the thumb from one point to another. With such a small space to sweep over, the user’s thumb has to cover the entire menu while scrolling. This obfuscates the buttons and increases the chance that the user will select an option by mistake or simply scroll to an undesired option, thereby completing an action-based slip. This obfuscation results in confusing during the gulf of evaluation. If the player accidentally presses a button but can’t see which button they pressed, they must wait helplessly for the action to take place on the battlefield before knowing what they did.
Making matters more complicated, the individual character menus show options for actions that the player cannot take. The darkened buttons do not serve a purpose if the player cannot press them –this significantly reduces the discoverability of options for first time users. There are a lot of options and only some of them are actionable.
Further, the individual character menus show their stats alongside visual representations of the characters represented on the battlefield. This duplication of graphics ensures that the player can map the controls to the appropriate character.


The old interface has the potential to merge with the new one for a smooth experience. I have created a mock-up of an interface that marries the touch-buttons with the original layout of the battle UI.
This new interface removes the individual character menus and adopts the old approach with buttons large enough for an average thumb to press easily. In doing this, all available actions for one character can be displayed on the screen. This eliminates the need to scroll to see all available actions. Further, the stamina bars, alongside the name highlighting and character arrow return to indicate when the characters can move and who is selected.
These alterations ensure that the player can only see actions that they can take right now and they aren’t confused by other information. With larger buttons, there should be minimal action-based slips as well.

Final Thoughts

Ultimately, the new FFVI combat UI is still functional and affords the same number of actions as before. However, a structural redesign of the UI elements could minimize the potential of slips and provide for a much less cluttered experience.