Voices of UX

Fighting games’ UX holds the genre back — A case study into Street Fighter V’s UX

A look into the under-developed user experience of Street Fighter, and what creators are doing to lower the barrier to entry

Kaelan Khiatani
PatternFly

--

Chun li kicking Ryu in the face.
All screenshots are from Street Fighter V and are captured by author.

This article is the second installment of a 3-part series on the UX of fighting games.

  1. Fighting games’ UX holds the genre back — A case study into Guilty Gear Strive’s UX
  2. Fighting games’ UX holds the genre back — A case study into Street Fighter V’s UX
  3. How Street Fighter 6 is elevating the genre’s UX

Now, fight a new rival!

Street Fighter V (SFV) is the fifth installment in the ludicrously popular Street Fighter franchise. The game dropped in 2016 and was met with a disappointingly bad reception, and it had to innovate constantly over the following years to finally be deemed a game worth playing. As such, for the purposes of this article, I will only be considering the current and final build of SFV. Being the predecessor of the new Street Fighter 6 which prides itself on accessibility, it stands to reason that SFV had some issues that needed to be addressed.

Despite the importance SF6 puts on user experience (UX), every Street Fighter game has a responsibility to be accessible. A release in this series invigorates or dampens the entire fighting game community. Back in 2009, the entire genre was in peril up until the release of Street Fighter IV. As such, the franchise carries a large burden on its shoulders. The UX of Street Fighter has an obligation higher than a typical product to be welcoming to new players.

Welcome to the world of Street Fighter V!

Menus and UI

The main menu of Street Fighter V

This is the screen a new player is welcomed with upon opening SFV. This menu contains a multitude of options that the player can dive right into. Well, not immediately as there’s a prompt to immediately enter a tutorial. We’ll get to that tutorial later, but first, let’s address this menu. Particularly, I want to look at two very strange things in this menu: 1) where the tutorial is located, and 2) where demonstrations are located.

The story menu of Street Fighter V. The tutorial is located under this tab.
The challenge menu of Street Fighter V. Demonstrations are listed under here.

Now, you would see the word “tutorial” and maybe the word “demonstration” and imagine that they would certainly be under the Training mode. I mean, a tutorial is for training you how to play the game and the demonstration mode is about showing you how to play the game. Moving to training, however, only installs confusion and mild frustration in the user as it only brings up a stage select option instead of a menu like literally every other option. If you wanted to actually find the tutorial and demonstration options, you would have to go on a voyage to the story tab for tutorial and the challenge tab for demonstration. Why? I don’t even think Capcom, the game’s manufacturer, knows.

The stage select screen of Street Fighter V. The Grid Alternative is being hovered over.

Instead of navigating the menu aimlessly, the developers could put the options under training. It could have a sub-menu, like every other option, that could make the users’ lives a whole lot easier. I would put the cursor automatically on the lab so that experienced players can just mash into it without thinking. This change would allow the menu to keep its option in a familiar location to veterans whilst allowing there to be “breadcrumbs” that lead new players to the place they want to go to.

As for the rest of the menu, it’s all pretty straightforward. It doesn’t have as many microcopy issues, but I’d argue that’s because it doesn’t have nearly as many resources. The missions tab in this game is just a tracker for how many things you do in a game such as “play a casual match” and its tutorial is not nearly as expansive. Speaking of which…

The answer lies in the heart of battle.

Tutorials and Demonstrations

The tutorial of Street Fighter V. Depicts Ryu beaten on one knee as Gouken and Ken look on. Gouken says, “Ryu, you’ll never find the answer you’re seeking if you just proceed blindly.”

The initial tutorial takes place in a training session between Ryu and Ken, as well as their master, Gouken. It spends half of its time having these three talk amongst themselves.

The tutorial of Street Fighter V. Ryu is facing off against Ken. The directions on the screen describe that you need to hold forward to move forward.
The tutorial of Street Fighter V. There is a giant text that says success as Ryu has successfully punched Ken.

SFV’s tutorial is very rigid. You have to do what the text tells you to do at any given moment to progress. Every time you perform the task, the game takes control away from the player and has a large “success” pop up on the screen.

