UI Analysis: Final Fantasy 13

Posted: July 11, 2011

Welcome to the first in what is hopefully a long running series of articles about user interface in video games. This maiden voyage will be to the world of Final Fantasy 13 or FFXIII. I spent a couple hours going through every screen in the game on top of the 90+ hours I’d spent playing it for fun. I’ll share what I found good and bad, why what’s good is good, and why I think what’s bad is there.

Flow Into the Game

Booting up the game you’re presented with an opening movie. It’s skip-able, but nothing gives an indication that it is. This is pretty common, but a prompt would be nice. In case you’ve been wondering why most games have a lot of opening non interactive screens and movies, it’s because they’re usually loading in the game and trying to hide it. Also you have to put the logos of the companies involved at the start of the game for legal or contractual reasons.

The start screen like much of the game is very minimal. You’ll find just four options, all straight forward with the exception of Extras. The Extras menu just links to unlock-able themes, so it could have been better labeled. The lack of complex starting menus with game modes is something inherent in Final Fantasy, but still great. The settings screen here is the same as in game and has many parts in common with the other screens.

The game doesn’t give button prompts for selecting items and backing out of menus. For a game of this type you can get away with it and assume the audience knows how the standard console controls work. The settings is a rare place you could run into trouble with this. When you select an option to edit, the cursor moves to the possible choices. Some games use a button press to confirm, some just use whichever is selected when you back out. In this case it’s a press but you won’t know until you try it.

The settings also has the help bar. This is my favourite thing in the UI by far, because it’s such a simplifying force. Every time you’re selecting an item, a description of what it does, or how to use it is displayed. This bar is almost always on screen, and always in the same place. You may think that having that information near the option would be better, but consistency is key in a UI. Also key is having huge space for text to grow, be that through embellishment or more importantly localization. Giving the user more relevant information is always a good idea in a complex RPG setting. I’ll give other examples of how this bar is important later.

Next we’ll actually get into the game … or at least start loading. The loading screens are done well in FFXIII. They have a simple backdrop to remind you of where you are, and if that’s not enough they give a text summary of the last major plot event. This automatically scrolls while loading is happening and once loaded you can skip it or use it to catch up. This is an excellent way of handling something that’s usually pretty dull. Here we welcome back the user and start to pull them into the world once more. The pause screen is very simple, with a label that says pause and button prompts to quit the game or resume. Not much to say about that besides good job.

I tried to find an image, but apparently this isn’t as exciting as the rest of the game for most people. I’ll go through the items one at a time, not necessarily in order. First though, general notes about this screen and really most screens. It uses a very fast and subtle effect for selection, and all transitions are extremely fast. Most of the screens have animation that isn’t obviously blocking the user just to look at something pretty. A large part of good UI development is speed of navigation, or responsiveness. The party on this screen is displayed in full, with very relevant information dynamically set for the task you’re performing.

Looking at the Paradigm menu (which controls what classes party members are at a given time), I initially thought that the Battle Team option for swapping players would have been better served on the main menu. It was slightly hidden for something that important. It’s actually a smart choice, because the paradigms that you can have are tied to who is in the party. If you’re doing a lot of fiddling with paradigms trying to find the right ones, it’s fewer steps to get between the paradigm customization and battle team menu items the way it is now. An alternate approach with the paradigm menu could have been to use buttons to perform the different actions of deleting, customizing and generating new ones instead. This would put the battle team option on the main menu, but would have cluttered the bottom of the screen when editing paradigms. It would also have left out opportunity to use the help bar to guide the player through how paradigm editing operates in the way they have now.

A few screens (Status, Equipment, and Abilities) use a player face for a backdrop with the text around them on the sides. The face gives some personality and an easy way to tell who’s information you’re viewing/editing. On the status screen, the Role summary text is too close together and not as readable as the rest. When using a combination of large and normal text it’s good to give the large text some breathing room. The Equipment screen gives a nice way to view more details about all of the active abilities you have through equipped gear. Not enough clarity is given about how much you’ve increased over the character’s base stats. If you want to compare characters legitimately you have to remove all the equipment and put it back on when done. The Abilities screen uses a menu and list, along with the help bar, to avoid a separate screen for each menu selection, or a giant table.

The Inventory has a similar structure with a larger table. This table has a scroll bar, but it’s hardly ever necessary. In fact the same can be said about the whole system. It’s very flat (meaning not many levels of menu to get what you want), and most information fits on the entire screen. They’ve done a great job of simplifying to the core interactions with the system. The Datalog has the deepest menu structures, but even there they use the help, quick transitions, and good organization to keep it from getting bogged down.

Now let’s get to the bad areas. First up is the Map. It changes orientation depending on which way your camera is facing. This offers zero consistency. You exit the map, turn around, re-enter and are faced with an entirely different world then you were in before. Areas never become truly familiar because there aren’t consistent shapes to get used to. Maybe that’s the effect they were going for but in my view it’s just annoying. Also no mini map arrows except the one leading to the plot mission. It’s as if they want you to ignore all the hard work they did in making the side missions.

The transparency of the map is very low on the Map screen which causes confusion about where or what certain icons are. The legend is given too much space. It would have been better served with a pop-out from the side, or at least the ability to hide it, with the default being visible to help new users. The map is too small because of this and it’s difficult to get enough on screen without burying it in icons. The mission list integrates well into the map by showing the location of each as you highlight. This is only if in the current area, otherwise no direction seems to be given. The Mission list doesn’t use the Help bar, but could have benefited from it by moving the mission location onto it, or the location could have been removed all together. This would mean they could have the star rating you received visible all the time, and still have the map highlighting. They may have wanted to help you find the location quickly in the list, but location names don’t stick in the mind very well and visual is always better. In this case I’d say it works. There may be technical or design issues with showing the locations on the map that I’m unaware of.

