Usability, Menu and Screen Real Estate in Cyberpunk 2077

+
Before I begin with the main part, I want you to know that It might seem like I am nitpicking a bit about this issue, but I don't have many things to complain about Cyberpunk 2077. In my personal opinion the game is very close to perfection which makes this seemingly minor problem stand out even more. As you read further below, I will analyze and emphasize the importance of this issue.

1st. This thread mainly focuses on issues concerning usability, menu and screen real estate in Cyberpunk 2077 for PC.
This also includes controls and the differences between PC and consoles, which again has a bigger impact than you might imagine.

2nd. My post is going to be long and detailed, because I want to make the most out of it. Please take some time reading my feedback on this matter.

Index:
  1. Introduction
  2. Explanation and importance
  3. Cyberpunk 2077 Menus Part 1
  4. Cyberpunk 2077 Menus Part 2
  5. The verdict

Explanation and Importance:

Screen real estate describes the whole amount of space available on the screen to provide output.
It may also indicate the usability of less actions to execute in order to reach information or changes.
Good screen real estate requires less actions and provides as much data as possible on menus, to avoid hidden information and unnecessary actions (e.g. avoiding the need of scrolling or clicking too often).

You may think that the design and usability of menus and screen real estate is a minor thing to consider, but in fact it is a very difficult challenge and a well implemented design has a huge impact to the quality of the game. After all, apart from graphics and gameplay, the interface requires the most interaction from the player (e.g. opening inventory, map, quest log etc.).
The gamer on PC wants to play with a keyboard and mouse, thus the design and usability of the menus should be optimized with PC capabilities that gives a great variety of usability when properly implemented.
Many games don't make this up ever since multi-platform games from modern consoles ruled the market, simply importing their menu design in its whole that was originally optimized to consoles (reasons for that put aside), which makes a very well optimized usability of menus and screen real estate on PC to something even more unique!


Cyberpunk 2077 Menus Part 1:

Let’s start with getting a deep look into the menus that was shown during the “deep dive” gameplay demo from August 2019.

main_menu_character_creation_01_lifepath_1080p.PNG

There is not very much to say to the life path screen, as there are three options and all of it fits well designed to the screen.
However, a bothersome part at this is the text preview which appears only while hovering the cursor to the corresponding selection. There is plenty space to make the text of all three life paths visible, while still offering a visual return when 1st hovering to the corresponding life path and 2nd another visual return from actually selecting it – which could bump up the visual effects even further.
Though this is not so critical but it would also give the chance to make a better comparison of the life paths to the reader.

main_menu_character_creation_02_body_1080p.PNG

There was this thread about censorship… just kidding :D
Not much to say about the “Body” menu either, except that from here on wards there is the tabs you can see above and the buttons on the bottom left corner to navigate between the character creation screens (Probably also appears under Life Path).
Since the demo was played with a Gamepad Controller, it appears that with a Controller, you’ve to “slide” between the tabs (see the LB/RB commands). On PC you’ve a keyboard and mouse, so being able to “click” on the tabs should be enabled too, to not limit the access of switching between tabs by just sliding through them.
Simple reason: If you’re in the “Attributes” tab and you want to go back to “Life Path” you’ll need a total of three actions by sliding, instead of one action by just clicking on the tab = Screen Real Estate. This issue will become a bigger problem during the next menu.

main_menu_character_creation_03_appearance_edited_1080p.PNG

The “Appearance” tab needs a complete rework for better usability and use of screen real estate.
While the selections of “Skin Tone” and “Eye Color” offer a grid to select colors from, everything else is a slide-bar from which you have to slide through every selection. While the screen real estate is wasted, it is also very inconvenient to control on PC, because none of the capabilities of a keyboard and mouse is used here. The screen is completely meant to be controlled by a Gamepad/Controller.
In fact, sliders aren’t even a convenient solution for the limited capabilities of a controller, it is just the “less bad” solution for them to make it possible for consoles having such options too. But remember, we’re on the PC platform and we have the power of a keyboard and mouse, so a different solution for PC should be implemented.

Going further:
As presented in the edited screenshot, within the sliders you’ll have to “slide” through all the selections just to see its effects. When you want to compare two selections that are further away from each other, then you’ll encounter the trouble of having to slide through all the selections in-between just to make a comparison. This is a far cry from what I call a friendly interface and there are too many actions required to make a proper selection of choice.
In the 2018 gameplay footage, the appearance menu had its flaws too, but it was much better than the new version from August 2019:
Cyberpunk_Charactercreation-Screen_edited.png
CDPR already have had a good step of tabs and somewhat of a grid-like selectable options from within the tabs which is much more convenient to use on PC, and makes much better use of screen real estate. So, why not improving this design further and make it fit with the new colors, shaders and background design that is already there?
The sliders will become even more inconvenient the more options become available, e.g. through patches or add-ons that might be released in the future.

