A Deep Dive Into God of War Ragnarök's User Interface

Introduction

80.lv: Please introduce yourself. What companies have you worked for in the past? What projects have you been a part of?

Zach Bohn: Hello everyone! I'm Zach Bohn, and I am a Senior Staff Technical Designer at Sony Santa Monica. I've been in the industry for a little over ten years now, and it's been a wild journey so far.

After graduating from Champlain College, I started as an Indie Developer and co-founded a small studio in Burlington, Vermont. The studio, which like many similar indie teams, quietly failed. I moved halfway across the country to Austin, Texas to attend the Denius Sam's Gaming Academy, which was helmed by the legendary Warren Spector. Upon graduation, I moved another thousand miles to Los Angeles, California. There I worked on princess adventure games for four-year-old girls at Disney and became a Level Designer at a short-lived mobile studio working on Match-3 games before eventually landing at Insomniac Games as a UI Designer on Spider-Man.

I uprooted my life all over again to move back to LA, not even 20 miles from where I left, to join Santa Monica Studios. I joined as a Senior Technical Designer for the UI Team just as the production of God of War Ragnarök was beginning.

Becoming a UI Designer

80.lv: How did you get into user interface design? What made this path perfect for you?

Zach Bohn: UI Design wasn't a career path I initially intended to be on. During college, I always thought of myself as a systems designer, but as an independent developer at my own studio, I needed to be more. So, I ended up wearing dozens of different development hats, and one of those was UI Design. And while it was only a small aspect of what I did, I loved it. Because, in many ways, systems design is UI design.

All the complex systems you build as a designer need to be explained and shown to the player. I'd often find myself making dozens of wireframes where I would adjust layouts, change fonts, and create icons, and it was incredibly satisfying. This idea of UI Design as a career got lodged in my mind.

During my time at the Denius Sam's Gaming Academy, I quietly began to build a separate resume and portfolio dedicated to my UI work. It would take another year for that to pay off, but when the UI Design role at Insomniac turned up, I had everything ready to apply.

Sony Santa Monica's UI Team

80.lv: How was the UI team behind God of War organized? What departments did you have? How big was the team?

Zach Bohn: At the height of the production of God of War Ragnarök, the UI Team comprised 11 people, which almost sounds absurd. You can make an entire game with 11 people, but that's the reality of working on such colossal projects.

What's unique about a UI Team compared to other groups is that we have a wide variety of disciplines present. We have two Technical Designers who are responsible for the overall UI architecture and for implementing all UI functionality, two 3D Artists who implement all the art for the UI in Maya, which was initially created by our two 2D Artists in Photoshop or Illustrator, and a Gameplay Engineer (GPE), who helps provide key C++ API to our Technical Designers so that they can access and manipulate game data. Midway through production, we hired a UX/Accessibility Designer from Naughty Dog to help manage the massive feature set of accessibility options.

Developing God of War Ragnarök's User Interface

80.lv: What were your main goals for the game's UI? What did you want to use from the 2018 God of War, and what did you want to improve?

Zach Bohn: When the development of Ragnarök kicked off, we had three goals:

1. Embrace accessibility.
2. Recover from our technical debt.
3. Unify UI conventions.

From the start, our UI Lead brought with her this amazing driving determination to raise Santa Monica's accessibility profile to that of industry leaders, such as Naughty Dog. We shipped Ragnarök with 70+ accessibility features, ranging from complete button remapping to high contrast markup and full captioning. Accessibility features like this impact a wide variety of teams, from Combat to Rendering and Environment design, and were built entirely from scratch.

My main responsibility was to evaluate the underlying architecture used by the UI, which is written in Lua, and see what needed to be overhauled and what could be repurposed. Between myself and my coworker, we ended up tearing down about 80% of the UI architecture and building it back up from scratch. We did this to fully optimize the UI, as Ragnarök was fundamentally built using the same specifications as God of War 2018, which meant the whole UI needed to remain within its tight memory limit of just 58 MB. We needed to optimize because, by the time we wrapped on Ragnarök, there was almost twice the amount of UI elements, functionalities, and features.

Lastly, we wanted to take more time with the overall user interface and navigation flows, particularly in the pause menu, as well as the vendor screens. The user flow was redesigned to be consistent across every aspect, and through the efforts of our UI Artists, the UI looks better than ever.

Working on Fonts

80.lv: How did you approach fonts? What influenced your decision? This part is crucial, right?

Zach Bohn: This part is absolutely crucial, and it is something I care deeply about. Coming off the reception from God of War 2018, one of the main (and well-deserved criticism) was that, in many places, the font was so small it was unreadable while sitting on a couch. With Ragnarök, we swore we wouldn’t let that happen again.

One of the major accessibility features we supported is Font Scaling, which provides players the opportunity to adjust their font size from the default all the way up to XX-Large. And this was a tremendous effort. Every single piece of UI needs to accommodate this functionality and be designed with scaling in mind. On the UI side, this is often done with a system called Dynamic Layouts, where the position of individual elements is determined by other onscreen elements.

