Enlightening Navigation Design in She and The Light Bearer

Adlan Arvyanda Ramly
May 22 · 8 min read

Introduction


About


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:

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:

One of the animated cutscenes in the game

Planning

An example of a QA Testing Form that I made

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

Title Screen

Previous horizontal title design

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.

Title design after redesign

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

Previous menu button, which is on top left in case you didn’t see it

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.

Previous menu design, each menu function is represented as an icon with a caption at the end of the icon list

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.

The Menu icon is now the standard hamburger menu on top right

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.

A more intuitive, yet easier to understand menu bar

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


Conclusion

“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!

Toge Productions

Indie game developer & publisher based in Indonesia. Join our Discord server! http://discord.gg/toge

Adlan Arvyanda Ramly

Written by

UX/UI Designer | AR/VR Developer | HCI Researcher http://adlanramly.com

Toge Productions

Indie game developer & publisher based in Indonesia. Join our Discord server! http://discord.gg/toge