2006: Pokemon Pearl On Dual Screens/ Final Fantasy 12

2009: Pokemon Black and White/Final Fantasy 13

Final Fantasy’s HUD started off similar and very much like the Wizardy template. Then as Final fantasy was developed for ever increasingly hi-tech platforms so did the urge from the designers to add complexity to Final Fantasy systems. Now I understand that Final Fantasy is aiming for a different market and the game might be more hardcore than Pokémon but Final Fantasy is needlessly complex at times. In fact, some of the series mechanics are so complicated it wasn’t until a good few hours into Final Fantasy 13 until I was getting to grips with the Paradigm system. When most the gameplay exists in the battle mode, and the screen has a lot going on like in Final Fantasy’s case its immediately creating a barrier between player and the game by appearing to have visually a lot of rules.

2014 Final Fantasy 14: its just mental.

On the other Hand, Pokémon’s Hud design has essentially remained the same over time, even when it appears on the Nintendo ‘s DS (Dual screen Console). The major change in this adaptation was to port across the command menu to the bottom screen to make more room for the action. Which simplified the main screens HUD in the process removing more clutter!

2016 Pokemon Moon: The series still benefits from a user friendly approachable HUD today.

Pokémon has had an advantage during this period over final fantasy in the UX stakes that has actual been gained from a weakness and that has been through hardware limitation. Most the Pokémon’s Series has existed on comparatively technically limited hardware (the mostly various version of Nintendo’s Gameboy) to Final Fantasy’s console releases that have at times been flagship titles for the most state of the art consoles (PlayStation). So, the GameFreak designers lacked the bandwidth of a high-resolution screen or more processing power to really go mad with the mechanics of the game. The result is a very stripped down streamlined gaming experience that’s been refined over time. Pokémon games are about the actual Pokémon themselves and their abilities and characteristics they have and forming interesting parties with them. This is perhaps what’s made the developers at GameFreak to focus on other aspects (Pokémon hunting and multiplayer trading) to build deep game play experiences yet still retain an accessible HUD.

2. RANDOM BATTLES

Random battles are an age-old game design technique used by JRPG’s. Random battling basically means while exploring certain parts of the game you will randomly be forced into a battle with no warning. This can occur when you are in the direst of situations such as needing to save the game or have characters that are not in a fit state to fight.

Sega 1989 Phantasy Star 2 : Hell isnt fiery red its leafy and green.

I played through Sega’s Phantasy Star 2, quite possibly one of the most stressful “JRPG’s” (also one of the best) ever made as the random battling was truly brutal. If you stepped 4 squares away from the starting village of the game you could easily die. You must grind out enough experience from battling in that tiny area (shown above) to level up so your party of characters is strong enough to venture further. Random battling can be acceptable when implemented sensibly but still, it’s an incredibly difficult design technique to balance. So, when I found out Pokémon features random battling I was a little worried but GameFreak managed to charm me around to the Pokémon style of random battling.

Left: Trapped by Grass Battle Patches! Right: Grass patches Ahoy!

Pokémon allows the players to freely explore the world in a relaxing manner knowing they won’t ever be attacked without warning, unless they initiate the process by entering predefined areas that random battles occur. In Pokémon’s case, wild grassy patches (see above) scattered throughout the world that are often in the way of you progressing to the next town. This environmental cue makes up part of Pokémon’s metaphor vocabulary. What that means is there that are elements of the game that are metaphorically explained through a consistently applied design.

Another simpler example of this in action exists in the game Mirrors Edge, the game highlights areas where the player can interact by colouring these elements red. So anytime a player sees red as it were they know they can always interact with it. Although when interacting with a construction crane in Mirrors Edge you can only run on it and use it to jump onto the next area of the level, you can’t get in and operate the thing, as per the designer player agreement…

2007 Mirrors Edge : All red Environmental elements can be interacted with.

There is a hidden agreement that goes on behind the scenes when you are playing a game, and it is between the player and the designer. The designer must use metaphor to help the player learn and the player won’t complain when the element can’t completely replicate every property of whatever it imitates. For instance, in Pokémon’s case, you don’t go into the grassy areas set up a camp with some bait and sit for hours just trying to catch a glimpse of the Pokémon like some sort of Discovery nature show. You just move the character into the wild grass, and the random encounter will occur. There’s a set style of grass too that needs to be consistent visually so the player isn’t trying to initiate a hunt in the wrong kind of grass. GameFreak have used this technique to great effect and has solved a lot of the major difficulty and annoyance issues players have had with random battling.

