Pokemon Evolution: Battle UI

I’ve been playing Pokemon for over 20 years. It was one of the first entertainments I can recall spending my time on, and I got up early to watch the show and brought it to school to battle my friends. I’m still a huge fan, getting competitive with coworkers and going to see the symphony play my favorite songs from the game. Pokemon Go even captured my attention until its updates wore out, although I’d be lying if I said the commercial didn’t make me teary.

Pokemon started off simply: catch Pokemon, trade them, and battle. You bought a cable to connect Gameboys and then you could play with friends. Over these 20+ years the mechanics have gotten much more complex, adding game features like held items, breeding, and IVs, giving new players and old unique challenges. The number of monsters just seems to keep growing as we discover new areas.

Pokemon games are separated into generations. One generation is signified by one set of new or unique Pokemon, and there can be a few sets of games per generation. Nearly every one of the core Pokemon games comes in a trio: the first two are released together, to give version specific mechanics and Pokemon, and the third is released later with extra features or story. The exception to this is Black 2 and White 2, which released instead of a third follow-up to Black and White.

So while I might be very biased toward Pokemon as a game, and think it’s one of the best game series that I’ve ever played, I wanted to use my UX eye to examine some of the game’s user interface and usability aspects and talk about how they’ve changed throughout the years.

Compared to the gamut of all video games ever produced, the differences between the generations of Pokemon games are vast. Today I wanted to focus on the changes to the one aspect that the player might just use and see the most, and one that may not have seemed to change all that much throughout the years — the battle interface.

Let’s start with the American Generation 1, the GameBoy games Pokemon Red, Blue, and Yellow.

Here’s the mainstay of the Pokemon games’ battle interface. You have 4 options: Fight, which opens up the Move menu; Pkmn, or Pokemon, which shows your Pokemon team and offers the ability to view or switch in members of your team; Item, which allows you to view or use an item in battle; and Run, which in a wild Pokemon battle allows you to attempt to run away.

Already we’ve got a clear sense of priority in this interface. Fight is the most common option in a battle situation, so it’s natural that it is the first and left, and the cursor is automatically on it already. Run is the least common, and is furthest away from our start point. Pokemon and Item should be accessed about the same amount of time, give your Pokemon a Potion or switch it out for your Raichu — these aren’t things you’ll do every turn, but neither is more pressing than the other. The designers kept all 4 options in a tight space and are quickly scannable, and going with a 2x2 block in this case is much better than a more straightforward top-down or left-right list because of our Pokemon and Item option priorities. To contrast this, think of the classic Final Fantasy battle interface — as a top-down list, it encourages the player to use magic over items, and running away really feels like a last resort.

So what does this look like when you go to select an attack?

This interface manages to build in most of the information you’ll need for a successful battle, and its position is very apparent and quick to scan as it covers up the nice but not very useful back of your Pokemon. You can see your Pokemon’s 4 attacks, their type, and how many Power Points (PP) each move has left. However, we do lose the default battle menu as we dive into the Fight menu. This is normally a usability (not to mention accessibility) concern when we design for modern interfaces, but games are different. For a website or mobile app, this could mean that the user might forget which menu they’ve entered or cannot see how to get back to that previous menu.

For a game, a straight dive into a menu is a positioning interaction — it allows the player to focus fully on the task at hand. There is no reason to jump between menus or steps, so the player can make deliberate choices on what they wish to do next. Plus, a video game, especially one on the GameBoy, has significantly fewer options and controls, so the player does not have to guess how to return to the previous menu with as much difficulty as someone with a mouse, keyboard, and possible browser/operating system options.

This is straightforward enough to be simple and easy for someone of any age to pick up easily. The interface does not change much for the next two generations, spanning the GameBoy Color and Advance systems and 6 more games.

The Item option is renamed to Pack in generation 2’s Gold, Silver, and Crystal, and that’s all our differences until the Gameboy Advance. Now Pack is renamed to Bag in Ruby, Sapphire, and Emerald on as the games add more item categories to generation 3. We do see a brief swap of the options Pokemon and Bag in the 3rd generation, and my personal opinion is this was simply a visual balancing move rather than one motivated by usage.

This generation also places the move information at the right side of the menu using all of that GameBoy Advance horizontal space, keeping the menu nicely contained in its box.

