Hello adventurer! Let’s dive into the UX Design of the game Stray, their clever solutions & some improvements I would have loved to see! The game has no HUD (UI stuck on the screen), so they use other methods to guide the player or to show information.
Read this if you want to learn good UX design & how a Game UX Designer thinks!
WHAT IS STRAY? 🐱
Stray is a small/medium-sized video game (around 10 hours of gameplay) published by Annapuna Interactive, released in 2022. It has a semi-open map layout with areas and side-quests you are free to explore in any order you want.
The world: You play as a cat exploring a post-apocalyptic world populated by robots. The gameplay is mostly about finding paths to areas in different city levels, avoiding enemies by hiding or running away, and interacting with objects and robots to move through the story.
THE GOOD UX 🐱
Emotion hook early
How do you make your player care about a character fast if it doesn’t talk?
👉 Give them a loving family, then take them away from them and hurt the cat. (I know, the devs are monsters!)
But this was very effective in the intro to Stray and gets us sad, protective, and we want to keep playing to help and make sure (the cat) will be ok.
Guided by Light, Color & Signs
Knowing where you should go next is important in a game with both linear and open levels. Stray uses a combination of markers and signals to guide players in really great ways.
Example: String lights and lanterns pointing to the next area of interest, red & yellow ribbons on ventilation boxes you can jump on, red or yellow colored environmental items, and they use very big and obvious arrow signs a lot across levels. Literally, big glowing signs pointing the way! I found this very intuitive, and it fits perfectly into the world of ruins and technology.
Arrows guide the player
Light and Arrows in combo guide the player
Light guides the player
Immersive interaction notifications
There is a screen on the coat the cat wears (I know, super cute). This is a clever solution to call attention to nearby intractable things: door switches, computers, and talking to the robots.
It’s not only visual, though, but there is a small beep-sound accompanying it. This is good UX design because you don’t always have visibility on the Cat (or focusing on it), so the sound is a good alert to get your attention!
I like that they have the button prompt ON as default when you start it the first time, so you can use it as a guide to learn the buttons for the core mechanics of movements and it shows you what types of things you can jump to so you can look out for those things later in the game if you chose to turn the UI off (which I do recommend trying out).
PS: see my suggested update for this further down.
Option to Turn OFF Jumping Button Prompt
To flip what I just said above... It is intuitive and worked smoothly when moving & jumping around with the button-prompt UI removed! You just need to turn the button prompt off in the settings option. Once you get used to the jumping and what you can navigate to (this is a big part of the Onboarding at the start of the game), you don’t need the button prompt anymore.
Instead of going menu-heavy, the game has a small menu for picking up items. I like how quick and small it is because there are only a few items in the game, so this really fits the need. A big menu on a new full menu screen would be too much and heavy-handed.
All the small cat behaviors
For example, when holding the jump button, the Cat wiggles its butt when aiming at a location you can jump to. Super cute, and it helps you know if the location is a viable one to jump to or not. (No wiggle if no viable target). This is a small detail that isn’t too obvious, but I loved it when I saw it.
You can also interact with some things just like a cat would!
You can scratch up a carpet or take a cat-nap on perfect spots across some levels!
Does it do anything for gameplay, health, or scores? No!
Does it make you more immersed in the game, cosplaying as a cat? Yes!
IMPROVEMENTS I WOULD HAVE LIKED 🐱
Chat boxes
👉 Move the ‘Next & Close’ buttons closer to the text box instead of the bottom right corner. I thought it was annoying to have to look down in the corner to see if I should click the Next (E) or Close button (Tab). It would have been fine if it were the same button every time, but at the end of the message, the button changed, and the text box didn’t show that it was the last text section.
UX Lesson: Things that belong together are best placed together for ease of use.
👉 Alternatively, they could have added something to communicate that this is the last text box in this conversation. It would be something minimalistic to inform the player that this is the last part of this chat, but without showing the button and text. It would not be as helpful as adding the button prompt close to the box, but it would be a step more helpful.
In-game: Button prompt in the bottom right corner, making it hard to see when focusing on the left side.
Jumping button prompt
❌ As this is a 3D platformer, there is a lot of jumping and finding paths in the environment across the game. So seeing the button prompt move around, appear, and disappear, all the time, can get a bit annoying. Since it was always the same button used to jump, I didn’t really need the reminder, as much as an indication of where I could jump or not.
👉 As alternatives, I would have liked to see something simpler I could have selected in the option menu. For example, an icon of cat paws, an arrow to show direction, or a simple UI line to indicate the ledges.
Thank you for reading!
Have you played Stray? Was there anything else you would have liked to see updated in the game?
Check out Learn Game UX Design for more UX info.