For CP77 being an RPG there are only a few options that can be chosen from to customize the appearance of the character. If this is the result of a work-in-progress game that is under development for over 8 years then I don’t know what to say. I was expecting a lot more options here.
While we’ve seen more colors during the gameplay footage from 2018, it appears that most of them were removed.

A little notice: as seen from the “Body” character menu, in the “Appearance” menu the navigation tabs are still available and if they’re also “clickable” (just like tabs) then this will be a plus. At this point the navigation can go forth and back, as the selection from the “Body” seems to be mandatory in order to proceed into “Appearance” and “Attributes” – which will be the next step here.

main_menu_character_creation_04_attributes_1080p.PNG

So, there are total of 5 attributes that the player can improve by leveling up, I guess. In addition, there is an option to decrease the spent points from one attribute in order to be able to use the points to increase for another attribute. Perhaps this might be available only until the change is confirmed which is fair enough. I think it’s likely that the attributes point-share mechanism during the character creation screen will be the same as during the normal menu after creating the character too. This is why the plus and minus options for this is poorly integrated because that requires too many actions in order to use the points. On PC you have a keyboard, so why not enter the desired value by typing it? Everything else is total waste of usability. The way of Plus and Minus to increase and decrease points is mandatory for consoles, because they can’t use a keyboard with a gamepad controller, but on PC the player can.

It would be also useful if the bonus attribute points gained through gear could also be shown here in a separate tab perhaps, so the player can see the initial values and the bonus values increased/decreased through gear (plus info from what items the boost or decrease comes from). Same with abilities/skills that increase or decrease the attribute points temporary (If there are such skills in the game that is).


Post 1 of 2.
Continue on next post...

Post 2 of 2.
Due to the Automerge issue I'll put the second part here for now. @Has_Neyn you replied pretty quick.


Cyberpunk 2077 Menus Part 2:

menu_inventory_character_perks_1080p.PNG

The “Perks” menu looks kind of a “quick and dirty” solution to me, and it probably is.
The idea is clearly a talent-tree system, but CDPR is trying to make all the possibilities of perks viewable in one screen by stacking the perks when improving those and by making information to perks available through hovering the cursor over it which then hints a popup of the perk details.
In addition, it appears that the attributes are also increased here, as these are assigned to the perks improving their own grid.

Generally speaking, I do like Talent-Tree systems but the current design of the Perks has the following problems:
  • Stacks makes the perks look like there is not many perks at all (it feels empty)
  • Already obtained perks that can stack are “below the fold” and not viewable anymore
  • Always the same icon is used on each perk
  • The grid is still too short due to the limit of the available space on one screen
  • Core perks appear to have the highest gain and information inside, that is all merged into huge stacks

How the Talent-Tree in CP77 could be improved:
  • Change the “Perks” menu into a talent-tree-map that can be zoomed in and out giving a lot more space for perks
  • Change each perk into a stand-alone perk, avoid stacks
  • That way less text and info have to be shown per perk (the player doesn’t have to read too much per perk)
  • It doesn’t matter if the map becomes larger, this will actually make it much more fulfilling, adding depth and replayability through the game
  • Split the core perks into several single core perks that are dependent to each other either linearly or variable
  • Be creative and make different icons for each perk, except those that improve things like attributes, health or stamina that can be quickly recognized by its associated icon
  • Maybe consider using colours
  • With a map, the grid is unlimited and can be improved with future updates/add-ons
  • For PC controls, do something exclusive that looks different compared to consoles, because we have Keyboard, Mouse and variable screen resolution.
  • Screen Real Estate…

The concept of CP77 gameplay mechanics is on such a huge scale, that every decision or move the player does will change the story. The perks could be used as fundamental core functionality to design the whole game defined by the player’s choices and moves.
So far, the look of the work-in-progress talent tree in CP77 is poorly integrated and appears to be merely uninventive, while actual perks and attributes matter in the game.

A little comparison:
Great Talent-Tree systems I’ve enjoyed were from games like Eve Online, Path of Exile and Final Fantasy 10.

menu_inventory_gear_equip_edited_1080p.PNG

The current Inventory menu in CP77 looks almost great, almost that is. The immersion of inventory interactions is completely missing here as shown in the screenshot.
This is due to everything automated and sorted by filters and scrolling.

Instead of having this type of inventory, the filters could be completely replaced by custom tabs such as bag-packs or similar, while the grid is used for items that scale of different weights taking space from the grid. This idea was present in The Witcher 3 to some extent already.
Think of inventory types such as in Diablo 3. That way the unnecessary scrolling isn’t required, plus the player can freely interact with the inventory completely customizing it by will. It has to be much more enjoyable that way.