While we only support two fonts, a Header (Berserker) and a Body font (Gill Sans WGL), to help diversify how the text looked on a page, we had a centralized stylesheet. Our Body font was the most used font in the game, but we wanted it to be stylized differently depending on the context to help drive player engagement. Font Scaling was done on individual scales, where larger fonts like our MASSIVE_TEXT were scaled in smaller increments over time, and smaller fonts like our MICRO_TEXT were scaled more. We did this to avoid cartoonishly large fonts and to keep the UI text size in balance even at its largest size without overwhelming the rest of the game.

Setting Up the HUD Elements

80.lv: How did you ensure the interface doesn't have too many elements and doesn't affect the exploration process? Also, let's say there are two bosses. How did you add two health bars and make sure that's not too much? Could you discuss some of the more complex cases?

Zach Bohn: The player's HUD is broken down into various pieces. There are two core HUD elements – Combat HUD, our bottom left elements that encompass Runic abilities, health, rage, etc., and the Companion HUD, the rest we consider to be various UI Messages. This includes our Area Announcement, Quest Updates, Journal Updates, and the Item Ticker.

For all our Messaging, these various separate UI elements are all managed by a single queuing system to ensure that the HUD isn't overwhelmed with dozens of messages all at once. To avoid having too many elements, we only allow a single message at a time. This was mostly successful, but there are edge cases where several messages become queued up, and the result is that it takes a long time to cycle through all the messages, which isn't ideal. In the future, we're going to look at regional queuing systems that govern parts of the screen. A queue for the upper left and a separate queue for the upper right to allow simultaneous messaging.

Even having a single queue had complications though. What happens when the player opens their pause menu? What if a cinematic starts? What if a more important message needs to be displayed when another is playing? What if there are messages onscreen, and then we interact with a vendor? All of these different possible outcomes needed to be caught and managed by the UI.

As for boss' health bars, we have a dedicated manager file whose sole job is to manage the layout and animation of those elements, which change depending on what type of boss you're fighting, as well as how many. From a UI design perspective, we initially didn't plan to support more than a single boss at a time. Which, in hindsight, is laughable, given how prevalent bosses are in the franchise. As that design needed to be changed, we added more functionality to our manager to support two and even three bosses at the same time.

80.lv: The game's menu has tons of perks, armor, abilities, and so on. How difficult was it to make it all work and make it easy to understand?

Zach Bohn: As a UI Developer, whenever you work on a system or inventory-heavy game, you always design with scale in mind. The number of perks, armor, and abilities are always shifting throughout development as the design team experiments. Ultimately, a lot of those systems don't come online until the last couple of months in development because of how complex that work can be.

Ultimately you find the solution through iteration. The Amulet of Yggdrasil, otherwise known as the Enchantment Menu, went through four separate iterations until we landed on something we felt had a good balance between UX and delivering the information players needed. If you would like to know more about that particular menu or others, I gave a talk this year at Game Developers Conference on that very subject.

Introducing New Gameplay Elements Through UI

80.lv: I guess one of the main rules when introducing new game elements is to teach one thing at a time. How did you use this rule when approaching the UI?

Zach Bohn: We approach this rule as you would with any other gameplay system, through tutorialization timing when a new functionality unlocks.

Ragnarök had over 80 tutorials. 13 of them were in the pause menu, where we taught players about their gear or enchantments. These tutorials were heavily iterated throughout development, with each change becoming a more efficient way to communicate the idea across. Ideally, tutorials should only consist of one or two steps and be kept razor-focused during gameplay. They can be up to seven-step-long within a menu before players just start mashing buttons to get back to the gameplay.

We often hid elements of the UI until a system was introduced. For instance, the player's HUD is different at the start of the game, it lacks visualizations of Runic & Relic slots until those are filled by the player. Whole categories in the vendor don't appear until they are populated with at least one item. Sometimes entire systems, like Transmog or Skill Mods, are heavily delayed until the mid-late game, specifically to surprise players. This "novelty" re-engages players by adding a unique twist to late-game systems, making them feel fresh again after dozens of hours.

How to Get Started With UI Design?

80.lv: Lastly, could you please share some tips that can help beginners get started with UI? What things should they focus on first?

Zach Bohn: What's great about UI is that it's a real blending of art, tech, and design. There's room for a lot of different skill sets.

I highly recommend going through the process of learning to wireframe. Take a known game menu and try experimenting with alternative layouts. What happens when the navigation bar moves from the top to the bottom? What happens when you change a vertical list into a grid list? Even AAA menus like Ragnarök's have room for improvement, how would you change them?

I also recommend building some fundamental art/graphic design skills. I was a photography student in high school, which helped me learn about Leading Lines, Color Theory, Rule of Thirds, etc. All of those same principles apply to user interface design.

Lastly, go build something, or join a Game Jam. These are excellent places to learn to build UI and the technical basics of managing Lists, Buttons, Sliders, Toggles, Windows, and Messages. Unity's Canvas system is a powerful and great primer on the advantages of Dynamic Layouts. We always need great developers who really care about readable fonts and making games that should be enjoyed by everyone!

Zach Bohn, Senior Staff Technical Designer at Sony Santa Monica

Interview conducted by Arti Burton