In the Shade of the (Skill) Tree

This post doesn’t exactly fit into the category of You, I, and the UI, but I’m throwing it in their anyway. I’ve been playing a lot of Fire Emblem Heroes on my iPhone, and while I think the overall UI quality for the game is above average, I think the “Skills” and progression interfaces stand out.

 

I think its good to analyze the UI here both to see examples of UI design in actual practice in a series (Fire Emblem) and genre (tactical, turn-based RPGs) which tend to be menu heavy and to see how UI design can influence how a player experiences the game.

 

If you’re not familiar with Fire Emblem Heroes, here is  a quick rundown: FEH is a free-to-play mobile game in the Fire Emblem franchise. It is Nintendo’s second-ever game released on mobile, following the initially-iPhone exclusive Super Mario Run.

super-mario-run-new1

In the game, players use orbs to summon heroes from across every game in the Fire Emblem franchise–from the original NES to the latest Nintendo 3DS release–in order to participate in turn-based battles. Each character is classified as red, green, blue, or colorless. In a sort-of rock-paper-scissors way red characters will be strong against green, green strong against blue, blue against red, and colorless is a kind of wild card throw in the mix. Moving on a 6×4 sized grid, the player controls four characters in short battles on diverse terrain.

finalskillsfeh

In terms of information present, there is a lot to see and analyze when the player opens this menu.  It’ll be useful to move through the interface the way I think the average player will. While the screen is visually busy, it does provide an interesting focus by putting a small picture, often one of dynamic action, of the character in the top left corner. That is where the designers intend the player to “enter the picture”. If the player is familiar enough with what the various characters look like, then the quick visual representation will properly orient them to the character, especially when the number of potential characters numbers in the hundreds. This works better than just giving the characters name, though that info is also included near the entry point.

From the picture of the character, the next more important information needed to give the player is how many “SP” they have, which is the games currency for learning and  upgrading skills. This information is located down and to the right from the entry point. It is set off by itself, the only set of numbers in that portion of the screen. From there, the player’s eyes track back across the screen, over a different visual representation of the character, to an icon for each individual skill.

Mobile - Fire Emblem Heroes - Skills.png

Personally, I love the icons. I think they do a good job of spacing information within a confined space. Each icon has information in order to interpret or remind the player of the skill, but also is readable and differentiable from far away.

The player reads across the line from the skill icon for the name of the skill, and then at the end of the line is the amount of SP needed to unlock or upgrade the skill. The numbers for SP are all in the same light yellow to offset them from the white text. In addition to the color, the SP are also grouped by their position on the right edge of the screen, sort of like a ledger or spreadsheet column.

This pattern of icon, name, SP is repeated three times with the player’s eye dashing down and to the left after each line, the same way one reads a book. Similarly, the UI forces the player to “exit” the screen through the bottom right where the “Confirm” button rests with a green (go!) background.

In the end, the player’s movement is analogous to the practice of reading a alphabetic text in the western tradition. It looks something like this:

finalskillsfeh2

The menus throughout the game are excellently done. They all make tremendous use of the limited real estate of a mobile screen but never ended up feeling crowded or overbearing. The skills screen does a particularly great job of presenting the player with the needed information AND at the same time, it encourages them to “Confirm” and spend their points. The UI is not interested in the slow, often largely detached from the actual gameplay, presentaiton of most skill trees with branching paths as seen in many RPGs and MMOs.

spell_tree

Instead of making the player focus on min/maxing their stats through skill trees, each replete with balancing decisions and minuscule differences to consider, Fire Emblem Heroes’ menus are designed to help you play the game instead of playing with the menu.

And isn’t that what good UI is supposed to do?

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s