5 crazy things JRPGs can teach you about UI Design
Oh no, I'm about to get super nerdy again. Well, it's to be expected at this point. Especially since I just completed the massive and immaculate roleplaying game known as Tales of Berseria.
I also subsequently cried like a baby at the ending. But that's not the actual point of this article.
The point is studying UI / UX Design from a different lens: gaming.
I have a lot of other points, so if you're not interested in reading a text wall of me nerding out, you might as well escape from this optional boss fight while you still have a chance.
You won't get 100% on the game though, so think about that before you hold R2 and L2, please.
There's a bit of backstory you need to know before I start digging into the good stuff:
I'm 30 years old, my first gaming system was the Sega Genesis, I can't escape from the 80s and 90s, and apparently tech professionals only started using the buzzword Gamified officially in the past 6 years or so.
This comes as a surprise to me, because games have been in the "gamified" UI business long before the contemporary tech usage has been around.
I've also been obsessed with it for far longer than mobile apps have even existed.
"How do they manage to make the X button create actions in the game?", little-me wondered.
Why is this specific font used, and not something more aesthetically pleasing?
Granted I was very young at this point, so the thought was more "Hey, that's cool, how do they do it?" and less expertly articulated than I'm currently framing it.
These are all concerns that UI and UX professionals must address: readability and accessibility, functionality, aesthetic, choice, and delight.
Video games address all of those things and more, and oldschool JRPGs especially had to address them with severe technological constraints at the time.
Sadly, it seems like I'm the only crazy old nerd who cares this much about an entertainment industry that laid the groundwork for the unyielding buzzwords that now plague UI / UX.
Especially when I suspect they've been all but forgotten.
Enough context, let's get to the heart of the matter, or we'll be here for eons (see what I did there? Heh).
Here are the 5 crazy things JRPGs can teach you about UI & UX Design, as told by a girl who apparently has an unhealthy obsession with them.
1.) Readability and Accessibility were gigantic hurdles for antiquated systems, and their boons and failures are exemplary educational tools.
Aesthetics are great. Design is great. But if the product does not function in a way that people can actually read, understand, and use, it doesn't matter how pretty you make it.
This is why UX has become such a big deal, because for a long time we forgot that pretty did not equal usable.
(If the pictures on your website are more than 100kb in size, you have a problem. I'm just being real here.)
Self-obsessed design is quite simply the worst.
This is coming from someone who is designing a homepage for her agency that looks like "abstract art hot garbage".
I'm the worst, it's official.
But the point of the matter still remains: if your users can't read it and use it, or using it is a pain in the butt, why the hell are you doing it?
Take this insane screenshot from FFVII. The blue is simply far too striking, but what other choice could the development team have made at the time? Ah, they gave you the option to change the color of the background...
That's accessibility coming into play right here, baby.
Also take note of the font. White text on a dark background, drop shadows, with bold typography signifying certain functions and features.
Everything is spelled out pretty clearly here via font weight, font family, and hierarchy of information. It's ugly as hell, but it gets the job done.
The tricky thing during this time was that many of the text dialog did not have accompanying voice acting. Simply put, the hardware couldn't support it.
This put a barrier in place for people with seeing difficulties, who still wanted to enjoy the game.
Range of movement was also an issue. Though the Playstation controller is a modern marvel when it comes to ease of use, it still is unwieldy for the differently abled.
Our technology is better now. Our software, our hardware, the options we have. There's absolutely no reason why your app shouldn't include accessibility features or be as readable by human eyes as much as possible.
If your design philosophy hinges on how "cool" something looks, you are absolutely missing the point, and should resign and forward my resume to your boss immediately.
Cool shouldn't even be a part of your vocabulary.
Where FFVII fails with readability and accessibility, you can learn a lot. Where it succeeds, you can understand the limitations of the technology then, and hopefully understand your plethora of design and experience options still need to fit into the same human-appropriate context.
2.) Functionality is always the name of the game. However, when it came to older games, it wasn't quite a deal-breaker.
As the technology during the Golden Era of JRPGs (think: late 80s, early 2000s) was lacking, game developers often forced players into situations so shitty that UX designers the world over would now feel physical pain upon use.
UX functionality is roughly defined as being easy to use for the lowest common denominator--the layman.
Does the submit button you just slapped into your app make sense? Will most people understand that this arrow means proceed? Those are the questions all UX professionals grapple with.
Take my new bae Tales of the Abyss for example. I have yet to find a world map option and have already spent over an hour running around the wilderness with my new game cru--I mean this red-haired dork right here.
No, I don't have a strange affinity for spikey red-haired swordsmen, why do you ask--oh, that Rurouni Kenshin article? Hahaha. Haha....Ha.....shit.
Back then, users were picked up and thrown head-first into situations. There were ample tutorials, but obviously things were missed, or just simply weren't thought of at the time.
Nowadays, you kids are spoiled. Yes, I just legit said that and am realizing how old I truly am. Algorithms can now even predict what would delight users most or prompt users to take an action even before they've decided their path yet.
Oldschool JRPGs did not do this. Hence, you're spoiled.
But there is a wonderful outlier I'm going to mention, and one of the best games of all time (in my not-so-humble opinion): Final Fantasy 9.
There's this function of oldschool JRPGs that feels more like a flaw than a feature: item finding.
I remember running around countless areas trying to find items or gold / gald / zeny / money / whatever, and having to mash the X button in hopes that a clever developer left some loot in a drawer or something.
FFIX does it better. When you approach an item of interest, a little exclamation point pops up over your character's head.
After screaming through several other games trying to get all the rad stuff, I really appreciated this option.
Your app should be easy to understand. This is why UX exists in the first place. Because the user's experience comes first. If they can't understand how to use your app, they aren't going to use it.
Simple as that.
I'll still dredge along the oldschool JRPG circuit though. The nostalgia and delight factors are too high for me to ignore.
3.) Aesthetic decisions create a narrative for your user. Gaming had that shit on lock ages ago.
Chrono Cross is a Playstation 1 fantasy game, and a noble successor to the rightfully beloved Chrono Trigger. Notice the UI for the dialog, particularly.
Chrono Cross takes place on various islands and has a pretty "beachy" feel in many cases.
The glowing crystalline object on the table shows me it's a fantasy game, as does the character portrait, the lighting, the color palette.
This screenshot tells me basically everything I need to know about how the game will make me feel, and the narrative it aims to spin.
Where Tales of Bae--er Abyss is concerned, the colors are far more muted in shades of brown.
It's also a pretty earthy game in terms of exploration, and it's obviously in the fantasy genre.
Pay attention to the UI design, again.
The creative team could've gone the way of the Final Fantasy series and relied on economy on information, or KISS: Keep It Simple, Stupid.
But they didn't. Instead, they opted to make the actual feel of the UI reflect the feel of the game.
If you're developing a healthcare industry app for example, stop making shit orange and green. Go for blue, as it's basically the universal color trope for healthcare, and it's a calming color.
Also, Uber's new design is disgusting and confusing, and the logo is bad and you should feel bad. I could write a whole rant on this, but I'll refrain.
Parasite Eve is a vastly underrated science fiction / horror JRPG, and it's UI speaks to the same tone, albeit a bit clunky in its execution.
Notice the colors used in this battle screen, and even the art direction in the static landscape.
Parasite Eve is strikingly green and blue, and has some strange design choices to be plain, but the logic isn't missed here with me.
Your design decisions should reflection the function of your app. Just because gradients are cool, doesn't mean they make sense for what you're trying to do.
Fun Fact: Form must marry function. The fact that UI designers sometimes go ape-shit and make design decisions based on the "cool" factor, when I was taught that fact in a painting seminar at a liberal arts college, is not lost on me.
It actually lowkey pisses me off, to be honest.
4.) Choice is critical. In UI / UX, the absence or addition of choice can change the entire function of an app. Game narratives are no different.
The whole reason I wrote this article didn't actually have to do with me completing Tales of Berseria.
It had to do with me picking up my recently purchased copy of Tales of the Abyss and coming upon this decision:
I was asked to make a decision about leaving the carriage I was in to walk to a town, or staying in it.
I chose to stay in the carriage, why walk if I'm already inside the bloody thing? But the fact that there was an option stuck in my mind.
Did I miss something, some valuable item? I can't go back, I overwrote my save file.
Therein lies FOMO: or fear of missing out. That's an incredible psychological choice to impose upon your user, and I was struck by how much this affected my playing style for the next hour or so.
I wanted to explore now. I feared I had missed something important! I couldn't let the world of the game pass me by.
This, you must learn. The offering of choice, or the withholding of choice, is a powerful psychological tool when it comes to UX.
Any marketer will tell you that psychology and the way humans behave is basically their #1 focus in helping meet the KPIs of their company / client / etc.
When it comes to UX, this should be understood. I expect you to take psychology into consideration--that's the name of your game, that's the role of your job. The roadmap between point A and B is your focus.
Offering a choice is powerful, extremely so. But so is denying a choice.
I could not go back and explore. Now, I want to.
5.) Is your app delightful to use? No? Then nobody wants it. If old-ass games can make things engaging, you can make things engaging.
Oldschool JRPGs had to overcome hardware and software limitations you'll never understand unless you've made a game before.
I know, I'm making a game and have an ancient-as-hell copy of RPG Maker that makes me want to bash the controller into my face to this very day.
How can you employ and craft an engaging narrative around your brand and app using UI copy, UI Design, and UX processes?
Isn't that the whole point of UI / UX / CX / whateverX? To get people to install your app, enjoy your app, use it, feel compelled to interact with it, and often?
Then delight is your answer.
And there is no more delightful a game than mother-f*cking Xenogears.
I know, I know. You're staring at me like I have 8 heads. This game is heavy. It's heavy, it takes no prisoners, and it's cripplingly sad.
It's far too heavy for many kids to understand, but boy did I understand it.
When I talk about delight, I don't just talk about pleasant things. I talk about powerful engaging things, things that make you think, product stories that grip you so hard you'll never want to let go.
The FOMO aspect is one thing. So is the nostalgia factor. But when something is incredibly moving, that really will keep people coming back for more.
I could have used any other example in this horribly gigantic and nerdy quasi-thesis about UI / UX and JRPGs, but I didn't.
I picked Xenogears for one extremely specific reason:
The game wasn't even fully finished, the second disc was somewhat of a dumpster-fire, and yet it is still heralded as one of the penultimate roleplaying games of all time.
It is that powerful, even if the product wasn't complete.
Your one pivotal goal is to make something people will use and keep coming back to. Your app also has to function, and to function it must be complete.
How then did an incomplete game made in 1998--when I was only 11 years old no less--spawn undying love from so many different people, myself included?
Narrative. The story. The feelings. The FOMO. The cultural impact.
UI Copy is your answer here. I know plenty of business owners, founders, "Idea People" and what-have-you that actually don't employ UI copywriters.
They just scribble down some text, there are leaps in logic, and there is a miasma of boring, and a deluge of "blah".
That seems patently insane to me. Because the narrative of your app's story is tragically important to the overall adoption of your application.
Persuasive writing is insanely powerful. You're reading this right now. It's far too long and niche.
But I spent two hours writing this persuasively to get you to care about old-ass games and UI / UX.
That is how important UI copywriting is to me. It should be similarly important to you, if not moreso.
That leads me to my final, final point. The UI / UX Tutorial Battle is almost over, make sure you finish it for max EXP:
My entire career has been created out of story, narrative, words, persuasion, and passion.
Where is your passion?
Why did you even make your app in the first place?
Do your users even really need it?
What experience are you trying to deliver to them?
Why do you make the design and functionality choices you make?
Because there's a "U" in all this, and no it's not "you" as in the founder / CEO / designer / architect / developer / shareholder / whatever.
It's the users. Their experience.
Users come first, always. Your needs come second. JRPGs knew this, despite the tech limitations. You should know it too.
Now I'm going to go play Tales of the Abyss and stare at the red-headed guy some more, while I bask in the nostalgia.
I hope those of you that have read this gigantic nerdy clusterf*ck article leveled up a little bit, or at least gleaned some valuable EXP.
But at the end of the day, the only thing that I'm actually concerned about is your users.
They're the ones I'm making the work for, after all.
--------------------
Special thanks to Renato P. dos Santos for his continued support.
Kira Leigh is a writer, gamer and game enthusiast, digital creative, and small business owner.
Send her a line if you want to work with her.
Or join her on Discord like the giant nerd you are: windows95toasteroven#3745
Copywriter | B2B content writing & marketing | I write SEO-optimized, high-ranking copy & content for SaaS businesses
6 年You discussed UI and RPGs without mentioning the Persona series? Great post by the way, there's a lot be learned about combining functionality and aesthetics from RPGs.
Operations Assistant
6 年BEAT LUNAR 2?
Tour Manager (Kpop), Event Producer & Marketing Professional
6 年I love how you think. This brought me back to my young gaming days, first system was an Atari 2600 and to this day I will attack a stand up Galaga or Space Invaders video game console with vengeance. I wish I had the thought of "how does this work" when I was a kid. Never too late right? :)