Getting to work in Heat Signature
A love letter to Sader Fiasco
Over the past few years I’ve been excitedly following Heat Signature’s development, and with the game’s recent release I have not been disappointed. The mechanics are a blast, the art is gorgeous, the music sets a mood for mischief, and the procedural nature of the game has generated outlines for so many narratives that players have beautifully filled in with their own colors of story telling and shared.
Over the many many hours I’ve spent playing the game my mind as a UI / UX Designer has kicked in, mulling over certain rough patches in the experience and thinking about small changes that could make the UI flow more conducive to getting back into the real essence of the game.
Putting the pieces together
The game is built around a loop that quickly becomes familiar and rewarding (or devastating): choose your hero, review their items, browse and accept a mission, wreak havoc in space, repeat. It gets to a point where you can skim through missions and have a sense of what to pick at a glance based on color coding, keywords, and art. There are some strain points in the flow though that I feel could be eased with a little reconsideration of the game’s menus.
The above screen is mentioned by several different names in different areas of the game, which can lead to confusions. It’d be good to iron out the language between Ms. Fiasco saying “Jobs Board”, hovering your mouse over the designated area to see a “Job Listings” tool tip, and walking over that same area to see a “Get a mission” button prompt. When you interact with the menu “Mission Details” is the clearest label for the feature on the screen.
For the sake of consistency, we will be calling this ‘Jobs Board’ below.
The right tool for the right job
Access to the right tools is a big part of the game. Some missions can be absolutely impossible without the right gear, so being able to view your inventory while browsing missions is important. Currently when you try to do that you will be presented with something like below:
Given the layout and art of the Jobs Board and Inventory screens it can be quite hard to discern if you have the right gear for the mission at hand. When I’m confronted by instances like this I like to “zone out” the screen and wireframe the essential areas. I can try alternate layouts this way without worrying about the minutia of visual design details.
Each of the 3 menus I’m concerned with are color coded and shown in context to each other above. Now let’s take them apart and look at the individual components to see how they work.
- Some of the most important mission details are shown by the Guard and Boss models at the top of the screen, and the Payout and Liberation values at the bottom of the screen.
- Bringing this information together at the top of the screen could make it faster to parse, while still requiring the player to run their eyes over the mission details for any of the finer points.
- In order to view both the Mission List and Mission Details your eyes must cross a large gutter between the two sides of the screen.
- Placing the List and Details next to each other could be easier to parse, especially on 21:9 UltraWide monitors, or unconventional window sizes.
- Seeing the map is important, especially for timed missions, so you could shift the camera to focus to the open space during the period.
- The two panels take up a lot of space.
- Allowing players the option to disclose one or both panels might help.
- Playing with the panel layout and font choices might help this. I’d like to experiment with this in a separate post.
- When the Jobs Board first opens you’re presented with just the Mission List and Back button, you must first select a mission to see it’s details.
- It might be worth auto-selecting the first mission so players have details to start with, bonus if you’re able to suggest a mission based on the hero’s kit.
Inventory & Stash
- The Inventory screen shows more than just a player’s inventory, it also includes details about the current mission, prompts for what a hero can do where they’re standing, as well as helpful tips.
- The additional info is great, especially when on a mission, though perhaps the non-Inventory information can be suppressed while the Jobs Board is up.
- Your inventory only tells part of the story, a player may have accidentally stashed a tool essential to taking on a mission and not think to look.
- Find a way to include the Stash while the Inventory is up, or at least while the Jobs Board screen is visible.
Above is a wireframe detailing how the Jobs Board, Inventory, and Stash menus could all be made visible to the player at once. I’ve taken the liberty to move some information around and add elements I’ve found myself looking for while browsing missions.
I’ve made an effort to minimize Progressive Disclosure. Once a player engages with the Jobs Board a list of missions will be displayed with one auto highlighted. From there, if needed, a player can press the space bar to bring up the Inventory and Stash menus. Most details can be gleaned at a glance, but the text details are available for additional info and context.
The full details are outlined in the wireframe, some of the big ideas are:
- Move the Mission List closer to the Mission Details.
- Make room for the Inventory and Stash while viewing the Jobs Board.
- The Inventory and Stash don’t need to be opened with the Jobs Board, though if a player decides to open them make sure they co-exist nicely.
- Cluster the essential Mission Details at the top so they’re together at a glance: Clause type, Guard and Boss Models, Payout and Liberation value.
- Allow the Inventory and Stash be be viewed next to each other.
- Hide non-relevant Inventory screen info while viewing the Jobs Board.
- Include the Ship model along with the Player model on all screens. The ship you have can be vital your mission strategy, yet the information is only shown in a few sporadic spaces.
- Consider iconography for mission Clauses to help emphasize the existing color coding as well as provide quickly discernible art for the clauses.
- Make the Back and Accept buttons more consistent in size and position.
- Make sure the Accept button remains more vibrant (black text on a green or red background for example).
Additional comments for art comps:
- Subduing colors for bodies of text can draw attention to keywords.
- Check the Mission List’s titles, the mission’s mechanic is highlighted.
- Sader’s icon can be paired with Clause Flags.
- Liberation Progress meter is expanded to span height of bounding box.
- Icons are made to work as white over a key colored background or colorized in their key color and placed over space.
Designing for colorblind players has been difficult in the past, unless you had someone effected on your team, however Photoshop has recently added color proof modes that emulate two common forms of colorblindness (protanopia and deuteranopia). The design and art suggestions don’t fully address colorblindness but do help reveal how contrast and iconography can help both colorblind players as well as players looking for quick and efficient messaging.
I really enjoy Heat Signature and though I see some rough spots in the UI it hasn’t been a huge impediment to me playing and having a ton of fun with the game. It’s hard for me to know the considerations that went into the UI during the development of the game and I’m sympathetic to having to make concessions in service of shipping (having worked on a few games myself: GTAV, RDR2, Heroes of the Storm). If there’s anything above that might prove useful I’d be delighted to hear about it.