Today’s analysis is about The Frostrune, a point and click video game by Grimnir Media, telling the story of a 13 years old girl in a Norse mythology environment. This analysis is centered around a common user practice named in the UX environment as minesweeping: moving the cursor around the screen quickly looking for changes in order to find the links in the page.
It is a practice that can be seen in point and click games when players move the cursor around and click almost everywhere quickly, trying to locate objects in the scene to interact with. This behavior is quite common and makes for a specific experience of the gameplay so the UX of the game should take it into account. Some players will minesweep only when stuck, others will do it every time they enter a new scene. For the purpose of the analysis, let’s meet one of the later ones. Let me introduce you to Carol.
Carol is playing for fun, and fun means progress for her. Now she is playing The Frostrune and every time she enters a scene, a thought crosses her mind.
Where can I go and what objects can I interact with?
Let’s use as an example the village in the game, one of the very first scenes.
Below, a possible the possible first-sight solution she finds to her thought. In pink the spots she identifies as link to new possible scenes, and in green, areas of approximate areas of interaction scattered around the scene, being buttons, objects or links to other scenes.
And now, the overlapping of her thoughts and the real interactions in the scene. As we can see, there are only four interactions allowed: in yellow, buttons. These have different areas of influence, not really consistent: inventory and spiritual world buttons have shaped areas of influence, while menu is radial and back is more trapezoidal. Blue identifies an interactive object, the rock, whose area influence is really similar to what Carol expected. The rest of the colors, red and white highlight the influence of new areas: the white area comes closer to the front cabin and the blue area to the one on the rear. And these present us the very first issue of this scene:
UX Issue 01: Areas of influence are not intuitive
Why does the area of influence of the rear cabin cover the closer fence?
And the right part of the scene is even more unintuitive: there are no interactive objects, not the buckets nor the cloth. There is only one link to another scene and it cuts the area in a weird shape: only part of the cloth, covering the buckets but not the whole cabin.
Areas of influence are a common guessing game in the point and click genre: you try to interact with an object and it is not possible. The problem comes when the player identifies some part of the scene as an object and clicking on it links you to another scene. Carol loves clicking around and every time she does that in this scene, according to her very first thoughts, there is a high chance of it leading to another scene. Instead of encouraging interaction, it feels like a punishment which forces the player to go back. Here is a possible approach to this issue:
UX Issue 01: Hypothesis
I believe that UX Issue 01 needs for a UX testing. In which the goal will be:
Identify the perceived areas of influence by users.
And the solution proposed for the issue is:
Reshape the areas of influence according to the average perceived shape.
But the matter is not solved yet. This issue calls for another two related ones that also interfere with the user experience. One of them has already been mentioned.
UX Issue 02: Inventory overlaps back button
Let’s pick it up from where we left. Carol has just entered the village and taken a look at her surroundings. She sees the bucket and remembers that she has bit of clay in her inventory, maybe she can use it in there to mold something? So, the following happens:
Let me sum this up developing a Use case to clarify the issue:
USE CASE
Actor: Carol
Goal: Discover if inventory object clay interacts with scene object bucket and if not, continue her exploration.
Intended steps:
1. Click inventory button.
2. Click object clay.
3. Click the bucket.
4. Interaction checked.
5. Continue exploration.
Game flow:
1. Click inventory button.
2. Click object clay.
3. Click the bucket.
4. Goal achieved.
5. Scene changes unintentionally.àUX Issue 01
6. Click inventory button.àUX Issue 02
7. Click back button to return to previous scene.àUX Issue 02
8. Continue exploration.
This issue is the punishment previously mentioned. Carol only wants to try something, an idea very logical in her head and that has no added complications in her head. Instead, she tries and confronts with the first issue we already explained and another one. When the inventory is opened, the back button disappears, forcing her to go to the corner of the screen, close the inventory and click back in order to return where she started and thought would end the action.
Opening/Closing the inventory and navigating through screens compound basically all the mechanics available for the player, so it is fundamental that they don’t interfere with each other. Many point and click games such as The last door have the inventory always visible precisely to help the player save some clicks and always remember which objects are being stored. Inventory button can be added though to provide clearer view of the scene, but anyway something has to be remembered: there can never be an interaction available where the opened inventory is placed.
That being said, a solution to this issue is meant to be provided. There are two possible approaches:
1. Ban scene transition when inventory is opened.
This solution is mentioned to take it in mind, as it only solves the issue partially and should only be a temporal measure. On the pros side, unintended navigation is avoided and it is not a condition difficult to implement and solves the problem. Cons on the other side:
a) The player is unaware of the condition or does not remember either the condition or that the inventory is opened:
b) The inventory still has to be closed in order to make the back button appear.
2. Move the inventory:
a. To the side
Just some quick measures measurements let us see that the inventory can be relocated to the left. This solution maintains all the current elements, but needs some additional actions to make the corner feel less saturated:
- Reduce the area of influence of the back button: fit the button itself.
- Locate the buttons a bit closer to the corners of the screen: just some pixels would be enough.
- Reduce the inventory size: a 95% should be enough.
- Add another graphic for the inventory button: it can show the pocket of the bag opened.
b. Always opened
Another solution would be to remove the inventory button and keep it always visible. Must be remarked again that this would save clicks and memory to the player. It acts as a functional affordance.
c. Middle split
Another way around it would be dividing the inventory in two segments. This solution would interfere the minimum with the current design.
Any of these solutions would make the deal. Each one has pros and cons, though my favorite one would be making the inventory always visible. It is the design that helps the player the most, and thus, the better in my opinion.
But wait, there is still more to say. Carol is still playing. We have made here experience smoother: areas of influence have been reworked and she can try her ideas openly without the fear of an undesired scene transition and clicks are saved whenever she wants to press back and the inventory is opened. Now she plays faster, she is anxious to try her ideas and move forward, and this happens:
UX Issue 03: Slow scene transitions enable navigation issues
The transitions between scenes takes almost a second to be completed. That is a lot of time for Carol. She clicks in the cabin and then realizes it is not what she intended to do. For that reason, she clicks the back button many times, desperate to avoid a slow transition and ends up leaving the village.
The issue this time arises from the player’s impatience, but it can be predicted and taken care of. If transitions where fast enough to equal the average time needed to get to the back button, by the time the player gets to it, the transition will have ended and the waiting time and thus, impatience of the player would decrease.
UX Issue 03: Hypothesis
I believe that UX Issue 03 needs for an implementation solution.
And the solutions proposed for the issue are two:
a) Hasten the transitions between scenes enough to equal or be proximate to the time needed to go from the middle of the screen to the back button.
UX Issue 04: Menu button always shining
This issue does not interfere with the experience of the game itself, but raises some doubts that can be easily avoided. The menu button is always shining and it does not change when the menu is opened. The inventory one on the other hand, only shines when it is opened. There are more buttons in the screen, back and spiritual world. Neither of these change at any time, as they provoke changes in the scene itself (back jumps between scenes and spiritual world makes everything look frozen) so the inventory and the menu button are the closest each other.
As we can see above, the menu button is always highlighted but, below, the inventory only shines when opened:
UX Issue 04: Hypothesis
I believe that UX Issue 04 needs for a design solution. In which the goal will be:
Remove the shining of the menu button when closed.
Use the current shining design when the menu is opened.
And that’s a wrap!
Now Carol we can relax knowing that Carol will be able to click like crazy around the fantastic world of The Frostrune and the UX design takes care of her and what how her behavior affects her experience.
Go for it, Carol! Minesweep your way to Odin!
