My name is Johannes Koski and I am the UI / UX director of Returnal at Housemarque. My role in the project was both to participate in the design and to supervise and support the work carried out by the team. I have had the privilege of working with a diverse, multidisciplinary group of incredible designers, artists, programmers and audio specialists. We just launched a game that has been my ultimate dream project since I was a kid, so I’m super excited to be able to share something about our game’s UX!
Gameplay first
The purpose of a game’s user interface is quite simple: it guides the player and supports the game. In other words, it gives the player all the information and tools needed to understand and enjoy the mechanics of the game. and at the same time, it supports the artistic core and the storytelling of the game with aesthetic means. In practice, it boils down to hundreds of hours of planning, UI design, design, usability studies, artistic choices, motion design, audio development, optimization, programming. , player integration, and tutorial design, to name a few.
Our basic design principle is “gameplay first”. When designing the overall user experience, one of our main goals was to remove all possible distractions from the gameplay second to second. We wanted all menus to be as clean and minimal as possible. We even made the decision not to have a title screen or main menu at all and to always bring the player right into the action.
We have spent a considerable amount of time fine-tuning all of the HUD communications so that the player is always aware of critical game information during intense combat. We rehearsed a lot to find the perfect animation moments, intuitive color coding systems, and optimal information hierarchy to support various game scenarios, etc.
The most crucial information needs to be communicated to the player’s immediate visual focal point – in and near the reticle. Some critical advice can be shown diegetically in and around the player character model and the real world of the game. Content that is not essential for second-to-second survival can be displayed on the periphery. of the HUD.
Then we have the most important scenarios such as near death and ill health situations, where we throw everything we have at the player’s senses: cracks in the HUD visor glass and digital glitch animations, menacing thumbnails. , flashing warning icons, diegetic fires in player costume space, game world post-processing, health gauge color coding, player character animation, voiceover, VFX, emergency audio signals and engaging haptic feedback.
The 3D map
We are especially happy with the result of our unique 3D map and HUD mini map. There is a lot of verticality in our levels, so a compass or a traditional 2D map was not enough. It was difficult to create a map system for the randomly generated levels that was precise, looked stylistically good, and would not cause performance loss. The map will be very useful both for guiding players and for planning the course of battles.
Audio and haptics
We use a wide variety of 3D audio, DualSense wireless controller audio, and haptics to keep the player aware of their situation and surroundings, even if their visual focus would be player combat and survival. For example, we implemented an increasing load UI sound that telegraphs the charge level of the alternative weapon fire, resolving into a separate UI audio signal and haptic pulse once it’s fully charged. . The haptics of this feature are prioritized in the gameplay to give the player feedback on the most important combat signals.
Smart objects emit a haptic pulse similar to a heartbeat when they are near the player. This increases the sense of risk and reward associated with these special items and helps to differentiate them from other pickups.
Parasites are another feature that has received tailor-made sound and haptics. Once you choose one and it has attached to your suit, distinct haptic textures and audio cues from the parasite are used to remind the player that they have taken one and that it is active on. combination, potentially causing damage.
The hologram projections appearing when scanning a new item have been complemented by haptic and sound effects, providing a granular feel of the scanner scanning the object and adding tactile weight to the interaction experience. Sending these sounds through the controller’s speaker also made the scanning experience much more physical and real for the player.
Haunting industrial nostalgia
For Returnal’s UI art direction, the primary direction came from who Selene was, the company she worked for, and what technology she would have at her disposal. Strictly industrial and functional. This technology is also susceptible to damage and glitch errors due to the devices it is displayed on: CRT monitors, touchscreen wrist computer screens, etc.
There is a great correlation between the aesthetic dated to the 70s and the good horror of sci-fi. It could be because many of us grew up watching these movies and therefore stay with us because of that feeling of nostalgia. Our main UI / HUD color is a haunting shade of teal that comes in part from early monochrome CRT computer monitors and tactical night vision gear. The use of this particular ghostly color also creates an eerie feeling of impending horror.
(Concept art by Returnal, Mighty Canvas)
Looking at the old consoles used in traditional industries, there is a dedicated space for each component, most of the options are binary, and there are no gradients, transitions or fancy effects. It’s big and clunky, with little attention to visual frills.
We took that idea and limited the effects we would use. There is therefore little or no directional movement. Everything flashes and goes out. We have chosen not to create any layers. So no pop-ups on the screen UIs as it seemed too technically developed. The color scheme was strict and the only ambient effects and animations are the ones we use to replicate the CRT aesthetic.
Accessibility and personalization
For the customization of the controls, we wanted to make it as intuitive as possible and designed it so that the controller board is the very first thing you see when you enter the options menu. From there, we wanted to inspire you to try another controller preset or make your own to suit your playing style.
We strive to make the remapping process easy to understand and use. Allowing you to quickly get a glimpse of where the actions are mapped, using a dynamic graph on the right we show where on the controller the action is currently mapped and if you decide to swap, showing which entry you swap.
While moving actions and changing the layout of the DualSense Wireless Controller, we’ve made sure that you can easily see a preview of all your changes right from the remap. A push of a button will bring up the full controller board so you can view your custom setup at any time.
This approach of previewing your changes has been carried over to be used for other settings to make it easier to see your changes without having to go back to gameplay for each change. When you use a custom preset and have rotated the whole controller for example, the preview in the right column will dynamically update to reflect that, if you change the dead zone on the right joystick, we put the stick highlighted in the preview to do so. clearly which one you are changing.
Returnal has many different settings for controls, gameplay, audio, and video, and within those categories are features developed for accessibility. We have worked from the ethics of these not being separated to an “accessibility” category as there is such a wide range of players with different needs and these features can be used by anyone who wants them. making sure we include rather than exclude players.
We’ve also given the player a wider range of choices for colorblind mode. We’ve added a slider for intensity so you can try it out and select what works for you. Additionally, we have created three alternate color palettes for certain colors in the user interface. Colors were selected based on their visibility and clarity for the three main types of color blindness: deuteranopia, protanopia and tritanopia. These options have been added to allow players to try and use them if they find they help increase the clarity and visibility of HUD elements and text. We did the same for the colors of the collectibles beams, giving alternative options to players who wanted them.
We wanted to give you several options to play with the customization of the text. Adjustment of size, color, language, adding speaker names, and background opacity have all been added to make subtitles easier to read. All changes can be previewed in the options menu, making their choice instantly clear to the player in the menu, eliminating the need to exit and see the changes in the game.
Thank you for taking the time to learn more about Returnal’s UI / UX art direction, and to all of the players who have joined us on this journey. Returnal is now available on PS5.
Table of Contents
