After a quick introduction to the world of prototyping and rapid ideation, our task this week was to unpack the design theory behind an established product by reverse engineering it. I picked the skills menu from the recently released game Horizon Forbidden West for my product.
The menu interface has many colours, unique interactions, sounds and textures, so I simplified the interface to understand what was happening. By taking away all the fancy designs with simple paper prototypes, I could see past the polished surface to study the components beneath. As the menu has fun interactions and flows, I morphed my wireframes into wireflows (Laubheimer 2016). Above is my final animated wireflow of the skills menu form Horizon Forbidden West.
Analysis
The game’s narrative is set in a post-apocalyptic world set after the present day. Remnants of technology still exist, making a mish-mash style between ‘primitive’ and ‘advanced’. The top-level skills menu looks like a cave wall with streaks of colour painted by hand. On top of these colours are complex networks of skills nodes which appear in stark contrast to the rough background. Jarring as this combination is, it works. The skills networks are represented simplistically, so the difference between them and the hand-painted background is not enough to break immersion. Combining the styles fits with the game’s theme, where the player alternates between the wilderness and forgotten bunkers filled with advanced technology. The style combination is jarring, but it is supposed to be.
Different colours combined with simple icons indicate the differences between skills trees allowing the player to navigate quickly to the one they want. When a tree is selected, an image of the title character appears, further clarifying the purpose of that tree. The image also serves as a marker to know precisely where the player is within the menu, as there is no pointer at this stage. Naturally, the creators wanted varied skills to allow for personalised gameplay, so they ended up with six distinct skills categories. But by colour coding them, the menu needs six different colours. When created from natural materials, purple is a costly colour to produce (Ray 2023), so not many people would choose to paint it or any other fancy colour on a cave wall. But in this case, real history is a little loosey-goosey in the storyline, and the colours here create easy-to-read categories that are understandable at a glance.
Once the player selects a skills tree, the menu cuts to a detailed view of the skills they can ‘buy’ with skills points collected through the game. There are so many passive and active skills options to choose from that it would be easy to become overwhelmed. To avoid option-panic, the creators left considerable margins to the sides and spaced the skills in vertical groups organised around themes such as skill type, level, or ‘cost’.
In this view, the player has control of a pointer which they can move around the tree to select different skills. A pop-up window automatically appears when the mouse hovers over a skill icon. The window shows details about the skill, what it does, how to use it if it’s an active skill and if the player has access to it yet. The decision to remove the need for a button click to activate the pop-up window was probably made to reduce friction, as the player is only here to learn about the skills. But in practice, I have found this auto pop-up annoying as there is no way to stop it from appearing. Especially if the player navigates to the bottom of the tree, every skill the pointer passes over will initiate the pop-up window, even on skills that have already been ‘bought’. This design choice leads to an awkward navigation style in the detailed menu, with pop-ups appearing and disappearing quickly. That said, the auto pop-ups benefit a playing style where the player is less sure of what they are looking for. Immediate prompts of detailed information present the hesitant player with everything they need quickly.
However, navigation between the skills trees is not exclusively accessed from the main menu. With the pointer, the player can traverse left or right, allowing for easy manoeuvring and options for how they want to find their way. Personally, I find this a practical choice as it helps keep the focus on the task at hand rather than zooming out to the main menu where other distractions lurk. However, it is during this type of navigation that the vast margins work against the flow of the menu. The cave texture is busy and very visible, while the gaps between the trees feel huge, especially as the player is beholden to the slow speed of the pointer. However, feelings of an endless ocean of cave texture are mitigated somewhat by the additional option of fast, sticky, sideways navigation with left and right buttons.
In the detailed view close to the network design, the creators maintained the cave painting style with the rough splashes of colour denoting ‘bought’ skills. Additionally, the colour shows a sense of progression as the more significant the skill, the bigger the splash of colour. The colours highlighting each ability correspond to the colours in the high-level menu, creating a subconscious breadcrumb navigation effect (Krug 2014). A level of detail has also been added at this stage as the skills network appears carved into the stone. However, how would it have turned out if they had used the ‘technology overlay’ technique that is present in other areas of the game?
Throughout the skills menu and the menu options as a whole, each navigation ‘moment’ is accompanied by different sounds and vibrations in the controller. Interactions such as these communicate to the player that even though they are inside ‘boring’ menus, what they are doing still has value and is making a difference to their story.
Style mish-mash between 'primitive' and 'modern', Image Credit: Andrew Thornton
Reflection
By breaking down the design decisions in the skills menu of Horizon Forbidden West, I realised the importance of options and compromises. People like to move around in different ways, and by providing those options, the creators have removed a level of friction for players. Additionally, the colour choices and spaces between the menus show practical compromises. Yes, people with this level of technology wouldn’t be putting expensive colours on the walls. Still, the menu readability would have suffered if the colours had been more muted and historically believable. Likewise, with the spacing between trees, by making them closer together, the menu would have felt cluttered and stressful.
I’m glad I picked a game menu for this week’s skills challenge because it has clarified that the basic building blocks of layout, design, and readability are universal, no matter the medium. Concepts of flexible navigation are just as crucial in the online platform of a bank as they are in a game, as pain points are problematic regardless of the media.
In contrast to the pure creation of last week, this week focussed more on the whys. I found this level of fundamental analysis invaluable. Especially as I took something as popular and established as Horizon, where it would be too easy to assume everything they did was perfect. By breaking down a product and recreating it, I was forced to think about design decisions I would typically brush over. For example, when a skill is locked, it has a red colour combined with appropriate copy, or when the player activates something, new colours and sounds appear. When consuming media in any form, you don’t think about it. But doing this challenge made me realise that you can do the same activity with everything around you if you take a moment to relax your eyes and look at the components that make up the whole (Garfield 2010).
If I were to do this task again, I would simplify the wireframe sketches. The diagrams of the high-level skills trees look pretty the way I did it, but it took too long for a genuinely effective prototype. Also, if these wireframes were to be used to develop a product, the level of detail would only hinder forward movement. I could have also simplified the resultant gif with still photos combined, but I like seeing how the pointer moves and interacts with the menu elements.
Bringing what I have learned from this activity into the next, I should be less afraid of doing something too fancy. Initially, I was going to create a simple gif with photos, as I mentioned, but I convinced myself to turn it into a video with many more stages showing a smoother flow. Filming rather than photographing complicated the process, but it was worth it in the end. Although, I need to be careful and avoid getting carried away in future tasks.
Here is the full filming process, including sellotape struggles, help from my other half, and last-minute drawing edits. Oh, and something else I would do differently would be to use knee pads. My poor knees!
References
GARFIELD, Simon. 2010. Just My Type: A Book about Fonts. London: Profile Books.
KRUG, Steve. 2014. Don’t Make Me Think, Revisited: A Common Sense Approach to Web and Mobile Usability. New Riders Press.
LAUBHEIMER, Page. 2016. ‘Wireflows: A UX Deliverable for Workflows and Apps’. Nielsen Norman Group [online]. Available at: https://www.nngroup.com/articles/wireflows/ [accessed 5 Feb 2023].
RAY, Michael. 2023. ‘Purple | Color, Origin, & Associations | Britannica’. Enyclopaedia Britannica [online]. Available at: https://www.britannica.com/science/purple-colour [accessed 5 Feb 2023].
German vocabulary of the week
Killer machines – Killermaschinen / Mörderische Maschinen