Enlightening Navigation Design in She and The Light Bearer
Introduction
Last summer, I had the chance to intern at Toge Productions, an indie game development studio and game publisher. One of the game developer teams, Mojiken Studio, requested me to test the demo and give feedback on the UX/UI aspect for She and The Light Bearer. I am more than happy to test games that are still in development.
About
She and The Light Bearer is a point-and-click game developed by Mojiken Studio and published by Toge Productions. You play as Firefly and her main quest is to find Mother in a lush forest while meeting a variety of interesting characters along her journey.
Design
Ambience:
I chose this promotional poster art because it accurately illustrates the ambience of the game. The poster can illustrate that the game is highly inspired by traditional folklore that takes place in ancient forests. Tribal typography and patterns are also present in both promotional art and the game. Another aspect that I find interesting about the poster is how it captures the sense of scale, being a small firefly on her quest to find answers while surrounded by large trees in a forest.
Assets Design:
Brigitta Rena’s floral art are based on real-life plants. Non Playable Characters include an Orchid, Potato, Mushroom, and the most notable one is the Indonesian exotic flower: Rafflesia arnoldii.
Not just the characters, interactive elements of the game are also inspired by real-life plants. One of the examples is the leaves based on Mimosa pudica, also known as Putri Malu (Shy Princess) in Indonesia, which shrivels upon contact.
Animated Cutscenes:
Once you have completed certain parts of the game, it will play a cutscene. As you progress throughout the game, you will unlock more cutscenes. It’s always interesting to see the characters interact in an animated feature.
Planning
While my main project was Coffee Talk as a UX/UI Engineer where my design decisions are based on survey data, this one was a bit different because the task is more related to QA Testing where I provide my quick insights as a UX/UI Designer. This feedback is meant to be given before performing usability tests, which explains why it didn’t require a surveys or playtesting sessions. Before I started testing the game, I created a template for QA Testing.
The document’s header starts with the title of the game to indicate what game is being tested. Game development is an iterative process, keeping track of build versions is important. I am sure I’m not the only one who test this game, it is crucial to write who conducted the test. The date when the test is performed needs to be included as well. Last but not least, the priority legend, which I decided to color code each level of severity to make it easier for the designers and developers.
The form is currently written chronologically, it is written based on the first encounter in a time frame. Depending on the preferences of the designers and developers, this can also be modified to be a sorted in terms of the priority level.
In this article, I won’t be discussing about technical or performance improvements, but I will cover the design improvements which are highly noticeable in the full game version.
Design Improvements
Based on the testing performed, I found most of the issues in the game were related to navigation issues. Navigation is vital to the players’ experience which could boost the overall experience of the game, especially in point-and-click adventure games.
Title Screen
The Title Screen is very important in giving potential players first impressions of the game. Hierarchy of usage is an important aspect, meaning that options are sorted from the most frequent selected option to the least. What can be seen in the current title screen design is the hierarchy which is in a horizontal layout. Also the spacing between each option is uneven.
Another aspect to mention is the placement of the Continue option when a save file exists. A common design pattern in video game title screens usually put the Continue option as the first option when starting a game if a save file exists.
In the revised design, the title screen now uses a vertical layout, the Continue option is shown first, and the spacing is now symmetric. Vertical lists are faster to read because generally people read from the top-down. Even if the list is horizontal, users will still scan it vertically, because of the Gestalt Law of Proximity.
Menu
The Menu button in this game allows players to open configurations which include saving game progress and loading save files. Look at the screenshot above, can you find the menu button? The menu button is barely visible specifically in this area because of the size, shape, & color of the button.
Players might be confused with the affordance of the “arrow” icon, which doesn’t imply a function to open the menu button. Players might confuse the arrow button as a button to move the camera into the right direction or proceed to the next area.
Upon clicking the Menu button, the menu spans six options. The icons are too transparent, which are difficult to see and sometimes “blend in” with the background if the background has a bright hue. The icons for each function are difficult to understand as well since they use unfamiliar icons. In terms of interaction cost, it is inefficient because players need to hover each of the icons to see their functions.
In the revised design, the Menu button’s placement is now clipped on the top right of the screen. This also opens more room for the game area which allows players to be more immersed in the game and less distracted from the icons on the top from the previous design.
The Menu button’s icon is also changed to the standard hamburger icon which implies its function to toggle a collapsed menu. Utilizing a more recognizable icon is a good practice to increase the system’s learnability.
Vertical layout is also implemented here where players can skim options a lot faster. Instead of using unfamiliar icons as seen on the previous design, it uses straightforward labels to explain each of the options under the menu.
Choice Selection
In She and The Light Bearer, players can interact with different characters through conversations. In conversations, players pick questions to ask for the character. The selected options in the previous design are grey-colored. I assume players might think greyed-out buttons cannot be selected anymore. I suggested to change the color of the already selected options to indicate that the option is still selectable.
In the revised design, the selected option color has been changed into a different color which implies that it can be selected again.
Visual Cues
In a game filled with puzzles and riddles, it is important to give visual cues to the players about which objects are interactive. At my first playthrough, I thought this part was a cutscene. I waited for 10 seconds and nothing happened. It turned out it was a puzzle where I have to rotate the parts and match the pieces.
In the final game, visual cues are shown as subtle arrows to display an object’s interactivity. This explains the players visually that the puzzle is interacted by spinning the plates without giving the puzzle’s answer.
Speed Up Button
Based on the demo, Firefly moves a bit too slow when she moves to a different area, I suggested this feature to be included to reduce waiting time for players. A large speed up button is added on the top left of the user interface which allows players to speed up the game.
Conclusion
I haven’t played the finished game until recently, and I am surprised that there are a lot of UX/UI improvements since the last time I played the unfinished demo. Upon release on Steam, I am glad that the game has received a lot of positive feedback. This game is a must try for point-and-click adventure game enthusiasts. It is now on Steam for $9.99!
“The whole game feels like a poem written with sincerity and love”
“ This was a surprisingly sweet and lovely game to play. It’s a visual novel with some interactivity and some light puzzles”
“Beautiful and captures the storybook vibe perfectly”
Hopefully this article can be the guiding light for those who want to design an interface for point-and-click games and for those who want to start QA testing for games.
Thanks for reading my second Medium article about video game design! This article is supposed to be released way earlier, but I was very busy with work and job applications for my next term. I want to fill my free time by practicing my writing and research skills so if you have any suggestions, please let me know!
