GAMES UX
UX Review: FIFA 21 vs. FIFA 11
Exploring and comparing the interface designs of one of the most popular sports simulation games 10 years apart
This UX review will explore the interface design and the UX implications of Electronic Art’s biggest franchise of all time: FIFA. With 28 installments as of now (29 considering FIFA 22 is around the corner), this hit franchise shows that football is a sport people love to experience in-person, while watching from the big screen, and even with a controller.
For those who haven’t given the series a try, FIFA is an association football simulation video game and has continued to give fans a new game each year.
For this piece, I will compare the interfaces of the latest entry in the series, FIFA 21, and its 10-year-old predecessor, from where the true next-gen of soccer games began: FIFA 11. My goal is to share my thoughts on the UX implications of each functional aspect of the interface.
I played both games via PC using a Xbox controller.
Getting Started
The interface design of these two entries shows the difference of ideas, thought processes, focus of the franchise, theme, and how new design patterns influenced the design and helped it become one of the biggest franchises of all time.
FIFA 11 was the actual next-gen sports game on PC. It introduced an entirely revamped player control system, a new physics engine, and the new interaction flow, which set the standards for later entries to follow and improve upon.
Disclaimer:
1. No Online Mode
I will focus on the Offline interfaces of these two games, as FIFA 11 online modes are no longer available on any platform, making it difficult to compare.
2. Same Settings
It captured all the interfaces shown here during gameplay with the default settings available for effective first-time thoughts.
3. No Extra Game Modes
Since most of the new game modes present in FIFA 21 were not available in FIFA 11, I will exclude them.
Launch Screen and Game Settings
These are the entry point of both games, and as you can see, there is not much difference in the options, save for the theme of each game and the logo itself.
Players have control over visual quality in-game, which was broken down into a separate executable to avoid drastic changes during the game.
We can see a similar implementation in The Elder Scrolls V: Skyrim, which also hosts a separate executable where you can alter game settings before heading into the game.
But this raises a question, why was this done in the first place for PC games?
Game Settings
The same thing is clear in the game settings as well with the new graphic technology and features implemented into the game. The game settings showcase that level of increment as well.
By moving everything inside the game, except Display and Audio settings, these settings only focus on the bare necessities for running the game on PC. A player will configure only 2–3 times at max for an optimal play.
In-Game Settings
These settings are part of every FIFA game, offering almost similar settings in the game category and in the same navigation pattern.
Language Selection and Start Screen
Below are the two primary screens — Language Selection and Start screen, which you will see associated with any FIFA games.
Language Selection
As clear by the images showcased, the flow itself remains true to its predecessor, with a similar control scheme. The only difference is the visual theme between these two games, which becomes the central part of every FIFA game. Each game contains its own visual and color identity.
FIFA 11: Boasts a more artistic identity, which is seen through waving language banners and players representing the language itself.
FIFA 21: Takes a more simplistic approach in defining its own theme, focusing on the task itself with no cosmetic addition at this stage.
A possible reason to strip the player cosmetic is that actual gamers do not recognize the player by their country, only by what football club we associate them with. So relying on players to convey that language information may be less meaningful to players.
Start Screen
Just like the previous screen, the flow defined by FIFA 11 is still being continued and used in the same way, with each screen holding on to its own brand identity.
There’s not much more to divulge with the screen itself.
Creating New Profile
Whenever a player starts any FIFA game, it asks for a profile to continue; if there’s none, it helps you create one. It’s a standard practice in any modern FIFA game.
The selection process in these two games is flowing in the same manner, starting with name input and concluding with the team selection.
The major difference that can be seen between these two interfaces is the addition of the Privacy Policy section in FIFA 21, which is a mandatory section to review before proceeding with new account creation.
FIFA games are now more focused on their online domain, user data being sold to anyone who’s buying. With privacy laws across the globe becoming more stringent than before, players are given the ability too chose how they want their data to be handled. I believe this is a positive addition.
Main Menu
We can see the significant changes in the design pattern with the main menu and how these changes affect the interface design.
FIFA 11: Main Menu
FIFA 11 introduced an extensive change in the gameplay itself with the help of a new physics engine.
And that had a significant influence over the design of the main menu, as developers wanted players to try this improved system immediately and revisit it frequently. That’s why the Player Arena itself is on the main menu.
When accessed, the player is thrown into the arena directly, allowing them to play and learn the system before doing anything. The player can practice set-pieces, full 11vs11 practice match right through the arena.
The player can press Start to access the menu options laid in a list format, highlighting all the options.
This type of menu shows it is focusing on only one aspect: Navigation. It features a rigid text with no visual support, which makes sense at the time of release. With so many other crucial aspects of the game undergoing change, developers wanted players to learn one element at a time to prevent players from feeling overwhelmed.
This is the basis of a good revamp or redesign. Instead of unfolding everything at once, give one aspect of the new design at a time to allow players the opportunity to understand and explore it. Afterwards, continue to unpack each aspect gradually. This makes the game more approachable to players.
FIFA 21: Main Menu
In contrast to the FIFA 11 menu, FIFA 21 takes a bold, radical, and visually themed approach. Since the player is already familiar with the new gameplay patterns, they can now focus their attention on learning a new system for navigation.
Instead of relying on the list structure, which shows focus on keyboard-style approach, FIFA 21 takes a block-style grid approach that lets players navigate both the X-Y axis simultaneously.
This new method achieves the following:
- Improved Navigation Pattern
It focuses on the navigation pattern of the actual control method that FIFA players commonly use: the controller. - Contextual & Visual Information
It gives ample room for designers to use these grid-boxes to put more contextual visual information such as “What match is going to be next,” “what was the previous score,” and so on. This eliminated the need for players to navigate inside each option to access contextual information. - Use of Tabs
Because the menu is more focused on horizontal scroll patterns, the main menu can easily be divided into multiple tabs for more straightforward navigation than seen in FIFA 11.
FIFA 21 was not the first game in the series to incorporate these grids as the menu. In fact, it was FIFA 14 that took the first attempt at block-styled interface, and with each release, the menu itself was iterated based on the feedback and use-cases. In that same year, there was another game which used this interface as well: Assassin’s Creed IV: Black Flag.
Team Selection
Following the single-player kick-off — also known as Classic Match — we are presented with the team selection process.
FIFA 11
FIFA 11 takes a more simplistic approach in its interface, emphasizing the task at hand and delivering it as fast as possible in stages.
The player can navigate upwards and change the other available information but still directly emphasizes the Team and Jersey in a single-page interface.
FIFA 21
FIFA 21 builds upon its block-style interface by keeping its visual theme as the core part of the interface itself.
They broke the team and jersey selection down into a two-page system, which can easily be implemented in the same FIFA 11.
This allowed developers to show off the graphical capabilities of the engine and the Live Preview of the jersey through in-game players. It also kept the interface as clean as possible without increasing the player’s cognitive load.
Team Management
Team management is one of the most important aspects of any sports simulation. Players will actually end up spending more time on this interface than actually playing the match.
The team management interface depends on the type of gameplay the player is going for (Single Player vs. AI and 1v1).
Single Player vs. AI
The player can choose to play with the AI, the interface for managing the team reflecting those changes as discussed further down below.
FIFA 11 took the traditional 1v1 interface approach as their base. This helps developers to accommodate any gameplay type by utilizing a single interface, however this makes half of the screen unusable. Since the player is here to manage the 23-player squad and perform an extensive level of customization, this can become hectic.
FIFA 21 interface is dynamic. It adapts to the type of gameplay the player is going for. For single-player gameplay, it only showcases the information for the selected player team. We use the remaining side for the Additional Player Details, which helps in quicker team management.
Using lists and tabs on respective FIFA(s) showcases the same navigation pattern that the player is use to from the beginning of the game.
Multiplayer vs. 1
The player can also opt to play with another person with a different control method: keyboard/controller. The interface adapts accordingly.
For multiplayer, both interfaces use the available space. Because FIFA 11 interface is designed by keeping 1v1 play mode as their base, there is not much change in the interface, keeping the same usability aspect.
FIFA 21 adapts the interface, and just like FIFA 11, it divides the screen between two parts. And that is where the List vs. Tabs navigation pattern argument favors the latter.
Since there are multiple game plans to go for, the player must go inside each list item and make their plans. But for FIFA 21, navigation depends on the tab; it makes navigation between game plans smoother.
They lay additional information such as player details or comparisons over the main interface itself.
Another significant difference between the two interfaces is the utilization of the screen space. FIFA 11 uses comparatively less screen space than FIFA 21 while serving more or less the same information, making the interface really congested.
Match — Loading Screen
Loading screens are an integral part of any game, and FIFA games are no exception here.
The way FIFA game handles its loading screen is an excellent example of using every available opportunity to let players hone their skills. This is clear by the game making a sandbox where players can play with the ball as the match is loading in the background.
FIFA 11 re-introduces the arcade seen on the main menu, but this time the player is the captain of your selected team and again, lets you explore the mechanics on your own. When the match finishes loading, it prompts you to start the game.
FIFA 21 takes the same idea with a different implementation. You are still in the arena.
Instead of letting you explore everything on your own, FIFA 21 uses this opportunity to help you ace a particular aspect of the game through the Skill Challenges. These are small time-based challenges that focus on one part of the game, be it dribbling, shooting, passing, or defense, and allows you to further develop your skills in a fun way.
Match — Main Gameplay
You will be spending a good deal navigating and working with the screens below. Often, you’ll spend more time on these screens then in the actual match.
Main Interface
There are very few changes, if any at all, in the main interface — at least from a functional perspective.
With visual aspects, each game is holding its own theme. FIFA 11 rocks its thematic colors with respect to the interfaces while FIFA 21 uses the official color of Premier League’s revamped brand collateral (which is designed for TV broadcasts). This extended to the in-game animations, transitions, and, of course, the visuals. Even the placement of small quick elements such as Tactic Controls remains in the same place in both games.
They adjusted the placement of elements in FIFA 21 to allow players to view the maximum amount of screen compared to FIFA 11, which feels centered. I think they did this because of the drastic change in the screens available to the players between 2010 and 2020.
FIFA 11 interfaces consider the slightly curved TV sets, which still accounted for most players around the start of the last decade, and tries to adjust them in a 4:3 ratio to avoid stretching.
While FIFA 21 is fit for seamless, bezel-less flat monitors and TVs which are the norm for today, so no need to adjust for the curve itself. This allows it to use as much screen space as available.
The Camera and View
The default camera in FIFA 11 was also significantly closer to the ground itself than FIFA 21. FIFA 21 camera allows you to see at least 40% of the ground at a glance, a great enhancement that aids in planning the gameplay during the match.
Of course, these settings are available for players to edit as per their gameplay strategy.
The same is true for the goalkeeper as well. While FIFA 11 keeps the camera to the ground and directly behind the keeper, FIFA 21 takes advantage of the over-fly camera and lets the player choose where to drop the ball.
While the FIFA 21 keeper camera is excellent and gives more field of view, I loved the rotation control of the view in FIFA 11. It allows me to rely on my view to drop the ball as opposed to FIFA 21 where the player can’t rotate the view of the keeper, but must rely on either trainer or the selected secondary player.
FIFA 21: Accessibility
FIFA 21 also hosts several accessibility settings, which can help players customize the game elements per their play style. It ranges from color blindness settings, enabling subtitles, large click targets, to remapping the controller functionality as per players, and more.
These settings are part of FIFA games since FIFA 20. I believe it is an essential and welcome addition to the series, which has one of the biggest player-base, with people from all forms of life and play style.
Other Interfaces
There are more interfaces that I was not able to provide an in-depth analysis to simply because there is not much to uncover and dissect. However, I do feel they are worth reviewing.
Instant Replay
This is part of all the modern FIFA games, and its interface has changed little. The modification that FIFA 21 introduced is the addition of the Trainer marker right in the replay.
Match Facts
These interfaces show the summary of the match statistics. Both interfaces rely on an input prompt to reach the Resume Menu, the player then able to decide where to go from there.
The only difference here is the omission of the Quick Resume option in FIFA 21, which is available in FIFA 11 for quicker resume access.
Final Thoughts
FIFA is a game series that has already become an “online-first” game.
Unless EA opts for a game-as-a-service model (which Ubisoft plans for next Assassin’s Creed) I don’t see it stopping its yearly release cycles.
While the player-base is divided on the recent additions concerning gameplay, graphics, etc., I see how the game interface has grown tremendously since its beginning in 1993. This piece already shows the difference ten years can make concerning interface alone, invoking new design patterns, play styles, and ever-changing use cases.
The UX brought in with these interfaces aims to help each player, irrespective of the player experience and other involved factors. With inclusion of explicit accessibility options, it includes all players so that it is enjoyable to all. That is what makes a franchise a great one to invest in.
Special thank you to Tarun Eric Rosario for suggesting topics like these to cover.
I am always seeking out feedback on my writing and future topics to cover. You can explore my other work here or connect with me via LinkedIn.
If you haven’t already, check out my critique on the UX of The Magnificent Trufflepigs.
