Cyberpunk 2077 — UX/UI Critique

Beautiful but flawed

Spoilers?

Introduction

Process

The important thing is that I can decipher it
  • Efficiency regards issues that hinder the player when accomplishing jobs or the flow through tasks.
  • Immersion is concerned with problems that interrupt the player’s feeling of presence within the world.

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

  • Quest Markers
  • Main Map
  • Icon Overload
  • Fast Travel
  • Driving

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
  • God of War used a very minimal compass to help clarify the location of objectives. It helped keep the player’s view clear but offered a fallback if they ever did feel lost.
  • BioShock simply pointed the player in the rough direction of their objective with a single arrow. This works well when the player only has one objective, and I like the minimalism of it, although it’s sometimes a little too easy to look at it too often.
  • In Metro Exodus, a literal compass on Artyom’s wrist would point to his objective at all times.
Aloy using her Focus Device to highlight information on an enemy
  • It ties seamlessly into the fiction through the use of Aloy’s “Focus” device.
  • It doesn’t completely obscure the environment so the player can still appreciate their surroundings.
  • Movement is slowed so the player can’t rely on it all the time.
  • Provides strategic information for the player to use (highlighting weak points or patrol paths), rather than making things too easy.
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
  • Points of interest and geographical locations create clear landmarks in the environment, reducing the need to consult the map for everything.
  • Fast travel must be unlocked by first visiting each place, providing a balance between exploration and quality-of-life.
  • Secrets are actually secret — not every collectible or point of interest is exhaustively revealed by default, the player finds them naturally through exploration — this minimises the amount of icons shown.
  • Visual design of the map makes roads and contours clear with obvious contrast.
Using the Binoculars in Metro Exodus to scout locations
Artyom’s Journal is a diegetic interface element providing key information
  • I felt more immersed in the world because I was actually discovering it in a plausible way.
  • My sense of direction was much stronger, because I had observed the area using my binoculars and actively learned the geography.
  • I didn’t feel overwhelmed by the amount of POIs on the map, because they were disclosed gradually (and there were simply less of them — but it’s not that the world was more empty, it’s just that not every single object needs an icon).
  • I was actually attentive and appreciative of the surroundings, unperturbed by quest markers, mini maps or other HUD elements.
  • The world felt real and alive, because it continued to exist around me while I checked my map or used the binoculars (thanks to the diegetic map and compass). Considering the game has survival horror elements, this built tension. Rather than being pulled out of the experience, checking the map actually became an emotive piece of the experience.
  • Overall, I still didn’t get lost or wander aimlessly. Checking my location or hunting for the next area to explore was simply done by briefly pulling the map out if I did need to.

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?
  • Make movement enjoyable. Using the glider, climbing or shield surfing was fun in Zelda: BOTW. Swinging through the city was fun in Spider-Man. A variety of transport options can give players more options for different scenarios (a motorbike in the city vs a helicopter between regions).
  • Entice players to explore by foot by packing the world with reasons to see it. Secrets, random encounters, unlisted side quests, etc that would otherwise be missed through fast travel.
Traveling via the Metro system in Deus Ex: Mankind Divided
  • Spread fast travel points more sparingly, such as major hubs that the player is most likely to travel between frequently (e.g. their Apartment in Cyberpunk 2077 or the location of major quest lines)
  • Require the player to visit (and possibly interact with) a fast travel point to activate it
  • Introduce a more plausible travel system depending on the game — a horse and cart, taxi, or metro system, for example. This also justifies the stops being fewer and further apart.
(Source)

1.4 Driving — another missed opportunity

  1. The arrow is positioned in the center, so there is less awareness of what’s ahead of you
  2. The zoom level is too close and doesn’t adapt to your speed
  3. You’re moving a lot faster than any sane person normally would in a busy city
  4. Sat Navs generally give verbal instruction ahead of time
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
  • More ‘global’ lore was stored in Websites, Newspapers and Magazines.
  • Personal conversations were found in Emails and Pocket Secretaries.
  • Books were found on glass e-books.
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
  1. A crafting blueprint (spec) for this item exists somewhere in the world.
  2. You own the crafting blueprint for this item.
  3. You own the blueprint and the required items to craft this item.
  4. Dismantling the item will reward you with a crafting blueprint.

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
  • Infrequent interactions such as accessing your phone or vehicle are given less prominence vs your quick-access slots.
  • Health is easy to read and displayed dynamically (if it’s full, it will not be shown).
  • Similarly, Stamina only shows when you are actively depleting it.
  • Quick-hack RAM has a unique silhouette that helps with memorability and theming.
  • Quest information is easy to read without being obtrusive.
  • Slight perspective/distortion and (optional) chromatic aberration help the elements feel a part of the world, reminding you that they are part of V’s optic enhancements.
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…
  • Is a large icon of the new weapon they just picked up 100% necessary?
  • Does every objective deserve a quest marker?
  • Can any of the interface be offloaded into a more contextual, spatial sense?
  • Can infrequently accessed features be behind a button press?
  • Could certain elements work with a reduced footprint (such as a compass vs a mini map)?
  • How much decoration is too much?
Alien Isolation’s Motion Tracker (Source)
  • Build tension by making Ripley vulnerable while holding the tracker.
  • Add sound effects that enemies can hear while using it.
  • Tell the story through the technology of the Alien universe.
  • Gate the mechanic until the player has progressed far enough to acquire the device.

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.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store