Another issue is the available gear types. You cannot really equip many items. Think of trinkets such as modern wristwatch, glasses etc. which could leave room for much more content and loot.

You cannot have a good inventory work with a gamepad and keyboard/mouse at the same time. Inventory should be adjusted for PC controls too, even if it means that the inventory will look different on PC compared with consoles. I explained it in “Explanation and Importance” why this is mandatory.


menu_shop_buy_edited_1080p.PNG

Last but not least a few words to the merchant’s shop menus.
The vendor’s shop menu should be similar to the inventory that I recommended above. While the vendor may have pre-defined tabs for its “Buy” section, the “Sell” section could be a copy of the customized tabs and grids from the player. However, larger icons aren’t necessary and is waste of screen real estate. The grid can easily scale the same way as items in the inventory.
Yet again, PC version may have a different design compared with consoles here too.


The Verdict:

To draw a conclusion, my wish here is simply put a rework of the menus in the PC version of the game, considering a proper usability for the controls and making use of screen real estate.
There is plenty of menus we haven’t seen yet, such as settings menus, crafting menu etc. where most likely many sliders could appear. Dropdown menus are a better solution for that purpose.
Now I get that this’ll require additional time and effort, but as I mentioned earlier it is a proof of quality!
Let’s assume none of the feedback here is implemented, CP77 is originally developed for consoles and the PC version remains a simple import from consoles with no further adjustments to emphasise its capabilities. How different would CDPR be from other developers aside from the DRM-free image?
I think even in the sense of CDPR’s image being rebels, it stands for a key role that optimizations matter.

I would like to have this thread as an open discussion for what you think of my feedback and what can be done even better. Feel free to share your thoughts.
 
I mean, you can say that CD Projekt has certainly learned from the UI of the Witcher 3 by implementing a cursor on the console that can be moved by the joystick, similar to what Destiny did. I agree with what you had to say, however, a cursor is used on console as well, which basically makes the experience completely the same.

But remember, we’re on the PC platform and we have the power of a keyboard and mouse, so a different solution for PC should be implemented.

What solution do you have in mind? Displaying all of the options available would be nice, but I think it would take up way too much space and would require scrolling down. To be honest, I really can't think of any changes that would benefit the PC players in this situation.

I do agree with what you said about the sliders though. In the 2018 gameplay demo, you could clearly see what option you were on because it said "X/10" on the right, and there were individual blocks or partitions that separate the options, and you could move to them if you wanted to compare two looks. Now, the number is displayed on the slider itself, and without any clear blocks or "partitions" separating each option, it makes it very hard to go back to a previous option.
 
Sorry for the late response. I had quite a busy week.

I mean, you can say that CD Projekt has certainly learned from the UI of the Witcher 3 by implementing a cursor on the console that can be moved by the joystick, similar to what Destiny did. I agree with what you had to say, however, a cursor is used on console as well, which basically makes the experience completely the same. [...]
The joystick is slow and handling is clumsy compared with a keyboard and mouse. However, even though they've added a cursor for both platforms, most of the UI isn't optimized for PC comfort at all, that's why it still isn't the same.

[...] What solution do you have in mind? Displaying all of the options available would be nice, but I think it would take up way too much space and would require scrolling down. To be honest, I really can't think of any changes that would benefit the PC players in this situation. [...]
There is many changes that would let the PC player benefit. Before my first post got merged, my second post was missing when you replied. But it's pretty much what I've pointed out already.
To sum up, for example proper implementations of drop-down menus or grids or check boxes instead of sliders, grids and tabs instead of scrolling, structured maps or directories instead of putting stacks with wide-area functions into single pages.

[...] I do agree with what you said about the sliders though. In the 2018 gameplay demo, you could clearly see what option you were on because it said "X/10" on the right, and there were individual blocks or partitions that separate the options, and you could move to them if you wanted to compare two looks. Now, the number is displayed on the slider itself, and without any clear blocks or "partitions" separating each option, it makes it very hard to go back to a previous option.
Yep, this is a work-around function that is implemented in many console games, because they don't have capabilities like PC due to the limits of a controller.
A slider on PC is useful for input that is boolean, which means an option that has only two conditions: true or false. Once you have more and different conditions, e.g. an array of conditions, then you need proper visualization and the option of checking all conditions without hiding them from the point of view.

It's a known issue that many publishers aren't up to make a proper optimization for PC. They leave the PC platform for a simple transfer of the code from console version without changing most of the game's capabilities. While talking about "optimization" I do refer to everything, including the user interface and screen real estate, which I personally would consider as the most neglected issue in multi-platform games.
 
Holy crap, batman.

Speaking of inventory and such. I wish I could choose music whats played there, it would make inventory browsing more enjoyable. Right music and player will want to take it easy instead of rushing it through, imho, of course there should be an option to shut off inventory music.
 
Last edited:
Top Bottom