Persona 5’s Interaction Design is the best!
After over 50 hours clocked in the latest Persona game, it’s official, I am madly in love with it. From the catchy music, to the edgy Picaresque tone of the story and visuals, to the sheer personality and youth that it’s dripping with. What does stand out the most is the user experience and visual design of every one of it’s interactions.
Persona
Up until the Persona series came out, you would never see the words Role Playing Game and High School, in the same sentence, let alone the same article. Persona 5 is a game where you play as a troubled teenager getting through a year in high school. Which involves you navigating through all the day to day highs and lows of school, making friends, balancing studies and hanging out, as well as kindling romances with classmates.
To top it off you have an alternate life, in the case of Persona 5, you play a thief who steal bad people’s hearts by invading their mind castles. Along with your friends you are part of a group known as The Phantom Thieves of Hearts. You explore this dangerous world filled with shadow monsters, conjured up by hearts and wills twisted with stong emotions. This is where the traditional JRPG intersects with Persona’s social life.
Shin Megami Tensi: Persona first came out in 1996 and was a game that was mostly in Japan. It was not until Persona 3 that I had got my hands on the series and loved every bit of it. Persona 4 was when Atlus got the formula just right, marking the coming of age of the series. In a Famous Five mystery novel like adventure involving a bunch of loveable teenagers. Persona 5 take’s that same formula and multiplies it significantly. Before we jump right into the gushing part of this story, let’s look at what really makes a JRPG tick.
Deconstructing JRPG’s and their UX
At it’s core Persona 5’s is quintessentially a JRPG, Japanese Role Playing Game. The most notable examples are the Final Fantasy, Dragon Quest and the Shin Megami Tensei series, which incidentally is where Persona’s humble beginnings are. The main characteristic of JRPG’s are lengthy stories with turn based battle systems that employ the use of several menus. So if you need to launch a devastating fireball, at your turn you need to wade to the magic submenu, select “Black Magic” from there and then select “Fire” or the more powerful “Fireaga”. Thus select attacks for all your party members, usually three of them.
While this may seem really boring, it’s actually very exciting because of that extra layer of strategic thinking. You see, enemies have weaknesses you need to exploit. Plus they have attacks that can cause damage or even status effects like putting your characters to sleep, or inflicting poison, or even confusing your character into attacking one of your own. So through these menus you need to gain complete battlefield control, managing your healing, studying your enemy’s tells, so you can juggle effectively between defensive magics and offensive magics. So the interface has to have everything within reach. Plus it needs to communicate to you the deeper systems like equipping the plethora of weapons. Levelling your characters up effectively and a lot more. In JRPG’s, you can only defeat evil by first mastering the system given to you.
It’s a fine line to tread, on so many different levels. People who play JRPG’s are those who love delving deep into blood and guts of a game. So a great system has to be complex in the sense that it has to unravel, in the same way a great book hooks you in. In many ways learning the system is as exciting as experiencing the story. Throw too much lore and too many menus, the player will just get confused and bolt. Too little and the player may find it lacking in depth and get bored. To add to that, these menus should be visually exciting. It’s a video game after all.
To achieve this, JRPG’s have a heavy reliance on paradigms and patterns already set, broadly classified as action areas. Which mostly fall into, what I would term as, the In Battle and Master Menu. When you need to equip and outfit your characters, or level them up by choosing skills, manage your party and items. You can press the menu button anytime out of battle to bring up the master menu. Which is a fairly straightforward hub and spoke model. When you’re in battle though, things change a fair bit.
If you have played any Final Fantasy game you would have noticed the Active Time Battle menu system that’s now become a norm. With the action taking place broadly on the central area, with the bottom taken up with the menus that house the commands. Several games have done their own twists on the ATB to make them stand out. That’s another story for another day, let’s see what Persona’s done with the traditional JRPG system.
What I love about the Persona UX
Persona 5 is very different from the conventional JRPG’s mentioned above and yet very similar. It not only juggles the world, battle and master UX, but what I love about it is the style factor that’s woven in perfect harmony with the user experience.
It’s like the vitality of youth have infused the menus with a lazy pulsing energy. All bathed in crimson, the style stays true to the central theme about hearts. With accents of black and white symbolising the characters as prisoners, as the Protagonist and his friends are constantly portrayed in prison garb with ball and chain. Essentially trapped in their own lives by their circumstances.
This styling permeates through the entire visual framework, accented by the motion design. A pulsing beat of it’s own heart, as angular edged boxes come to life with stylish halftone character silhouettes and abstract shapes. The master menu’s typography is fantastic, eschewing normal text for a stylish representation of a ransom note multi font cutout.
At no point you will get lost in the menu, as there’s always helpful hints that come up as cue cards at first. Then as little tooltips or as descriptions that are peppered unobtrusively around the UI. Just zip on over to a characters stat screen to check out his vitals or hop on over to the abilities menu to see what magic the characters can cast to heal in the dungeons.
When roaming around the dungeons, the screen UI is very reactive, with a slight colored shimmer indicating the detection level in the palace. Apart from just your portraits and the date, which I’ll explain the importance of in a bit, the screen is clear of clutter. What’s more is that as you explore, your characters keep speaking to you or each other, which come up as lively black speech bubbles. While as prompts such as enemy alerts or corners you can hide behind appear as you move along. A feature I loved is that at the press of a button and heal your entire team. No more jumping through menus triggering healing magics.
In battle, your character literally explodes into the menu. Instead of wasting time cycling through the options, you just press the button to trigger that attack or open the menu of abilities. Incidentally the exploding menu style has actually become a meme.
Each attack item has big fonts and a clear mention of the cost in hit points or stamina points to perform it. What’s handy is that it also shows the abilities that can hit the weak points of the current enemy. Which is useful information to have upfront, eliminating the frustration of switching back between menus and focusing your view on the battle.
There’s so much hidden depth in the battle menu’s. It’s delightful to see how the camera jumps between the gun mode with a superb illustration depicting how much ammo is remaining. Also the scanning ability not only shows you the weaknesses of the enemy, but also it’s personality. So when you attack it’s weakness, you go into a “Hold Up” state, you can choose to spare the enemy and make it join you with a series of conversations, who’s choices you select based on it’s personality. The “All Out” attack animation deserves a special mention, as the entire view explodes into red glass shards with our heroes faces on it, before a dual tone screen shows the mayhem that ensues.
The after battle stats screen is one of the most unique I have seen in a game. Where most games rely on one screen with all the information at once. Persona shows the Protagonist start a victory lap of the battlefield with his friends while as all the spoils of war are presented one by one in different attractive formats. Like the character’s who’ve been levelled up get their portraits pop in with a bubblegum sound, while as the money earned rolls in with the clink of counts. Amazing auditory and visual cues taking you through what you have earned from this difficult fight. You can see in it action in the gif below.
As the Protagonist, you have the ability to choose between several guardian creatures called Persona’s. Which are displayed with clear stats outlining their strengths and weaknesses. As well as the powers that they let you take control of. All of these elements coalesce into a brilliant, stylish experience, that is a stark contrast from traditional JRPG’s.
What Persona is known for is the social links. Where you have to manage several confidants who have a corresponding Tarot associated with them. The more you spend time and strengthen your relationship with them, the stronger your bonds become, which will have an impact in your persona’s aligned to that Tarot. These links have their own storylines which run parallel, like one girls desire to become an actress or your best friend’s angst as he’s booted out of a sports team. Persona helps you keep track of these friendships with little summaries as well as the level they're at and what special abilities you get.
Roaming around the little sandbox levels in the real world is a visual treat. As you see in game approximations of real world places like Shinjuku, Ginza, Shibuya, all slices of life into Japanese youth culture. As you walk around in you hear and see typographic elements that indicate whispers of people talking about current events. These little icons appear throughout the game, even in conversations with friends you have little emoji’s depicting confusion, irritation or happiness. As well as appreciation in the form of little musical symbols that are also points you earn. All these visual cues serve well in drawing you into that manga infused world of Persona 5’s Japan.
Persona does a fantastic job in marking the passage of time by keeping it as the primary node in the information architecture. With all the goals being time sensitive with a deadline where you have to change a targets heart or there will be a bad event triggered if you run out of days. That said you can manage your time however you want. Through the beautifully designed IM messenger you get invites to hang out, or you check the weather and plan your studies on rainy days. Plus there’s day specific events, like on Sundays the Shibuya station juice guy has a special stat booster or on Thursdays they use extra medicinal herbs in the public bathhouse. You manage this time all with the help of your IM, calendar and Morgana.
Morgana
Halo’s Masterchief and Windows has Cortana, Amazon has Alexa, Apple has Siri the same way Persona 5 has Morgana. A funny and mischievous cat that also acts as your personal assistant. Acting as a guide, trainer and codex to the mysterious other world and later in the real world as a sort of an assistant and as an invisible wall that keeps you focused. He let’s you know about things that you may have forgotten, helps you make lockpicks and even tells you if your friendship with someone is about to hit the next level. In battle Morgana gives you loads of tips and even congratulates you for successful hits.
Persona also uses Morgana is used to restrict you from free choice at certain days in the game. Like when you want to go out and chill at Shibuya at night with the lovely Ann Takamaki, but Morgana gives you no other option but to sleep because you have to advance the story event the next day. This has caused a bit of an annoyance amongst gamers but it’s brilliant from an experience standpoint. When the game restricts you from going out by putting up a system message, you chalk it up to the game being anal. Yet when there’s a cute cat with big blue eyes telling you to chill, there’s that delight factor going for it.
Another way of looking at it is that Morgana fills in a parental void thats missing from the Protagonist’s life due to his circumstances. In fact, in the early parts of the game you have to earn the trust of the owner of Sojioro who acts as your parental guardian, then only the night hang out spots open to you. Morgana keeps you on track the same way your mother would. As a player you may be in your late 30’s, but in the game you’re a 17-18 year old.
UX Lessons you can take from Persona 5
As a UX designer my first takeaway from Persona 5 is the style and how the UI as well as the Visual Design stays in character throughout. Never breaking theme, no matter the case. The master menu is a testament to how well it keeps you within the game world. Where most games trigger just a generic menu that is fairly dissociative to the main world, Persona 5’s menus are filled with life and zest. In a world where most apps are following design patterns, maybe you can design an app that completely breaks the norm while staying within the guidelines. Essentially what I am saying is, don’t be afraid to do things differently, to ensure you stand out from the crowd in a good way.
Another takeaway is the motion design, which not only is used for eye candy, but to also draw certain things to your attention in fairly chaotic screens. Like the little moving up and down arrow when you’re equipping weapons or the explosion of options in a battle screen or even the slight pulse of a red warning around the edges of your screen as you’re ambushed.
Even the transitions between screens are slick. Employing little animations to offset the tiny loading times that may be there. Like when travelling on the subway, the scene transitions shows illustrations of people standing. Walking out of your classroom shows students walking by in a rush, and occasionally there’s you’re friend Ryuji who appears with a look like he’s scheming something, which is always usually is. These little touches really help push the style along. Even the menu’s have these little action transition animations which look fantastic.
Young love
Persona 5 not only takes me back to my college days, bringing memories of first meeting my wife and hanging out with my college friends together. It also reignites that love for design after being immersed in that beautiful UI for over 50 hours and counting.
Everyone should experience Persona 5 for themselves, to see how brilliant the game is. Not only is it a visual treat but also an edgy story that breaks the boundaries of convention.
