My name is Johannes Koski and Im the UI/UX Director of Returnal here at Housemarque. My role in the project has been both taking part in the design and overseeing and supporting the work done by the team. Ive had the privilege to work with a diverse multi-disciplinary group of amazing designers, artists, programmers, and audio specialists. Weve just launched a game that has been my ultimate dream project since I was a little kid, so Im super excited to be able to share something about our games UX!
The goal of a games UI is pretty straightforward: it guides the player and supports the game. In other words it gives the player all the necessary information and tools they need to understand and enjoy the games mechanics and at the same time it supports the games artistic core and storytelling with aesthetic means. In practice this unravels to hundreds of hours of planning, user interface design, concepting, usability studies, artistic choices, motion design, audio development, optimization, programming, player onboarding, and tutorial design to name a few areas.
Our core design principle is gameplay first. When designing the overall UX, one of our main goals was to remove all possible distractions from the second-to-second gameplay. We wanted to keep all the menus as clean and as minimal as possible. We even made the decision to not have a title screen or main menu at all and take the player always directly to the action.
We spent a considerable amount of time finessing all the HUD communications so that the player is always aware of critical gameplay information during intense bullet hell combat. We iterated a lot to find the perfect animation timings, intuitive color coding systems, and optimal information hierarchy to support various gameplay scenarios, etc.
The most crucial information needs to be communicated at the players immediate visual focus point in and near the reticle. Some critical guidance can be shown diegetically in and around the player character model and the actual game world. The content that is not essential for second-to-second survival can be shown in the periphery of the HUD.
Then we have the most important scenarios like near-death, low-health situations, where we throw everything we have at the players senses: HUD visor glass cracks and digital glitch animations, threatening vignettes, flashing warning icons, diegetic warning lights in players space suit, game world post-processing, health gauge color coding, player character animation, voice-over, VFX, emergency audio signals, and engaging haptic feedback.
Were especially happy how our unique 3D map and HUD minimap turned out. Theres a lot of verticality in our levels so a compass or a traditional 2D map wasnt enough. It was challenging to create a map system for randomly generated levels that was precise, looked good stylistically and wouldnt cause a performance hit. The map will be very helpful for both player guidance and planning combat flow.
Were using a wide variety of 3D Audio, DualSense wireless controller audio, and haptics to keep the player aware of their situation and surroundings even though their visual focus would be in combat and player survival. For example we implemented a rising charge-up UI sound that telegraphs the charge level of the alternative weapon fire, resolving in a distinct UI audio cue and haptics pulse once its fully charged. The haptics for this feature get prioritized in gameplay to give the player feedback on the most important combat cues.
Malignant items emit a heartbeat-like haptics pulse when nearby the player. This heightens the sense of risk and reward associated with these special items and helps in differentiating them from other pickups.
Parasites are another feature that received bespoke audio and haptics. Once you pick one of these up and it becomes attached to your suit, distinct haptic textures and audio cues of the parasite are used to remind the player they picked one up and that its active on the suit, potentially causing damage.
The hologram projections appearing while scanning a new item have been complimented by both haptics and sound effects, providing a granular sense of the scanner sweeping through the object as well as adding tactile weight to the interaction experience. Sending these sounds through the controller speaker as well made the whole scanning experience a lot more physical and real for the player.
For Returnals UI art direction, the main direction came from who Selene was, the company she worked for, and the technology she would have available to her. Strictly industrial and functional. This technology is also susceptible to damage and glitch errors because of the devices its displayed on: CRT monitors, tactile wrist computer displays, etc.
Theres a great correlation between the dated 70s aesthetic and good sci-fi horror. This could be because many of us grew up watching these movies and so they stay with us because of that sense of nostalgia. Our primary UI/HUD color is a haunting shade of teal that partly originates from the early monochrome cathode-ray tube computer monitors and tactical night-vision gear. The usage of this particular ghostly color also creates an eerie sense of looming horror.
(Concept art from Returnal, Mighty Canvas)
Looking at old consoles used in traditional industries, there is dedicated space for each component, most of the options are binary and there are no fancy gradients, transitions or effects. Its chunky and clunky, with little attention to visual flourishes.
We took this idea and limited the effects that we would use. So there is little to no directional motion. Everything flickers on and off. We chose to not create any layers. So no pop-ups over the screen UIs, as this felt too technically developed. The color palette was strict and the only effects and ambient animations are the ones we use to replicate the CRT aesthetic.
For the controls customization we wanted to make it as intuitive as possible and designed it so that the controller map is the very first thing you see when entering the options menu. From there we wanted to draw you in to trying out a different controller preset or create your own to fit your play style.
We put a lot of focus on making the remapping process easy to understand and use. Allowing you to quickly get an overview of where the actions are mapped, using a dynamic graphic on the right, we show where on the controller the action is currently mapped and if deciding to swap, showing which input you swap with.
While moving around actions and changing the layout of the DualSense wireless controller, we made sure you could easily see an overview of all of your changes directly from the remapping. A simple button press will bring up the full controller map so you can view your custom setup at any time.
This approach to previewing your changes was carried forward to use for other settings to make it easy to see your changes without having to return to gameplay for each change. When using a custom preset and you have rotated the whole controller for example, the preview on the right hand column will dynamically update to reflect that.If you are changing the deadzone on the right stick, we highlight the stick in the preview to make it clear which one you are changing.
Returnal has many different settings for controls, gameplay, audio, and video, and within these categories are features developed for accessibility. We worked from the ethos of these not being separated out to an accessibility category because there is such a wide range of players with different needs and these features can be used by everyone who wants them ensuring that we include rather than exclude players.
We also gave the player a larger range of choices for color blind mode. We added a slider for intensity so you can try it out and select what works for you. In addition we created three alternative color palettes for certain colors in the UI. The colors were selected based on their visibility and clarity for the three main color blind types: Deuteranopia, Protanopia, and Tritanopia. These options were added for players to try them out and use them if they found they helped increase clarity and visibility of HUD elements and text. We did the same for the collectible item beam colors, offering alternative options for players that wanted them.
We wanted to give you multiple options to play with when customizing the text. Adjusting the size, color, language, adding speaker names and background opacity were all added to make subtitles easier to read. All the changes can be previewed in the options menu, making their choice instantly clear to the player in the menu negating the need to exit and see the changes in-game.
Thanks for taking the time to learn about Returnals UI/UX art direction, and to all the players who have joined us on this journey. Returnal is out now on PS5.
- In Pictures: See Inside the Italian Futurist Painter Giacomo Ballas Apartment, and Works From His Long-Awaited Retrospective in Rome - artnet News - August 4th, 2021
- An in-depth look into the mysterious, futuristic world of Stray - PlayStation.Blog - August 4th, 2021
- Venice bridge is built with ancient masonry and 3d printing - Fast Company - August 4th, 2021
- New Paper Warns That Environmental Collapse Will Lead to "Untold Suffering" - Futurism - August 4th, 2021
- The Space Station Incident Was Far Worse Than NASA Admitted - Futurism - August 4th, 2021
- Study: These Countries Are Most Likely to Survive Collapse of Civilization - Futurism - August 4th, 2021
- Experimental Male Birth Control Is Magnets That Heat Up Your Testicles - Futurism - August 4th, 2021
- Elon Musk Denies Demanding That CEO of Apple Give Up His Job - Futurism - August 4th, 2021
- Pfizer and Moderna Hike the Price of COVID Vaccines - Futurism - August 4th, 2021
- Elon Musk Employees Are Instructed to Tell People He's "Awesome" and "Inspiring" - Futurism - August 4th, 2021
- Welcome II the Terrordome review dystopian drama offers a bleak vision of Britain - The Guardian - August 4th, 2021
- Future of Scarborough's former Futurist Theatre site revealed soon - Free Radio - August 4th, 2021
- Crisis Briefly Spins International Space Station Out of Control - Futurism - August 4th, 2021
- The US is doubling down on its futuristic hypersonic weapons program - We Are The Mighty - August 4th, 2021
- Faraday Future Listed on Nasdaq With the Ticker FFIE and Announces New Reservation Policy for Flagship Product FF 91 Futurist - Business Wire - July 23rd, 2021
- UAE Says Rainstorms Were Caused by Its Cloud Seeding Drones - Futurism - July 23rd, 2021
- Futuristic Perpetual Harvest Cannabis Facility Chooses Programmable Spectrum LED from Revolution Micro for its $40M Facility - Johnson City Press... - July 23rd, 2021
- Akanksha Sharma: I Look At The Narratives Of Development, Not As A Victim But As A Futurist - Outlook India - July 23rd, 2021
- Elon Musk Says Tesla Has Caused Him More Suffering Than Anything Else in His Life - Futurism - July 23rd, 2021
- Scientists Discover Dozens of Ancient Viruses, Frozen in Ice - Futurism - July 23rd, 2021
- Excessive Coffee Drinking Linked to Dementia - Futurism - July 23rd, 2021
- Lyft Says It'll Deploy Self-Driving Cars by the End of the Year - Futurism - July 23rd, 2021
- Physicists Say the Universe Wraps Around Itself Like a Giant Donut - Futurism - July 23rd, 2021
- Applying the right mix of futuristic technologies for maximizing operational efficiency - ETCIO.com - July 23rd, 2021
- Top Catholic Bishop Resigns After Hackers Expose That He Was on Grindr - Futurism - July 23rd, 2021
- How to Think Like a Futurist, from HP - Industry Analysts Inc - July 21st, 2021
- Jeff Bezos Couldn't Qualify for Normal Astronaut Wings, So Blue Origin Invented Its Own - Futurism - July 21st, 2021
- Eggy Served Up Westport: Beyond These Walls With Futuristic Dine... - NYSMusic - July 21st, 2021
- Good News: NASA Says It Managed to Fix the Hubble Space Telescope - Futurism - July 21st, 2021
- Casio Is Re-issuing the Futuristic Digital Watch Ripley Wore In Alien - Gizmodo - July 16th, 2021
- The Amazon Rainforest Is Starting to Emit More Carbon Than It Absorbs - Futurism - July 16th, 2021
- The Creator of Dogecoin Says He Now Believes That All Cryptocurrency Is Horrible - Futurism - July 16th, 2021
- MIT Prediction of Civilization Collapse Appears to Be on Track - Futurism - July 16th, 2021
- Abasi Concepts treats its futuristic Space T range to all-new finishes and stainless steel frets - Guitar World - July 16th, 2021
- The FAA May Force SpaceX to Tear Down Its Starship Launch Tower - Futurism - July 16th, 2021
- New NASA Spacecraft Will Carry Time Capsule for the Descendants of Humans - Futurism - July 16th, 2021
- Marines Are Testing Tiny Drones That Carry Explosive Grenades - Futurism - July 16th, 2021
- F1 drivers react to "futuristic" 2022 car reveal - GPfans - July 16th, 2021
- Hamilton accused of mind games by Horner as F1 shows off its "futuristic" side - GPfans - July 16th, 2021
- Here's an M-App Connected With a Futuristic Virtual Healthcare Platform And Digital Therapeutics In Asia - Entrepreneur - July 16th, 2021
- Richard Branson Didn't Go to Space Yesterday, He Just Cruised Through the Upper Atmosphere - Futurism - July 16th, 2021
- #PulpNonFiction: Pragmatic protopias and why everyone is a futurist - Bizcommunity.com - July 12th, 2021
- 11-Year-Old Gets Physics Degree, Says He'll Use It to Attain Technological Immortality - Futurism - July 12th, 2021
- Recent Heatwaves Have Killed More Than 1 Billion Sea Creatures - Futurism - July 12th, 2021
- US Military Document Admits That Risk of Nuclear War Is Growing - Futurism - July 12th, 2021
- BREAKING: Richard Branson Successfully Flies to Space on Virgin Rocket - Futurism - July 12th, 2021
- One Futuristic Tomorrowland Detail You May Have Missed! Inside the Magic - Inside the Magic - July 12th, 2021
- There's Reportedly Massive Drama Inside Jeff Bezos' Wannabe Space Company - Futurism - July 12th, 2021
- Futuristic Apple Car Concepts that are like the iPhone 12 Pro Max of smart electric vehicles! - Yanko Design - July 12th, 2021
- Defence PSU HAL To Develop Futuristic High Altitude Pseudo Satellite To Assist Armed Forces In Strike Missions - Swarajya - July 12th, 2021
- Places Are Increasingly Getting So Hot That People Just Die - Futurism - July 12th, 2021
- Scammers Inject Thousands of People With Fake Vaccines - Futurism - July 12th, 2021
- Company Starts Shipping Its $50,000 Mind-Reading Helmet - Futurism - June 18th, 2021
- I'm Going to See the Futuristic Lucid Air EV Sedan Next Week. What Do You Want to Know About It? - The Drive - June 18th, 2021
- Futuristic Wearable Designs that are emerging as the top tech trends of 2021! - Yanko Design - June 18th, 2021
- A Futuristic Amusement Park and an Ecological Power Plant: 16 Unbuilt Competition-Winning Projects Submitted to ArchDaily - ArchDaily - June 18th, 2021
- The Largest Structures in the Universe Started To Spin and We Don't Know Why - Futurism - June 18th, 2021
- Futuristic Self-Driving Car Hits Person the Old Fashioned Way - VICE - June 18th, 2021
- Jeff Bezos Is Helping Build a Fusion Power Plant in the UK - Futurism - June 18th, 2021
- Disney and Africas Kugali to unleash a futuristic Lagos in the upcoming series Iwaju - Animation Xpress - June 18th, 2021
- Experts Decide That Earth Has Five Oceans, Actually - Futurism - June 18th, 2021
- Germany Wants Tesla to Share Its Supercharger Network With Other Carmakers - Futurism - June 18th, 2021
- Battlefield 2042 Enlists AI Soldiers To The Fight On The Futuristic Multiplayer Front - Hot Hardware - June 18th, 2021
- NASA Has Assembled a Megarocket to Take Humans to the Moon - Futurism - June 18th, 2021
- Premiere: Rap Newcomer BXKS Shows Off Her Cosmic Brand Of Futurism On Must Feel - Complex - June 18th, 2021
- Prime Vision to offer a futuristic robotic sorting solution for the US - Post and Parcel - June 18th, 2021
- $1300 off this 8K Samsung TV deal is tempting us to upgrade to the futuristic resolution - GamesRadar+ - June 18th, 2021
- AMC and Heimplanet Reveal Electric Camping Truck | HYPEBEAST - HYPEBEAST - June 18th, 2021
- Influential Voices On The Future Of Work: Brian David Johnson, Futurist - Forbes - May 11th, 2021
- Futurist Deborah Westphal Releases New Book, "Convergence: Technology, Business, and the Human-Centric Future" - PRNewswire - May 11th, 2021
- Toyota's Futuristic Woven City Will Be Powered by Hydrogen - autoevolution - May 11th, 2021
- The Opulent, Futuristic Megamansion of Bill and Melinda Gates Could Be a Hard Sell - Mansion Global - May 11th, 2021
- Scientists Turned HIV Into a Life-Saving Gene Therapy - Futurism - May 11th, 2021
- Experts Shred Paper Claiming to Identify Mushrooms on Mars - Futurism - May 11th, 2021
- Ford Patents Tech to Annoy Drivers With In-Car Advertisements - Futurism - May 11th, 2021
- Stewart Brand portrayed as tech futurist and publisher in We Are as Gods - SF Chronicle Datebook - April 21st, 2021
- UK to Add Atomwaffen Division to Proscribed Terrorist List | Kharon - Kharon Brief - April 21st, 2021
- Scientists Claim That Actually, Radiation Is Good For You - Futurism - April 21st, 2021
- Russia Is Reportedly Abandoning the International Space Station - Futurism - April 21st, 2021
- China's Population Is About to Start Declining, and Its Leaders Are Worried - Futurism - April 21st, 2021