3. DIALOGUE

Professor Kukui in the games opening scenes.

Playing a JRPG is all about a story that develops as you navigate through the world with your party of characters. And when your game is about story the player must converse with other characters, these interactions must be meaningful and well written to be effective at storytelling. Quite often JRPG’s can get very wordy and you end up finding yourself fast forwarding quite a lot of NPC chats. Then you’re running around just trying to find the right NPC who might have some slither of information worthwhile that might point you in the right direction. This is not fun, not engrossing and crucially not effective at conveying important game information. But doing it in the right way like Pokémon can have you enjoying every NPC encounter and in fact seeking out ones you might have missed.

The world ends with you and Baldurs gate ,fantastic games that can sometimes seem like a chore because of the really heavy use of dialogue.

Visually games use NPC avatar pictures with speech bubbles next to the them showing who is speaking and when, sometimes they use voice overs but that’s quite expensive and time consuming. Of course, all very useful UI Elements when used sparingly and in the right way. But the designer also must find a conduit to push technical information to the player too such as system messaging loading/saving, changing options such as sound and graphics settings and vitally the rules of the game. This information may be contained on a tab in an options page that has a slide show of the games rules and mechanics. But this isn’t a very effective method to feed the player game rules as playing games is an interactive experience, you didn’t play the game to read pages of instructions. So, games designers will use player interactions with NPC characters as ways of conveying important game rules and conventions.

Various mobile games NPC characters delivering information.

As mentioned these characters consist of a head and shoulders portrait and a speech bubble, and in some games, there is little to no effort to make them anything more. The examples above show the characters as basically a stripped-down mouthpiece for the designers of the game, ensuring that player adheres to the tutorials or buys something at the appropriate moment. All vital stuff that the game needs to communicate sure but it can be done with more finesse. I couldn’t tell you a single name of any of these pops up characters that appear in a lot of mobile games as they just end up becoming what they were not intended to be, UI noise. When characters like this are ONLY giving you, commands wrapped up as advice they lose a lot of their appeal and you just end up skipping what they say anyway.

Games with an emphasis on world/character development such as Esports titles do not really need an NPC driven on boarding experience.

It must be said not all games need to go to this much effort especially when story and characters are not that vital to the enjoyment of the game. These titles will take a more detached approach to divulging the rules using nothing more than tool tips and prompts. This is perfectly fine and suits a lot of game styles, such as Rocket League or FIFA (see above) as it’s not interested in building a universe, these are Esports titles that focus on little other than competitive multiplayer play. But when you want need a more personable approach to presentation design, Pokémon is the direction you want to go in.

Rather than telling you what the mechanics are they NPC’s keep you on your toes by interacting with you about them.

Pokémon’s charming approach to onboarding players using in-game NPC characters is a great way to enhance user information retention. Above you can see an example of the onboarding and Pokémon’s affable dialogue in action. The name of the game here is positive reinforcement, always NPC’s are on hand with meaningful messages and moral support. When you can associate a face to a concept it makes all the easier to retain information.

Left great use of system messaging when you separate the messaging visually from less crucial information

What separates GameFreaks attempt from most other examples however is that they have taken the time to do fantastic animations and humorous set pieces that beef up the world a little more too. There’s quite often a little joke or a cheeky comment slipped in when they are explaining some mechanic or system, all this again bolsters information retention as well as developing the games universe at the same time. Sometimes there is little side stories between NPCS’s that you might explain how certain Pokémon work.

Grimer and Muk

One nice little side story for example is about a garbage processing plant on the Alola Region and it is run by a father and son. They tell me that the Pokémon species Grimer eats all the garbage around Alola, an argument ensues and they make me battle them. And suddenly I am introduced to the evolved version of Grimer the super powerful Muk which I had never seen before (and still haven’t since!). This little subplot doesn’t really have to exist in this game but glad it does, these little touches just make the worlds NPC’s fun to seek out. And crucially these NPC’s interact with another NPC’s around you, and by doing so make NPC’s in general more than mirage only the player can see.

COMPARISON

