Cyberpunk 2077 — UX/UI Critique

Spoilers?

Introduction

Process

The important thing is that I can decipher it

High-Level Strengths

Left: Cyberpunk 2077’s main HUD, Right: One of the hacking interfaces
Brain Dance interface
PART 01: IMMERSION

Immersion

Left: Deus Ex — Right: Cyberpunk 2077
Left: System Shock 2 — Right: Cyberpunk 2077
Left: Metro Exodus — Middle: Neo Scavenger — Right: Red Dead Redemption 2

1. Way-finding

1.1 Quest Markers: distracting and hand-holding

Imagine developing one of the most artistically impressive video game worlds ever created, and then making players unable to focus on anything other than this incessant blinking.
If the enemies weren’t marked with these glowing yellow icons, the guy in the shadows might have actually taken me by surprise and created an exciting moment of combat.

How would I fix this?

Level Design directs players in The Last of Us. Strong lighting illuminates the path, combined with the eye-catching colour and movement of the yellow caution tape
Left: In Fallout 3 clues and direction could be found in voice logs, notes, computers, talking to NPCs, etc. (Credit) Right: The Last of Us: Part II placed information in the environment that the player could use to guide them through a level.
Left: Deus Ex might give you a map for a certain objective, but it’s just a static satellite image and it’s up to the player to orient themselves using landmarks. (Credit) Right: In Prey these hand drawn maps were used as more difficult secrets, to hint at an objective’s location.
No Man’s Sky can potentially have a huge number of markers the player is tracking. The compass helps minimise the clutter created.
God of War’s minimal compass barely intrudes on the screen
Left: BioShock, Right: Metro Exodus
Aloy using her Focus Device to highlight information on an enemy
Projecting a guiding line in Dead Space
L3 occasionally prompts the player to ask for a hint if they need it

1.2 Main map — difficult to decipher, with icon overload

That’s a LOT of icons
Perhaps some information could still be shown on the map but in a more creative way, such as heat maps to highlight crime or gang activity? (Img Source)
Horizon Zero Dawn
Deus Ex: Mankind Divided
Zelda: Breath of the Wild
Using the Binoculars in Metro Exodus to scout locations
Artyom’s Journal is a diegetic interface element providing key information

1.3 Fast Travel — efficiency vs. adventure

Fast Travel terminals aren’t exactly few and far between. From the official web map for Cyberpunk 2077.
Why fast travel when you can do this?
Traveling via the Metro system in Deus Ex: Mankind Divided
(Source)

1.4 Driving — another missed opportunity

Most real-world navigation UIs would position the arrow in the lower third of the screen, to give more visibility on what’s coming up. A low angle or perspective might also help give a better view. (Image Source)
(Left) Come on, it’s the future. We don’t need sat navs. (Right) Maybe some lessons from racing games like The Crew?
Left: This excerpt from a cutscene shows yellow AR-style markings projected onto the environment. Right: This side-quest featured a race through the city, which actually showed yellow markings on the road and checkpoint gates.

2. Shards are same-y

Found pieces of lore in TLOU: Part II were varied and engaging
Emails and Computer Files often hide some interesting story details amongst the futuristic spam
All Shards share this yellow icon, there is no visual distinction between types of content
All shards share this boring blue UI, and unique conversations blend in with the longer more generic readables.
Different types of readable lore or background stories in Deus Ex: Mankind Divided
PART 02: EFFICIENCY

Efficiency

1. General Navigation

1.1 Carousel behaviour is disorientating and unnatural for top tabs

Stop the ride, I want to get off!!

1.2 Naming becomes ambiguous

Thought this was your ‘Character’ screen? No. This is your Inventory. Thought you’d be able to see a list of the items you’re carrying in your Inventory? Wrong again. That would be the backpack!
Cyberpunk 2077’s Character Screen
(Source)
Pre-release footage of early interface designs

1.3 Top tabs lack usable breadcrumbs

Consumables in the Inventory

1.4 Cyberware feels oddly buried despite having two access points

The main Cyberware screen, followed by an inventory of quick hacks that can be equipped

2. Inventory Management

2.1 Lack of bulk actions for speedy clear outs

2.2 Long-press for Dismantling takes too long

2.3 Equipped Items can get in the way

Selling equipment with Equipped weapons mixed in

2.4 Replacing equipped weapons could be clearer

Choosing a weapon slot to replace

2.5 Selling a full stack of items takes too long

Selling a stack of components

2.6 Meaning of the ‘Crafting Spec’ tag is unclear, looks like a button

The Crafting Specification is the subject of much speculation
For comparison, the “Upgrade” button in the Crafting menu, which is actually a button

2.7 Previewing clothing uses a redundant, small thumbnail

Viewing the tooltip for an item of clothing provides a very small thumbnail

2.8 ‘Sort by’ is great, but not contextual enough

The ‘Sort By’ menu on the right let’s the player order items in their inventory

2.9 Introducing different view modes could speed up stat scanning

3. Crafting

3.1 Lack of comparison

Viewing an item to be Crafted

3.2 Crafting and Upgrades screens feel bland, lacking story

Top: Alien Isolation, Astroneer, Green Hell. Bottom: Outward, Prey, The Forest.
Upgrading the Bolt-Action Rifle in The Last of Us: Part II

4. Character Screen (Skill Tree)

The main ‘Character’ menu followed by the ‘Technical Ability’ skill section

4.1 Strong aesthetics

4.2 Screen Breakdown

4.3 Clarity of states could be improved

5. HUD

Cyberpunk 2077’s primary HUD
Hacking a security camera has a cool interface that could be improved with some tighter visual guidelines
The ‘Filter’ tabs as seen in various inventories throughout the game
Normally the mini-map would also be visible here, but I had it disabled. So this isn’t even a worst case scenario…
Alien Isolation’s Motion Tracker (Source)

6. Controls and Configuration

6.1 Lack of Control Customisation

6.2 Bulky Cursor on PC

Using a clunky blue square for the cursor feels odd on PC

6.3 Sticky Sliders

Using the mouse to try and click and drag the slider doesn’t work
3 options: Click, drag or type. The handle and cursor are also much more precise.

Final Thoughts

(Source)
(Source)

Thanks for reading!

Lead UX/UI Designer in the Video Games industry.

Lead UX/UI Designer in the Video Games industry.