Final item on the menu is Crystarium, where you level up characters. I saved this for last because it involves 3D which always makes screens more complex than they need to be. It means long animations to cover load times, but to be fair the amount and uniqueness of data on display at once would warrant that anyway. Character switching suffers here. The buttons say you’re switching characters when in fact you’re going to a character selection overlay. This is done because switching one at a time would be slow and cumbersome with the giant per character 3D flower in the middle. It ends up being misleading and just confuses people at first. Using the Crystarium itself isn’t intuitive, sometimes you have to hold a direction while you press the button, sometimes not. It’s not as easy to navigate between nodes as it has been in other Final Fantasy games that use 2D. On inspection these were likely the best solutions given the individual 3D Crystariums, but that’s the choice they had to make between usability and looks.

Store and Upgrade Systems

First off it’s hard to get into the shop menu but that’s because they tied it to the abysmal camera, like all in game object interactions. Once in, you get a menu which shouldn’t really exist. It’s a popup in the game world with options to Save, Shop, and Upgrade. Both my wife and I fumble with this menu and accidentally end up saving when we mean to shop.

This is because it’s visible for a moment before becoming responsive. You expect from every other menu in the game that you can start moving around as soon as you see it. Here, buttons get pressed correctly but it only picks up the selection and suddenly you don’t have control. When you back out of any of these screens it goes back to the game instead of that menu.

This is frustrating and the solution here would be to have the Save and Upgrade options as part of the list of shops. That would minimize the time it takes to switch between buying upgrade items and applying the upgrades, and also the amount of time going between 2D and 3D.

The shop menu has a large number of stores that get unlocked as you play, rather than a small set that get more items to sell. Most of the stores are excessive, several only carrying four to eight items. For example, there is a shop just for the four aerosols, which are items used in the overworld for special benefits. Another store with just accessories that grant buffs at low health, and yet another with four obscure accessories. All of these are separate screens with long animations to enter and exit.

They attempt to add character to the world here, but it just ends up confusing things. Each store has a name that isn’t helpful in most cases. What do you think you can buy at Eden Pharmaceuticals? If you guessed healing/recovery items you’d be wrong. They have text scrolling at the bottom to describe each store instead of using the help bar, which I would have expected. This text is vaguely more helpful than just the store name. The scrolling makes it less readable than it should and they had plenty of room to not scroll.

The upgrade system doesn’t surface enough information. When buying items you have no idea how much experience they’ll impart to a piece of equipment, or how they’ll affect the experience multiplier. When you dismantle an item you don’t know what you’ll get, and in some cases the only way to get things is through dismantling. When you get equipment to the highest level you can sometimes use items to transform them into a better one. Here as well you don’t know what you’ll get or more importantly how to get it.

These decisions were likely meant to prevent users from finding out the optimum way to upgrade, since from what I can tell there are plenty of ways they could have showed this information. My issue is that people will immediately turn to the internet for it and find it anyway. Alternatively they’ll get confused, or worse frustrated and never use the system at all. Later on they’ll be underpowered, not know why and storm off to tell their friends what a bad game Final Fantasy 13 is. That’s an extreme extrapolation but you get my point, do not hide necessary information from the user.

The shop area is in large contrast with the rest of the UI in that it seems worse to me than it’s predecessors. I’d really like to find out the story behind this, because the other negative areas have special considerations that I can understand.

In Game UI

I’ll mention quickly, the only other screen is the mission screen which is pretty usable and has a nice amount of flavor for the world. All the information is easy to find. The speed of combat is an important point to mention here. You aren’t controlling combat by picking actions as much as picking strategy. This speed means that the UI has to be very straight forward and it is.

You’re only concerned with 3 things for the most part and these are very large and obvious. You care about the enemies stagger meter, your characters health, and when and what your character is going to do. These are each represented with large bars and clear numbers. The rest of the screen is where the crazy action, and large overlapping damage numbers are. Allowing these numbers to overlap is perfectly fine here, unless you want to compare who is doing more damage. Usually all you care about is how far down the enemies health bar has gone instead of the specifics and that is kept clear.

The paradigm shifting is quick and they keep your parties health on screen while choosing paradigms. This is important to making sure the user doesn’t loose while choosing the next paradigm. Selecting skills however is slow and prone to getting you hurt. While they want to encourage you to just auto battle, having a wait mode like in older final fantasies would be nice, though possibly hard. Currently I don’t use any of the character specific abilities later in the game or use any items because of this.

The Eidolon UI is confusing. It seems like mapping abilities to analogue gestures and button presses was the only way to keep things fast enough given the lack of a wait mode. Perhaps they wanted to mimic fighting games but it really doesn’t work well. It’s the reason I never used Zell’s limit break in FF8 and the same reason I never used Eidolons in this game.

There should only be one end of battle screen, since you could easily fit the loot on the battle results screen. I don’t think I’ve seen more than 4 items max on the loot screen, it seems like a waste. They could have placed the score next to the star rating and removed the party health bars, showing only the technical points gained.

Final Fantasy 13 is a vast improvement in simplicity and ease of use over it’s predecessors. They managed to cut out a lot of the fluff that bogs down many RPGs. It’s not without its faults and will hopefully continue to be improved upon in the coming iterations of the series.

That’s it. We literally went through every screen. This was fun for a first time, but I think this level of detail is too much to continue with. Next time I’ll try to distill the mistakes and good choices down to a more readable form, maybe speak in more generalities.