Game UX Case Study: Toem
A little black & white game where a Camera is your only tool to explore a cute & quirky world! But how does the design communicate where to go, points of interest if the UI doesn’t use colors, the art style is flat 2D, and there is no flashy vfx to draw attention? Would that not make the UX messy & confusing?
How do you make a game clear and easy to understand when you can’t use colors to make things stand out, or show what things are or what state things are in?
Toem is a fun and cute game that excellently shows this!
Let’s learn how!
Map Design
1. The ground is always light
In a world of grey, it has to be clear what you are looking at, or else the visuals become a grey mess that all melts together. They make it clear where you can walk and what areas you can get to by consistently having the ground in a light grey. This makes all the characters, walls, buildings, trees and rocks stand out because they are always darker.
2. Arrows pointing the way
To make it clear where the main paths between maps are, the levels have clear ‘folds’ sticking out outside of the otherwise square map shapes. These main paths between maps also have a big arrow pointing the way, making it super easy to see. The arrow is the same shade of grey as the ground color of that map, but with a sharp black outline that adds a little of a 3D look to stand out from the environment.
3. Stairs
As you progress in the game, the layouts and complexity of the environment get a little bit buzzier (not by a lot, it’s still kept fairly simple). But the navigation in the game is still kept clear with the pattern of stairs on all maps. They are wide, dark colored, and follow a pattern of stripes or cross netting.
Consistency
They don’t change up the design of the stairs too much between maps so they are always recognisable as walkable areas from map to map. They are wide, on the same angle, and placed to be clearly seen. (No hidden placements. That would make them difficult to spot.)
UI Design
4. Speach Bubble & Button Prompts
There is a speech bubble on top of the characters you can talk to in the world. From a distance, it has 3 dots against a white background, which makes it stand out against a busy & grey environment.
The button prompts appear when you are close enough to interact with things. Making it clear that you are close enough and what button to press. Leaving no room for ambiguity or confusion.
Speech bubbles on the skeleton & the dog. Button prompts when close enough.
5. Contrast
The UI is clear by using a high contrast on buttons against dark backgrounds. You can still see the game in the background, with the Photo UI as an overlay on top. They put a dark layer behind the UI to make the contrast of the white UI strong. This makes the UI and buttons very easy to see. No bright colors are needed to create this separation of layers!
6. Icons
There is also a good amount of icons used to explain what the button does. The icons used are very classic and simple shapes that we will have seen in other products before. There is an inherent understanding of these icons that helps the player quickly understand how things work.
- If they created their own unique icons (that maybe had another narrative meaning or fit into the game world) they would have seen that the understanding of the UI would have been slower because players would have needed to learn the UI, instead of just understanding it.
Thank you for reading!
I hope you found this useful and learned something new about how to design without color! Please give me some claps if you like it.
Did you play TOEM? What did you think of this black & white photography game?
Check out more cool stuff from me here: https://medium.com/@annawikstrom/lists