We just examined 3 ways GameFreak has re-tuned a hardcore style of game design the JRPG and made it into something quite new and more importantly there own thing. GameFreak have really honed there Pokémon series down to a fine art, and by doing so they have had the time to craft a wonderful packaging to put it in. And part of that packaging is actually a character…

ROTOM!

Both screens of the 3DS displaying In world game play and Rotom on the bottom

One of my favourite characters in Pokémon Moon is a piece of UI, the ever present and helpful Rotom. Using the dual screens of the 3DS Rotom is always displayed on the bottom screen. In his default state, he displays a little mini map showing the character orientation and the next way point using the little flag as the marker. He talks to the player as well any time you load the game up he drops a hint of where the player should be going next. Incredibly useful stuff when you’re playing a game for hours that are made up of many play sessions, as It can be hard to remember what you were doing in your last sitting.

One of Rotoms animated emotes after prodding the touch screen.

You can also prod Rotom on the touch screen too and he will perform a variety of different actions. Laughing, hiding, spinning around and generally doing all sorts, has the most fun game map screen I have seen. But he has another talent, he in fact also contains arguably the most important UI element in Pokémon the Pokedex.

POKEDEX

The Pokedex Records your collections in each area of the game and tracks what Pokémon you are missing.

The Pokédex contains the culmination of all your hard work from your entire playing experience of Pokémon, it’s essentially a list of all the Pokémon you have caught and the ones you have still to discover. This is the essence of every Pokémon game it’s about is collecting and the search for Pokémon. So, when your viewing your collection it’s a screen that you will visit and perhaps show off to people a lot so it’s vital to make this screen vibrant. We need to show these wee guys in their full glory! and Pokémon pulls this off with nice big sprites that are well posed and rendered.

Pokedex Pichu entry along with other evolved sates of Pichu where you have seen them but yet to capture them.

ART DIRECTION

Pokemon Sun/Moon’s Alola Region.

As I have mentioned previously playing Pokémon feels like vacationing on an exotic island, and that’s exactly what the visuals present too. The actual story of Pokemon Moon sets up the plot that you are moving to Alola with your mother to visit/live. And I feel that the presentation of the game is all centred around making the player feel welcome here. Pokémon’s setting is set among a group of fictional islands known as the Alola region. Alola resembles the exotic tropical beauty of Hawaii and the bustling townships of the pacific islands.

The 3D environments express this in full effect with beautiful rain forest enclosures, scenic sunny beaches, and vibrant urban developments. As well as taking inspiration from the modern pacific islands Alola also has references to ancient Polynesian Kapa art that adorns various town signs and architecture.

Like any well art directed game the User Interface reflects the style and themes of the world it encapsulates. In order to keep this Hawaiian theme ever present the game has a nice little touches where select UI elements use subtle Kapa patterns, its a lovely bullet point for the overall art direction of the rest of the title. This enhances Pokemon’s world to have this coherent visual style from that transitions from 3D to 2D.

Kapa pattern designs from Hawaii and Polynesia.

Left: Speech Bubbles with subtle Kapa designs Right: Kapa designs with Wave shapes and bright tropical colours.

The approach UX/UI wise to always treat you like a visitor to the island and that making you feel welcome is the number one priority. Evidence of this presentation style is apparent on the first screen you see when you begin the game. The introductory setting up the game sequence is all made up of postcard style imagery.

One of the first UI screens you are presented with that resembles some sort of postcard

A particularly favourite vacation themed UI element in Pokémon is the wave title screen transition that pops up when you enter a new area. This works really well at the point where you reach Hau’oli City beach resort, as a little montage of shots plays that set up a nice beach scene. The animation sets up the scene nicely and brings even more thematically coherent visuals to the presentation as a whole.

Title wave animation example further pushing the Vacation setting, it could almost be an ident for a travelogue TV show.

The design on the info screen about your player’s stats and progress also pushes the vacation theme too, in the form of a passport design. As you progress through Pokemon’s trials you gain trainer passports, these allow you to get to the next area to meet new challenges. These screens are adorned with tropical hologram icons and Kapa pattern style passport stamps that represent each trial you complete.

Pokemon Player Info Card, its basically styled like a little Passport complete with Kapa Decorative designs.

The HUD for Pokémon Moon is simply an evolved version of the toy style design seen in earlier Pokémon titles with big bold colorful buttons and VFX. Pokemon Moon is incredibly similar although whats included now is the bright eye-catching surf designs and tropical themes that have been guided by the art direction.