Also part of generation 3 are our first not-entirely-new games, Fire Red and Leaf Green, the refresh of our original generation with some new areas and Pokemon that weren’t available in those games. We still have the same menu as Ruby, Sapphire, and Emerald, but they have a different style that might evoke more of the original.

With Diamond, Pearl, and Platinum, the 4th generation utilizes the new Nintendo DS’ two screens, a purely visual one and an interactive touch screen, and it’s a game changer. The hit areas — the amount of space an item that is meant to be interacted with via touch is given — are big, friendly, and bright, and though you can still use the D-Pad and buttons to use it, the interface really screams for you to tap it. Heart Gold and Soul Silver

Now we have a huge priority on Fight; Black & White even dedicates what can be considered the background of the entire interface to it. They have also moved the indicators for how many Pokemon are left between the player and their opponent into this menu, although they are not interactive.

There’s a new priority dynamic going on with the other 3 options. Where before we had Bag & Pokemon as secondary and Run as tertiary priorities, here they are all at face value equal. This is where taking in all of the visual hierarchy cues is most fun:

• Bag is the brightest, so it should be seen first
• Run is the lowest, so it should be seen last
• Pokemon is “last” when you consider English readers going left to right
• Pokemon is green, which is the complementary color to Fight’s red, so it should be noticed first
• The line dips in the center with Run, so your eye will naturally go from Fight to Run

Best of all, if you use the D-Pad, which direction do you hit to get to Bag? The player can only hit the down arrow from Fight, which gets them to Run, and hit left arrow to get over to Bag. So by this logic, Run is secondary, and Bag & Pokemon are together in tertiary priority.

With this layout, there’s no easy answer to which of the 3 items is assigned highest priority. What I can only imagine is that the designers were going for an interface designer’s dream menu, the pie or wheel menu, as seen here in Blizzard’s Overwatch.

The concept behind the wheel menu is that the circular menu opens around where your cursor or pointer is, so that each option is just as easy to get to as any other. This menu does have to follow the natural reading order of the user’s native language, so some items will still be prioritized visually more than others, but mechanically it is easiest to spread priority equally. There are kinematic concerns that can shift priority with this menu, but since we don’t use a mouse for Pokemon we’ll table that until we talk about Overwatch again.

This generation also brought a change in the Fight menu. We still have all the same information, but now a Pokemon’s moves are in a 2x2 grid and we’ve added a great visual indicator for what type the move is. There’s also a Cancel button! With that, the game allows the player to either use the touch screen or the physical buttons to interact with any of these menus.

Other than some fun button treatment in Omega Ruby and Alpha Sapphire, this convention doesn’t change much until Sun and Moon.

This is so much different in the best ways. Your priorities are clear: Fight is the right side of the screen, Pokemon and Bag are grouped to the left, and Run is at the bottom. There’s even a dedicated button for the last type of Pokeball you used, something that might need to be used frequently in a wild battle. Also new to this interface, you can see all Pokemon that are out on the field and keep track of their buffs and debuffs. Previously this wasn’t able to be seen at all!

To me, this change also signals a shift in what we consider the player’s primary interaction method to be. With the DS we probably assumed most people would use the stylus with the new touch pad; after all, that was the popular way to interact with most touch screen devices at the time. Now we’ve given the Pokemon status in the middle some room but also gave the buttons a very thumb-friendly refresh.

Within the Fight menu there are a number of additions as well. Most notably the player can now see how effective each move is going to be, as long as they have battled the opposing Pokemon before. This was a controversial decision — many long-time Pokemon players felt like this change sidestepped the knowledge and skill needed for battling. They can also tap the information “i” icon to show the description of the move, something they would have to go out to the Pokemon menu to look at. These icons are slightly too small for easy tapping, but the designers’ priorities may have been geared more for children’s thumbs. To go back to my point about accessibility, this menu update also does not take up the full screen, and in doing so can ground the player while still providing immersion for strategic decision-making.

With these beloved children’s games the designers will end up having two audiences: the ever-young, and the fans they’ve hooked over the years that grow with the series. This newest generation of games brings refreshing changes that solidify the player’s understanding of the game’s mechanics, and battle priorities. Its changes allow for quick information scans to keep the veteran player on top of their game and helpful information for the newcomer.