There are also a few tips that appear on the screen. One of which gives you incomplete information as it says that you can block a jumping attack by just holding back directionally, but you must figure out yourself that you need to be standing while doing so. If a new user tries to block the attack by holding down and back as they did for blocking a low attack, they will swiftly be hit. I suppose that the surprise is a better teacher than the tip itself, but good UX is about avoiding possible frustration that could come with incomplete or false information.

To improve this experience, I recommend clarifying the instructional text.

Before: “You can guard jumping attacks by pressing the directional button away from your opponent.”

After: “You can block jumping attacks by pressing the directional button away from your opponent while standing.”

This tutorial also lacks any details on how to input special attacks, supers, or combos. It does, however, go into the system mechanics like v-trigger and v-skill. V-trigger is a unique move that every character has that tends to either enhance their moves or deploy a large-scale special attack. This is attached to a meter in the bottom corner of the screen and charges whenever you are hit or whenever you hit someone. V-skills are unique moves that each character has that can vary in use and application. Both of these options can be swapped out for one of two options, which allows the user to customize how they play a character.

In summary, I find that this tutorial is a bit off the mark as it doesn’t allow the user to explore things on their own, nor does it allow the player to test their skills against an opponent that’s an actual threat. Ken never attacks without a giant indicator above his head telling you exactly when he’s going to hit you. In my opinion, this doesn’t adequately prepare a beginner for their first online match. The time spent listening to a story that would typically not interest the user could also contribute to a lot of frustration as the flow zone of the tutorial is disrupted by inaction. The flow zone is the golden area of video games where the user isn’t bored, but also isn’t stressed out by what is in front of them.

The tutorial also does not direct you in any particular direction after you finish it, but there are a few resources that new players can get into before they hop into matchmaking.

The demonstrations mode of Street Fighter V. It describes how to do a left-right charge motion.

The demonstrations tab is meant to be a collection of videos that inform you on how to use a character’s special moves. There are a few positive aspects, one being that they delve into concepts from basic to advanced and play a video of how these things work. They also have character guides that go into how each individual character’s special moves work.

The cons of the demonstrations come from how they’re designed. They’re just videos with text describing what you can do or have to do in each given situation. The character guides even promise to give counter-play to each character… which is a lie. You can’t try any of the special moves or interactions that the demonstrations describe to you, all you can do is observe.

In addition to this drawback, most of these demonstrations are completely outdated. Characters in SFV have been changed countlessly throughout the game’s lifespan.

The demonstrations mode of Street Fighter V. It erroneously describes how to do a down up motion for a move that doesn’t use a down up motion.
The demonstrations mode of Street Fighter V. It describes how to correctly input a dragon punch input which is the correct input for this move.

For example, Balrog’s first tutorial incorrectly describes the move ‘screw smash’ as a down-up charge motion. In his next tutorial, it corrects itself by describing screw smash as a ‘dragon punch’ input (which is the current way to input that special move). I can imagine a new user going into the demonstrations, pressing the first tutorial, and then being confused as to why they can’t input that special move. I would recommend consolidating the demonstrations into one single updated guide for each character.

The training mode of Street Fighter V.

Finally, let’s take a look at the last tool that SFV has for learning the game which is the training mode, or lab as I mentioned earlier.

From the get-go, there’s a lot going on the screen. There’s a frame display and an input reader on the left and right of the screen. This gives me something that was sorely lacking in many other fighting games’ training modes, which is the frame data of certain moves. The worst example of this is in Tekken 7 where you pay to see frame data.

The training mode of Street Fighter V. It depicts the character Balrog hitting Ken. Balrog is at an advantage state so he’s highlighted blue whilst Ken is at a disadvantage state so he’s highlighted red.

These meters and bars can all be disabled in the menu, which I find to be a good thing as the barrage of information on the screen can definitely be overwhelming for a new user. There are also other handy tools you can add, like making a person flash blue when they’re plus and a person flash red when they’re minus. Being plus means that you have an advantage in a scenario, and you are safe to press another button without being punished. Being minus in a situation means that you are at a disadvantage in a scenario, and if you press another button you can be punished by your opponent for doing so. The minus person being red makes sense as the color red can give a negative connotation which communicates that the user is unsafe in this situation. The plus person being blue then also makes perfect sense as a person is safe to press another button. The color blue communicates safety and trust so the choice of color is decided properly. You can also see in the image exactly how many frames a person plus/minus next to the word “frame”. There are also details for people who like statistics, like damage, stun buildup, scaling, and more.