Left:Pokemon Omega Ruby HUD Right: Pokemon Moon Hud

Other nice UI touches are little bespoke intro sequences for certain battles or Trials. Pokémon’s main protagonists are the Skull gang, and you will sporadically fight them as you battle through the various Pokémon island trials. To punctuate the importance of the fight with the main bad guys of the game a little Skull Gang intro pop ups just before the fight which feature their own theme song, which I thought was a great touch.

Skull Gang Battle Intro

There were only a couple of times the UI really jumped out at me as not quite hitting the high-quality benchmark GameFreak have set here. When you start, a trial mission a large tribal tattoo style graphic pops up with a not so great font layered on top and … a lens flare! I really wasn’t feeling tribal graphic either as it had a thick black out line which felt out of touch with the rest of Pokémon’s beautifully subtle line work. Also during the epic Z-move special attacks which have fantastic animations and VFX, but another off-style font gets dropped in on top with a strong drop shadow. Again, this felt out of place with the rest of Pokémon typographic subtlety.

The only examples that come to mind of UI design that was off style for me.

Overall though Pokemon is a fantastic example of a series that has a style that was coherent, unobtrusive and fun. I cant really think of any other games that’s pushed a Tropical vacation themed UI style before, its really quite unique!

FINAL THOUGHTS

Pokémon is an exemplary title that’s shows presentation is one of the most important aspects when a creating a 1st class gaming experience. It is an incredibly polished product that exudes quality not only in the UX but the art direction of the UI too. Although I am still having a great time playing Pokemon Moon and at 40 hours and I can’t see myself having any major gripes with the UX now, but early on in my play time I had a couple of issues. These are minor points but it feels like some legacy traits from the older titles were expected to be understood by players of the new Pokémon Sun/Moon game. One of these traits was when I would receive a “Tech Machine” or TM for short.

Left:“TM” or Tech Machines, in this case I though the game was giving me a hint I had to go Rest! Right: using a TM on a Pokemon in action I guess? :P

These are essentially just items you use to give Pokemon abilities rather than have them level up to unlock them. The semantics around this “TM” was quite confusing as you might be able to see from the above screen, I was not sure if the game was giving me a command to rest at this point. Even more confusing the icon for “TM” on shops signs and menus for is that of a Compact Disc! Why didn’t the designers just call them Ability Potions or something like that, again quite confusing to a newbie to the Pokemon universe.

Left: pp or power points Right: “TM” or Tech Machines, in this case I though the game was giving me a hint i had to go Rest!

The other legacy issue was one that I did not quite notice until I could not use abilities anymore and that was “PP”. Power Points as it where is displayed right on the ability button on the command menu, the number refers to how many uses you have left. These will keep depleting until you run out until you can you rest up at a Pokémon centre and that recovers the PP. There were a few times I found myself out of uses of the ability and a little confused to why. I am not sure if I remember PP came up during the onboarding early on in Pokémon but it did take me a while to work out what it was.

These are minor issues however for a game that has successfully manged to present nearly all of the games mechanics extremely well. One of the best traits about the presentation not feeling like I had to hunker down and study game rules inside and out as I have had to do in JRPG’s before. It’s really eye opening that GameFreak managed to breakdown hardcore JRPG values and then rebuild it back into a welcoming, relaxing and deep gaming experience. And the success of this I feel lies in the presentation, using simplicity, great art direction and charm levels not quite seen before in a game genre like this.

Th office of GameFreak are actually in Alola currently bashing the next Pokemon title I hope :)

A lovely little touch by GameFreak is that there studio is actually hidden away in an office building the player can go to on Akamai island. Being a games developer myself I really did enjoy this, it just another great moment that makes the game friendly and personable. It’s also endearing to see a lot of affection and excitement for Pokémon by the games creators this far along the series.

We talked at the beginning of this article about Hardcore gaming and even though Pokémon might not be on the surface a hardcore game it certainly has a serious legion of fans. There are many conventions and meet ups that go on through out the year all over the world to celebrate all things Pokémon. One thing for certain is that Pokemon fans are definitely hardcore, even to go as far as getting Pokémon tattoos!

http://www.smosh.com/smosh-pit/photos/taturday-pikachu-tattoos