In this issue, I'll start with the UI/UX design of the game Cyberpunk 2077 (hereinafter referred to as 2077) and explore common issues with related designs. It has to be said that the UI design of Cyberpunk 2077, like its game itself, has both advantages and disadvantages, and is seriously polarized. The influencing factors behind it are the problems that are bound to be encountered in the current game UI development process.
Without further ado, let's get into today's topic.
One
Cyberpunk 2077 UI color palette
First of all, the 2077 UI color collocation uses a very typical cyberpunk color, that is, a common neon color in reality. Most of these colors complement each other, creating a very unique visual effect. Complementary colors can make the main color more pronounced, thus creating a more impactful artistic effect. As early as the Impressionist period, Monet and Van Gogh were experts in using this technique.
On the left are the two complementary colors in the game, and on the right is the work of Dan Voinescu, the main developer of the Cyberpunk 2077 UI
The Chambers Brothers, The Matrix, San Francisco, 1967
On the other hand, this color combination can also express a surreal psychedelic atmosphere. The 20th-century graphic designer Victor Moscoso used complementary colors to create a "color flutter" effect. Because different colors will focus on different planes as they pass through the lens of the eye, the clarity of the final retinal imaging will vary, resulting in an effect like color fluttering. As a result, in the 1960s, this style was often used for poster designs for psychedelic rock and hippie music.
Neon colors have been on the big screen since the 1970s. Each of the above images are from "Dirty Harry", "Provincial Port Troopers", "The Party at South Station", "Crossing the Barrier", "Taxi Driver", Hong Kong 1975 Chinese New Year's Eve Scenes, "Terminator 2", "Have Something to Say", "Blade Runner 2049", "Ghost in the Shell"
In addition to this, the neon setting itself has a strong sense of unreality. Common neon colors are very rare in nature. When people see this color, they naturally think of cities, modernity, and technology. The cyberpunk theme is set in a big city based on capital and technology development to the extreme. Therefore, the entire color collocation and the setting of the theme have reached a perfect self-consistency.
But this stylized design has a fatal flaw - the player's reading experience is not good.
The font reading experience of 2077 is not very satisfactory
Take the font as an example, because of the aforementioned "color flutter" effect, when the human eye stares at the red text for a period of time, it will feel that the font becomes blurred, and there is a tendency to expand the movement. In addition, the developers of 2077 have added fluorescent effects to fonts on many occasions. This makes the legibility of the text even worse.
The kind of problem that 2077 faces is actually a common problem in UI design: the conflict between stylization and ease of use. Many times, it is difficult to achieve complete unification of the two. Designers have to make adjustments and trade-offs between the two. Take cyberpunk themes, for example, although "complementary colors + fluorescent design" is common, especially in science fiction movies. But the UI in science fiction movies conveys more of a sense of technology, and the UI is more like visual effects than a medium that is actually used by people. If you use the same effect in a sci-fi game, it doesn't necessarily lead to a good experience.
Souls of Tsushima movie mode versus normal mode
Another counterexample is the film mode of Soul of Tsushima. This model was originally a tribute to the sword and sword film of the black and white era, which greatly satisfied the fans of samurai movies. But in this mode, it is difficult for players to quickly identify key items in the game. Flowers in the grass, for example, are difficult to spot from a distance. In black and white films, creators will cleverly use light and shadow to represent space and structure, thus making up for the lack of color information.
Overall, whether a stylized UI serves visuals or ease of use for player interactions depends on the type of game and the goal of the experience. Pure reproduction of the other's design does not guarantee the integrity of the experience.
Two
Another feature of the 2077 UI is the use of a large number of diegetic UI, which exists in the game's 3D space and in the game world. Both the player and the game character are aware of the UI. This design is usually to make the player more immersed in the game. I mentioned this in a previous article on immersive UI.
As you can see, subtitles appear in Japanese first and then translate into English
Since "2077" is called the first person, this reinforces the setting of "what the player sees is what the character sees". Therefore, the logic of the actions that the player completes through the UI in the game world corresponds to the game world. For example, the subtitles in the game are even processed as text output by artificial intelligence translators. The subtitles themselves are also part of the game world. This design reproduces the realistic experience. Because in daily life, everyone interacts with the tools around them. The process of interaction can be perceived by the user.
In the case of a third-person game, the UI tends to be non-diegetic UI (UI in the traditional sense) or spatial UI (spatial UI, i.e. UI that exists in the game's 3D space but is not perceived by the game character). When the player completes the operation through such a UI, it is logical that the game character is not aware of the player's behavior. At this point, the player and character are isolated.
The vehicle UI design itself is great, but the area where the player can see the outside world is very limited
The fly in the ointment is that this design of "2077" will be very clumsy in the fast-paced combat. For example, the player's interaction with the elevator requires the player to approach the button of the elevator before the operation can be performed. Although the game has made full use of the high-tech settings of the future world as much as possible, many of the operation behaviors have become extremely concise. For example, if the player hacks into the enemy's brain, it only needs to be done through a key, instead of opening the console to enter the command.
What would have been an expected holographic UI has become a decorative object
The problem is that in this case, the input that can be processed is very limited. Because the game must distinguish between the player's input is UI system input and the gameplay system input. In many cases, the same keys are used between two systems. The boundaries of the system are very blurred, and there are many extreme cases. For example, when the player switches the player's music channel in the living room of the home, it is sometimes used by the game system as jump input (both use the same button). In addition, because the story UI interface exists in the game's 3D world, the interactive interface is only a small part of the entire screen. Both the player's position and angle will affect the size of the interface. Therefore, the interface content must be simple. This means that 2077's story UI can't handle overly complex requests.
Half-Life: Alyx handles the relationship between first-person and holographic UIs very well
To make this system even worse, the spatial UI commonly used in many sci-fi games (such as holograms) cannot be applied to 2077. Because "2077" is a first-person game, the holographic UI that exists in the game's 3D space is bound to be very close to the player's lens, otherwise it is difficult for the player to operate. If not carefully designed, this is actually not much different from the UI of the menu class. From a development perspective, the menu-like UI has become a more cost-effective option. Therefore, in the actual game experience, we will still find that the menu UI accounts for a large proportion in "2077". (Even the process of ordering a bartender is still through the menu UI). Only part of the entire game UI system has achieved ui and game world integration, and the rest of the system has returned to the traditional menu UI design. This has to be said to be a pity.
Three
In addition to the two aspects mentioned above, the Cyberpunk 2077 UI has a problem – the information transfer is too inefficient.
2077 Game Main Menu
First, the structure of each menu interface is more complex. The designer put all the interfaces under a main menu, which seems to show all the important sections to the player, but the priority between the sections is actually different. For example, during game missions, I often use maps and weapons menus. I would like to go beyond the main menu and go straight to the target interface. Although the map interface has shortcuts, after I exit the map, I will first return to the main menu and then back to the game screen. Even if it is only one more step, this will reduce the player's efficiency.
The Last of Us 2 gun upgrade interface is a typical scene UI
For less frequently used sections, I'd be more inclined to convert them into scene UI (UI attached to an object/scene in the scene). This increases immersion while also making the interface of the main menu cleaner.
Dense and colorful, people are "dizzying"
Players will find a lot of textual information in the game. This information is an important element in building the overall game worldview. However, the way the text is presented is disappointing. Essentially, they're notepad words, just a cyberpunk skin wrapped around them. Compared with pictures and videos, the processing speed of text information is undoubtedly slower. In this case, how to more effectively convey information to the player in a more efficient way, while creating an environment suitable for reading, is a problem that designers need to consider. The large amount of UI information in 2077 lacks basic typography and is not guided by any users. Users need to find important information on their own. Coupled with the fluorescent effect fonts mentioned earlier, the user experience is very poor.
A similar UI design appeared in the Fallout series. We can also explain this by the setting of a post-nuclear war civilization. However, one of the features of the 2077 UI is the sense of technology. This makes it hard for players to believe that the game's menu UI is designed from the future. I have two personal suggestions for this:
The reading mode of the text should occupy a larger flat space, while appropriately increasing the picture information. Imagine our daily use of chat software, if the user list is only text messages, we can find a specific person to chat with can become very difficult. Informative images can easily grab the player's attention. It should be noted that if the picture lacks information, then the player will treat it as a decorative picture;
Create a more comfortable reading environment. For example, the home of the protagonist V is a more suitable space. The pace of the game here is slower, and processing information at home makes players feel more comfortable than looking at information in the middle of a mission. It is also in line with the real experience. Of course, this requires other systems to adjust accordingly, and we can't force players to only process text messages at home.
Four
The UI design of "2077" has a strong style and a clear experience positioning. It is a pity that the final product did not bring a good user experience. In order to achieve the goal of UI art design, the 2077 UI system sacrifices the efficiency of the player's use of the UI, but does not fully integrate the entire system into the game worldview. This, in turn, shows that designing the UI system separately without combining art styles, worldview settings, and gameplay not only fails to guarantee the quality of the UI, but in turn affects the player's game experience.