The training mode of Street Fighter V. This image depicts the menu.

In the menus accessible in the training mode, you’re also able to set the training dummy to do anything you’d want them to do. This is useful for practicing specific scenarios and checking how your options interact with an opponent.

The training mode of Street Fighter V. This image depicts the menu.
The training mode of Street Fighter V. This image depicts Ken about to roundhouse kick Balrog.

Additionally, there is a recording option that allows you to record a scenario for your dummy to act out. You can then save that recording to a slot and have your opponent alternate between those options.

That’s about all SFV has with respect to its tutorials. I have to say that in comparison to more recent entries, it is sorely lacking in ways to ease new users into learning fighting games. This is especially bad as Street Fighter is a series that feels horrible to jump into. It’s slow and it’s hard to do anything that feels cool until you have a baseline understanding of the game. Resources for new users are important in order for their experience of the game to be enjoyable.

A user’s positive introduction to a product is also necessary for the product’s success. After all, if they can’t figure out how to use a product, they won’t use it.

The fight is everything.

Matchmaking

This image depicts Akuma hitting Ryu with a shot to the back.
Image from the Street Fighter Youtube

After playing through all the tutorials and watching all of the demos, the user now can use the skills they’ve amassed by going into the grand world of SFV matchmaking. Like many other fighting games, there’s an intended method of getting into matches and a more intuitive but tucked-away version of finding matches.

The main menu of Street Fighter V.
SFV’s main menu

The most in-your-face way of finding matches are three tabs on the main menu: ranked, casual, and battle lounge. Battle lounges are made for grinding out long sets with friends. It works well, but I dislike how multiple people can’t play matches at the same time, unlike most fighting games

The matchmaking function of Street Fighter V.
Looking for an opponent.

By selecting the ranked or casual match options, you’ll be brought to this menu which allows you to customize which stage and character you want to play. You can also disable matchups against people using different hardware and decide which connection status you’re willing to go up against. Giving the user more autonomy over their matchmaking experience is typically a great thing as certain players may have their own preferences on what opponents they want to play against. For example, PC players may not want to match with PS4 players due to the console having overheating issues that can cause matches to have poor performance.

The fight request screen.
The user is able to use training mode while looking for opponents after using the fight request screen.

The best way to find a match, in my opinion, is to go into training mode and activate network fight request. This will allow a player to train or do whatever they want while searching for a match. You can also set the confirmation to “ask”, so that you may view the connection between you and the opponent before you enter a match.

I find this to be the best way to get into a match in this game, so it’s bizarre that it’s so tucked away. This seems to be a trend in fighting game UX, and one I wish would stop immediately. Your product’s best features should be the easiest to find and use.

So, in summary…

Ryu hitting Sagat with a shoryuken. It is done on a stage with a statue of Buddha in the background.
Image from Street Fighter Youtube

Street Fighter V’s UX comes with a plethora of problems. The tools and tutorials it provides are lackluster. The tutorial doesn’t allow new users to test their skills in a controlled environment. It also brushes over a lot of useful information that new users should learn. The demonstrations tab is flawed as it doesn’t let the user practice the concepts it talks about. In addition, the tab isn’t up to date with most of what it’s talking about. SFV fails with the tutorials it provides, and they’re not nearly as ambitious as its contemporaries.

But SFV also has a few streamlined features that I wish some other games adopted. The menus are organized well, besides the tutorial being spread into strange areas. I also find that, in most cases, the microcopy properly guides the user into naturally finding what they are looking for.

The matchmaking is solid as well. It shares the same issue as many fighting games with its main method of finding matches being subpar compared to a hidden alternative. Either way, both methods work well and don’t often have errors.

As of this publication, Street Fighter 6 has been out for a month now. Capcom has been advertising this as the new generation of fighting games for a long while now. It boasts plenty of accessibility and UX fixes compared to its predecessor, so in the next installment of this series, I’ll break down just what exactly SF6 does right and wrong with its UX.

Have a story of your own? Write with us! Our community thrives on diverse voices — let’s hear yours.x

--

--

Kaelan Khiatani
PatternFly

Mid level fighting game player with a passion for writing.